@crisp-ui-kit/crisp 0.7.4 → 0.7.6

package/dist/cjs/components/datatable/datatable.js

@@ -107,16 +107,30 @@ function formatCell(type, v, symbol) {
     return asText(v);
 }
 /** Built-in typed-cell renderer (used when a column has no custom `render`). */
-function renderTyped(col, value, avatarTone) {
+// `value` is always the RAW cell value and `display` the caller's `format`
+// output, if any. They are separate arguments on purpose: the entity and tags
+// branches inspect the value's SHAPE (object / array), so handing them a
+// formatted string used to make them fall through to their empty state and
+// silently drop the cell's data. Each branch decides for itself where a
+// display string belongs -- as an entity's name, a status' label -- while the
+// raw value keeps driving structure and tone.
+function renderTyped(col, value, avatarTone, display) {
     const empty = (0, jsx_runtime_1.jsx)("span", { className: "datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
-            const e = (typeof value === "object" && value ? value : { name: asText(value) });
+            const raw = (typeof value === "object" && value ? value : { name: asText(value) });
+            // a formatted string relabels the entity; its avatar and its hashed tone
+            // still come from the real value
+            const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(e.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-entity-name", children: e.name })] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-entity-name", children: e.name })] }));
         }
         case "tags": {
+            // asking for a format on a tag column means "render it your way" -- show
+            // that string rather than trying to split it back into chips
+            if (display)
+                return display;
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
@@ -126,10 +140,12 @@ function renderTyped(col, value, avatarTone) {
             const s = asText(value);
             if (!s)
                 return empty;
-            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: s }));
+            // tone is looked up by the RAW status, so formatting the label (casing,
+            // translation) can never silently repaint the chip
+            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
-            const text = formatCell(col.type, value, col.symbol);
+            const text = display || formatCell(col.type, value, col.symbol);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
@@ -324,7 +340,8 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     }
     /**
      * Spreadsheet keyboard model, ported from RecordsTable: arrows move the
-     * selected cell, Enter opens its editor, Escape clears, and Cmd/Ctrl+C
+     * selected cell, Enter opens its editor (or, on a non-editable cell,
+     * activates the row via `onRowClick`), Escape clears, and Cmd/Ctrl+C
      * copies the cell's RENDERED text (what the user sees, not the raw value).
      */
     function onGridKeyDown(e) {
@@ -361,6 +378,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                 e.preventDefault();
                 setEditing({ id: selCell.id, key: selCell.key });
             }
+            else if (onRowClick) {
+                e.preventDefault();
+                onRowClick(rows[r]);
+            }
             return;
         }
         else
@@ -502,7 +523,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     }
                                                 }, children: col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
+                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

package/dist/cjs/product/recordstable/recordstable.js

@@ -394,6 +394,15 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
 function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, rows: rowsProp = exports.defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, }) {
     const [cols, setCols] = React.useState(columnsProp);
     const [data, setData] = React.useState(rowsProp);
+    // The table owns `cols`/`data` so it can rename a column, edit a cell, or
+    // append a record without a round trip. That state is seeded from the props,
+    // so without these it would be a mount-time SNAPSHOT: an app that renders
+    // `rows={[]}` and re-renders with fetched rows would show "No records yet"
+    // for ever. Re-seed whenever the caller hands us a new array -- caller wins,
+    // exactly as DataTable does for its columns. Local edits survive until then,
+    // because a caller passing a stable array never triggers this.
+    React.useEffect(() => setCols(columnsProp), [columnsProp]);
+    React.useEffect(() => setData(rowsProp), [rowsProp]);
     // Attio's multi-criteria sort: an ordered list of {field, direction} rows.
     const [sorts, setSorts] = React.useState([]);
     const [dragSort, setDragSort] = React.useState(null);
@@ -607,7 +616,20 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
     };
     const allSelected = visibleRows.length > 0 && visibleRows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
-    const toggleAll = () => setSelected(allSelected ? new Set() : new Set(visibleRows.map((r) => r.id)));
+    // The header checkbox speaks for the rows you can SEE. Rebuilding the whole
+    // set from `visibleRows` would silently drop anything an active filter is
+    // hiding -- on a surface with a bulk Delete, that loses a selection the user
+    // made. Add/remove the visible rows and leave the rest of the set alone.
+    const toggleAll = () => {
+        const next = new Set(selected);
+        for (const r of visibleRows) {
+            if (allSelected)
+                next.delete(r.id);
+            else
+                next.add(r.id);
+        }
+        setSelected(next);
+    };
     const toggleRow = (id) => {
         const next = new Set(selected);
         // shift-click → select the contiguous range from the anchor to this row
@@ -804,7 +826,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         URL.revokeObjectURL(url);
         setOpenMenu(null);
     };
