@crisp-ui-kit/crisp 0.7.5 → 0.7.6

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",