@crisp-ui-kit/crisp 0.7.4 → 0.7.5

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/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/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.5",
   "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",