-    const entityKey = cols.find((c) => c.type === "entity")?.key;
+    const entityCol = cols.find((c) => c.type === "entity");
     // "Add to list" → pin the selected rows (shows a ★ on the entity)
     const addToList = () => {
         setPinned((prev) => new Set([...prev, ...selected]));
@@ -814,7 +836,10 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
     const sendEmail = () => {
         const names = data
             .filter((r) => selected.has(r.id))
-            .map((r) => entityKey ? cellText({ key: entityKey, label: "" }, r) : r.id);
+            // Pass the real column: `cellText` -> `rawText` reads `col.type` to pull
+            // an entity's `.name`, so a `{key, label}` stand-in with no `type` falls
+            // through to String(value) and yields "[object Object]".
+            .map((r) => (entityCol ? cellText(entityCol, r) : r.id));
         window.open(`mailto:?subject=${encodeURIComponent(names.join(", "))}`);
     };
     // "Run workflow" → a demo automation: duplicate the selected records

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

@@ -71,16 +71,30 @@ function formatCell(type, v, symbol) {
     return asText(v);
 }
 /** Built-in typed-cell renderer (used when a column has no custom `render`). */
-function renderTyped(col, value, avatarTone) {
+// `value` is always the RAW cell value and `display` the caller's `format`
+// output, if any. They are separate arguments on purpose: the entity and tags
+// branches inspect the value's SHAPE (object / array), so handing them a
+// formatted string used to make them fall through to their empty state and
+// silently drop the cell's data. Each branch decides for itself where a
+// display string belongs -- as an entity's name, a status' label -- while the
+// raw value keeps driving structure and tone.
+function renderTyped(col, value, avatarTone, display) {
     const empty = _jsx("span", { className: "datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
-            const e = (typeof value === "object" && value ? value : { name: asText(value) });
+            const raw = (typeof value === "object" && value ? value : { name: asText(value) });
+            // a formatted string relabels the entity; its avatar and its hashed tone
+            // still come from the real value
+            const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(e.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
+            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
         }
         case "tags": {
+            // asking for a format on a tag column means "render it your way" -- show
+            // that string rather than trying to split it back into chips
+            if (display)
+                return display;
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
@@ -90,10 +104,12 @@ function renderTyped(col, value, avatarTone) {
             const s = asText(value);
             if (!s)
                 return empty;
-            return (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: s }));
+            // tone is looked up by the RAW status, so formatting the label (casing,
+            // translation) can never silently repaint the chip
+            return (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
-            const text = formatCell(col.type, value, col.symbol);
+            const text = display || formatCell(col.type, value, col.symbol);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
@@ -288,7 +304,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     }
     /**
      * Spreadsheet keyboard model, ported from RecordsTable: arrows move the
-     * selected cell, Enter opens its editor, Escape clears, and Cmd/Ctrl+C
+     * selected cell, Enter opens its editor (or, on a non-editable cell,
+     * activates the row via `onRowClick`), Escape clears, and Cmd/Ctrl+C
      * copies the cell's RENDERED text (what the user sees, not the raw value).
      */
     function onGridKeyDown(e) {
@@ -325,6 +342,10 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 e.preventDefault();
                 setEditing({ id: selCell.id, key: selCell.key });
             }
+            else if (onRowClick) {
+                e.preventDefault();
+                onRowClick(rows[r]);
+            }
             return;
         }
         else
@@ -466,7 +487,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }
                                                 }, children: col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
+                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

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

@@ -356,6 +356,15 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
 export function RecordsTable({ labels, columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, }) {
     const [cols, setCols] = React.useState(columnsProp);
     const [data, setData] = React.useState(rowsProp);
+    // The table owns `cols`/`data` so it can rename a column, edit a cell, or
+    // append a record without a round trip. That state is seeded from the props,
+    // so without these it would be a mount-time SNAPSHOT: an app that renders
+    // `rows={[]}` and re-renders with fetched rows would show "No records yet"
+    // for ever. Re-seed whenever the caller hands us a new array -- caller wins,
+    // exactly as DataTable does for its columns. Local edits survive until then,
+    // because a caller passing a stable array never triggers this.
+    React.useEffect(() => setCols(columnsProp), [columnsProp]);
+    React.useEffect(() => setData(rowsProp), [rowsProp]);
     // Attio's multi-criteria sort: an ordered list of {field, direction} rows.
     const [sorts, setSorts] = React.useState([]);
     const [dragSort, setDragSort] = React.useState(null);
@@ -569,7 +578,20 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
     };
     const allSelected = visibleRows.length > 0 && visibleRows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
-    const toggleAll = () => setSelected(allSelected ? new Set() : new Set(visibleRows.map((r) => r.id)));
+    // The header checkbox speaks for the rows you can SEE. Rebuilding the whole
+    // set from `visibleRows` would silently drop anything an active filter is
+    // hiding -- on a surface with a bulk Delete, that loses a selection the user
+    // made. Add/remove the visible rows and leave the rest of the set alone.
+    const toggleAll = () => {
+        const next = new Set(selected);
+        for (const r of visibleRows) {
+            if (allSelected)
+                next.delete(r.id);
+            else
+                next.add(r.id);
+        }
+        setSelected(next);
+    };
     const toggleRow = (id) => {
         const next = new Set(selected);
         // shift-click → select the contiguous range from the anchor to this row
@@ -766,7 +788,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         URL.revokeObjectURL(url);
         setOpenMenu(null);
     };
-    const entityKey = cols.find((c) => c.type === "entity")?.key;
+    const entityCol = cols.find((c) => c.type === "entity");
     // "Add to list" → pin the selected rows (shows a ★ on the entity)
     const addToList = () => {
         setPinned((prev) => new Set([...prev, ...selected]));
@@ -776,7 +798,10 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
     const sendEmail = () => {
         const names = data
             .filter((r) => selected.has(r.id))
-            .map((r) => entityKey ? cellText({ key: entityKey, label: "" }, r) : r.id);
+            // Pass the real column: `cellText` -> `rawText` reads `col.type` to pull
+            // an entity's `.name`, so a `{key, label}` stand-in with no `type` falls
+            // through to String(value) and yields "[object Object]".
+            .map((r) => (entityCol ? cellText(entityCol, r) : r.id));
         window.open(`mailto:?subject=${encodeURIComponent(names.join(", "))}`);
     };
     // "Run workflow" → a demo automation: duplicate the selected records

package/dist/types/components/datatable/datatable.d.ts

@@ -39,7 +39,9 @@ export type DataTableColumn<T> = {
     accessor?: (row: T) => string | number;
     /** Transform the value into a display string (locale formatting, masking, a
      * unit suffix, …); the result still flows through the built-in type
-     * renderer, so a `number`/`currency` column keeps its alignment + chrome.
+     * renderer, so a `number`/`currency` column keeps its alignment + chrome, an
+     * `entity` keeps its avatar, and a `status` keeps the tone its raw value maps
+     * to. A `tags` column renders the string as-is instead of its chips.
      * Precedence: `render` (full custom node) beats `format` (value string)
      * beats the built-in type renderer. Display-only — sorting and filtering
      * use the raw/`accessor` value, never the formatted string. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -87,6 +87,11 @@
       "import": "./dist/esm/components/checkbox/index.js",
       "require": "./dist/cjs/components/checkbox/index.js"
     },
+    "./columncalc": {
+      "types": "./dist/types/components/columncalc/index.d.ts",
+      "import": "./dist/esm/components/columncalc/index.js",
+      "require": "./dist/cjs/components/columncalc/index.js"
+    },
     "./contextmenu": {
       "types": "./dist/types/components/contextmenu/index.d.ts",
       "import": "./dist/esm/components/contextmenu/index.js",
@@ -257,6 +262,11 @@
       "import": "./dist/esm/product/appshell/index.js",
       "require": "./dist/cjs/product/appshell/index.js"
     },
+    "./authshell": {
+      "types": "./dist/types/product/authshell/index.d.ts",
+      "import": "./dist/esm/product/authshell/index.js",
+      "require": "./dist/cjs/product/authshell/index.js"
+    },
     "./board": {
       "types": "./dist/types/product/board/index.d.ts",
       "import": "./dist/esm/product/board/index.js",