@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -6,11 +6,11 @@ import { Avatar } from "../../components/avatar/index.js";
 import { BulkBar, BulkBarButton } from "../../components/bulkbar/index.js";
 import { Button } from "../../components/button/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
-import { DatePicker } from "../../components/datepicker/index.js";
+import { DatePickerField } from "../../components/datepickerfield/index.js";
 import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
 import { EmptyState } from "../../components/emptystate/index.js";
 import { Input } from "../../components/input/index.js";
-import { Menu, MenuItem } from "../../components/menu/index.js";
+import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js";
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
@@ -48,14 +48,76 @@ function avatarToneFor(name) {
         h = (h * 31 + name.charCodeAt(i)) >>> 0;
     return AVATAR_TONES[h % AVATAR_TONES.length];
 }
-const AGG_LABELS = {
-    none: "None",
-    count: "Count all",
-    filled: "Not empty",
-    sum: "Sum",
-    avg: "Average",
-    min: "Min",
-    max: "Max",
+export const recordsTableLabels = {
+    selectAll: "Select all",
+    sort: "Sort",
+    sortField: "Sort field",
+    sortDirection: "Sort direction",
+    removeSort: "Remove sort",
+    reorderSort: "Reorder sort",
+    addSort: "Add sort",
+    ascending: "Ascending",
+    descending: "Descending",
+    noSorts: "No sorts applied to this view.",
+    learnSorting: "Learn about sorting",
+    filter: "Filter",
+    addFilter: "Add filter",
+    filterByField: "Filter by field",
+    filterByPlaceholder: "Filter by…",
+    filterValuePlaceholder: "Value…",
+    selectCondition: "Select condition",
+    clearFilter: "Clear filter",
+    addColumn: "Add column",
+    columnLabel: "Column label",
+    editColumnLabel: "Edit column label",
+    hideFromView: "Hide from view",
+    moveLeft: "Move left",
+    moveRight: "Move right",
+    sortAscending: "Sort ascending",
+    sortDescending: "Sort descending",
+    newRecord: "New record",
+    createRecord: "Create record",
+    createMore: "Create more",
+    newButton: "New",
+    more: "More",
+    moreActions: "More actions",
+    recordActions: "Record actions",
+    copy: "Copy",
+    duplicate: "Duplicate",
+    addToList: "Add to list",
+    inAList: "In a list",
+    delete: "Delete",
+    sendEmail: "Send email",
+    exportCsv: "Export CSV",
+    runWorkflow: "Run workflow",
+    calculate: "Calculate",
+    emptyPlaceholder: "Empty",
+    setRecordPlaceholder: "Set a record…",
+    noRecords: "No records yet",
+    untitled: "Untitled",
+    agg: {
+        none: "None",
+        count: "Count all",
+        filled: "Not empty",
+        sum: "Sum",
+        avg: "Average",
+        min: "Min",
+        max: "Max",
+    },
+    op: {
+        contains: "contains",
+        is: "is",
+        isnot: "is not",
+        empty: "is empty",
+        notempty: "is not empty",
+    },
+    newRecordTitle: (entity) => `New ${entity}`,
+    setFieldPlaceholder: (field) => `Set ${field}…`,
+    newColumnLabel: (index) => `Field ${index}`,
+    sortedBy: (first, extra) => `Sorted by ${first}${extra ? ` +${extra}` : ""}`,
+    filterCount: (active) => (active ? `Filter · ${active}` : "Filter"),
+    recordCount: (n) => `${n} record${n === 1 ? "" : "s"}`,
+    conditionTitle: (field) => `${field} condition`,
 };
 // currency is numeric data too — it gets the same numeric aggregations as
 // `number` (only `number` auto-defaults to Sum on mount; currency starts at
@@ -70,13 +132,6 @@ const compact = new Intl.NumberFormat("en", {
 const CHECK_W = 40;
 const ADDCOL_W = 44;
 const colWidth = (col) => col.width ?? (col.type === "entity" ? 240 : 180);
-const OP_LABELS = {
-    contains: "contains",
-    is: "is",
-    isnot: "is not",
-    empty: "is empty",
-    notempty: "is not empty",
-};
 const OP_ORDER = ["contains", "is", "isnot", "empty", "notempty"];
 const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
 function matchesFilter(col, row, cond) {
@@ -152,7 +207,7 @@ function summarize(col, agg, rows) {
         n = Math.max(...nums);
     return { label: agg, value: compact.format(n) };
 }
-function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", }) {
+function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", labels, }) {
     // a real favicon/logo when we have one; fall back to the letter tile if it
     // 404s or the row has no avatar
     const [imgFailed, setImgFailed] = React.useState(false);
@@ -160,9 +215,9 @@ function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", }) {
     return (_jsxs("span", { className: "recordstable-entity", children: [showImg ? (_jsx("img", { className: "recordstable-fav", src: value.avatar, alt: "", onError: () => setImgFailed(true) })) : (_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(value.name) : "brand", children: value.name.charAt(0) })), onOpenPage ? (_jsx("button", { type: "button", className: "recordstable-entity-name recordstable-entity-name--link", onClick: (e) => {
                     e.stopPropagation();
                     onOpenPage();
-                }, children: value.name })) : (_jsx("span", { className: "recordstable-entity-name", children: value.name })), pinned ? (_jsx(Star, { className: "recordstable-pin", size: 13, strokeWidth: 2, "aria-label": "In a list" })) : null] }));
+                }, children: value.name })) : (_jsx("span", { className: "recordstable-entity-name", children: value.name })), pinned ? (_jsx(Star, { className: "recordstable-pin", size: 13, strokeWidth: 2, "aria-label": labels.inAList })) : null] }));
 }
-function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", }) {
+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
@@ -179,7 +234,7 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", }) {
     const display = column.format?.(value, row);
     switch (column.type) {
         case "entity":
-            return (_jsx(EntityCell, { value: value, pinned: pinned, onOpenPage: onOpenPage, avatarTone: avatarTone }));
+            return (_jsx(EntityCell, { labels: labels, value: value, pinned: pinned, onOpenPage: onOpenPage, avatarTone: avatarTone }));
         case "tags":
             return (_jsx("span", { className: "recordstable-cell recordstable-cell--tags", children: value.map((t) => (_jsx("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
         case "number":
@@ -215,20 +270,20 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", }) {
 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 ?? [] }));
 }
-function ReferenceCell({ column, row, onChange, }) {
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: "Search records\u2026", "aria-label": column.label, placeholder: "Set a record\u2026", value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
+function ReferenceCell({ column, row, onChange, labels, }) {
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: "Search records\u2026", "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,
         })) }));
 }
-function TagsCell({ column, row, options, onChange, }) {
+function TagsCell({ column, row, options, onChange, labels, }) {
     const value = row[column.key] ?? [];
-    return (_jsx(MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: "Empty", searchPlaceholder: "Search options\u2026", "aria-label": column.label }));
+    return (_jsx(MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: labels.emptyPlaceholder, searchPlaceholder: "Search options\u2026", "aria-label": column.label }));
 }
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
     const value = raw ? new Date(raw) : null;
-    return (_jsx(DatePicker, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(d.toISOString().slice(0, 10)) }));
+    return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(d.toISOString().slice(0, 10)) }));
 }
 /**
  * The "New <object>" create modal — measured from Attio's create-record dialog:
@@ -236,7 +291,7 @@ function DateCell({ column, row, onChange, }) {
  * primary "Create record" action (⌘↵). Building the row mirrors the inline
  * editor's per-type coercion so a created record reads back like an edited one.
  */
-function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate, }) {
+function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate, labels, }) {
     const [values, setValues] = React.useState({});
     const [createMore, setCreateMore] = React.useState(false);
     const firstRef = React.useRef(null);
@@ -253,7 +308,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
         for (const col of columns) {
             const raw = (values[col.key] ?? "").trim();
             if (col.type === "entity") {
-                row[col.key] = { name: raw || "Untitled" };
+                row[col.key] = { name: raw || labels.untitled };
             }
             else if (!raw) {
                 // leave empty fields unset so the cell renders its "—" placeholder
@@ -285,10 +340,10 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
     };
     const entityCol = columns.find((c) => c.type === "entity");
     const EntityIcon = entityCol?.icon;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: `New ${entityLabel}`, icon: EntityIcon ? _jsx(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [_jsx(DialogBody, { children: columns.map((col, i) => (_jsxs("div", { className: "dialog-field", children: [_jsx("label", { className: "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: `Set ${col.label}…`, onKeyDown: (e) => {
+    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: "dialog-field", children: [_jsx("label", { className: "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: "dialog-more", children: ["Create more", _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": "Create more" })] }), _jsxs("button", { type: "button", className: "dialog-submit", onClick: submit, children: ["Create record", _jsx("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, _jsx("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
 }
 /**
  * Attio-style record grid — fully featured. Toolbar (search / sort status /
@@ -298,7 +353,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
  */
-export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, }) {
+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);
     // Attio's multi-criteria sort: an ordered list of {field, direction} rows.
@@ -312,13 +367,23 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
     const [filterConds, setFilterConds] = React.useState([]);
     const [filterQuery, setFilterQuery] = React.useState("");
     // one popover open at a time: "sort" | "filter" | "more" | `sum:<key>`
+    const t = React.useMemo(() => ({
+        ...recordsTableLabels,
+        ...labels,
+        agg: { ...recordsTableLabels.agg, ...labels?.agg },
+        op: { ...recordsTableLabels.op, ...labels?.op },
+    }), [labels]);
     const [openMenu, setOpenMenu] = React.useState(null);
+    // the element that opened the current menu, so Esc/select can hand focus back
+    const menuReturn = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const ctxRef = React.useRef(null);
+    const ctxReturn = React.useRef(null);
     // viewport-anchored position for menus that live inside the scroll container
     // (summary footer, column headers) — rendered fixed to escape the overflow clip
     const [menuPos, setMenuPos] = React.useState(null);
     const [pinned, setPinned] = React.useState(() => new Set());
     const [scrolledX, setScrolledX] = React.useState(false);
-    const [scrolledY, setScrolledY] = React.useState(false);
     const idCounter = React.useRef(0);
     // fixed menus (summary / header) portal here — outside the sticky cells'
     // stacking contexts, but still inside .recordstable so the styles apply
@@ -586,7 +651,7 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
         const entityKey = cols.find((c) => c.type === "entity")?.key;
         const row = { id };
         if (entityKey)
-            row[entityKey] = { name: "Untitled" };
+            row[entityKey] = { name: t.untitled };
         setData((prev) => [...prev, row]);
         if (entityKey)
             setEditing(null);
@@ -613,20 +678,24 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
         });
         setOpenMenu(null);
     };
-    // drop the dragged column immediately before `toKey` (drag-to-reorder). The
-    // sticky entity column (index 0) stays pinned — never reorder into slot 0.
+    // drop the dragged column INTO `toKey`'s slot (drag-to-reorder) — the slot the
+    // dragover indicator highlights, and the same result the header menu's "Move
+    // left"/"Move right" gives for a neighbouring column. The sticky entity
+    // column (index 0) stays pinned — never reorder into slot 0.
     const reorderColumn = (fromKey, toKey) => {
         setDragCol(null);
         if (fromKey === toKey)
             return;
         setCols((prev) => {
             const from = prev.findIndex((c) => c.key === fromKey);
-            let to = prev.findIndex((c) => c.key === toKey);
+            const to = prev.findIndex((c) => c.key === toKey);
             if (from < 1 || to < 1)
                 return prev;
             const next = [...prev];
             const [moved] = next.splice(from, 1);
-            to = next.findIndex((c) => c.key === toKey);
+            // insert at the TARGET'S ORIGINAL index, which is the slot the dragover
+            // indicator highlighted. Re-finding the target after the splice shifts
+            // every rightward drag one slot left, so an adjacent one does nothing.
             next.splice(to, 0, moved);
             return next;
         });
@@ -637,6 +706,29 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
             setCols((prev) => prev.map((c) => (c.key === key ? { ...c, label: name } : c)));
         setRenamingCol(null);
     };
+    // the two `role="menu"` popovers driven by `openMenu`; the sort and filter
+    // popovers are dialogs and keep their own focus handling
+    const roleMenuOpen = !!openMenu && (openMenu.startsWith("col:") || openMenu.startsWith("sum:"));
+    const closeRoleMenu = React.useCallback(() => {
+        setOpenMenu(null);
+        menuReturn.current?.focus();
+    }, []);
+    const { onKeyDown: onMenuKeyDown } = useMenuKeyboard({
+        open: roleMenuOpen,
+        close: closeRoleMenu,
+        dismiss: () => setOpenMenu(null),
+        contentRef: menuRef,
+    });
+    const closeCtxMenu = React.useCallback(() => {
+        setCtxMenu(null);
+        ctxReturn.current?.focus();
+    }, []);
+    const { onKeyDown: onCtxKeyDown } = useMenuKeyboard({
+        open: !!ctxMenu,
+        close: closeCtxMenu,
+        dismiss: () => setCtxMenu(null),
+        contentRef: ctxRef,
+    });
     const openColumnMenu = (key, el) => {
         if (openMenu === `col:${key}`) {
             setOpenMenu(null);
@@ -644,6 +736,7 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
         }
         const r = el.getBoundingClientRect();
         setMenuPos({ top: r.bottom + 4, left: r.left });
+        menuReturn.current = el;
         setOpenMenu(`col:${key}`);
     };
     const addColumn = () => {
@@ -651,7 +744,7 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
         const key = `field-${idCounter.current}`;
         setCols((prev) => [
             ...prev,
-            { key, label: `Field ${prev.length}`, type: "text", width: 160 },
+            { key, label: t.newColumnLabel(prev.length), type: "text", width: 160 },
         ]);
     };
     const deleteSelected = () => {
@@ -759,30 +852,30 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
         window.addEventListener("pointerup", onUp);
     };
     return (_jsxs("div", { className: recordstableRecipe({ className }), ref: rootRef, children: [_jsxs("div", { className: "recordstable-toolbar", children: [_jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `recordstable-tool${sorts.length ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sorts.length
-                                        ? `Sorted by ${cols.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
-                                        : "Sort"] }), openMenu === "sort" && (_jsxs("div", { className: "recordstable-menu recordstable-sortpop", role: "dialog", "aria-label": "Sort", children: [sorts.length === 0 ? (_jsx("div", { className: "recordstable-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => (_jsxs("div", { className: "recordstable-sort-row", onDragOver: (e) => {
+                                        ? t.sortedBy(cols.find((c) => c.key === sorts[0].key)?.label ?? "", sorts.length - 1)
+                                        : t.sort] }), openMenu === "sort" && (_jsxs("div", { className: "recordstable-menu recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? (_jsx("div", { className: "recordstable-sort-empty", children: t.noSorts })) : (sorts.map((s, i) => (_jsxs("div", { className: "recordstable-sort-row", onDragOver: (e) => {
                                             if (dragSort !== null)
                                                 e.preventDefault();
                                         }, onDrop: () => {
                                             if (dragSort !== null)
                                                 moveSort(dragSort, i);
                                             setDragSort(null);
-                                        }, children: [_jsx("button", { type: "button", className: "recordstable-sort-grip", "aria-label": "Reorder sort", draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "recordstable-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: cols.map((c) => ({
+                                        }, children: [_jsx("button", { type: "button", className: "recordstable-sort-grip", "aria-label": t.reorderSort, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "recordstable-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: cols.map((c) => ({
                                                     value: c.key,
                                                     label: c.icon ? (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                     keywords: c.label,
-                                                })), "aria-label": "Sort field" }), _jsx(Select, { className: "recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                                })), "aria-label": t.sortField }), _jsx(Select, { className: "recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                     {
                                                         value: "asc",
-                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), "Ascending"] })),
-                                                        keywords: "Ascending",
+                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), t.ascending] })),
+                                                        keywords: t.ascending,
                                                     },
                                                     {
                                                         value: "desc",
-                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), "Descending"] })),
-                                                        keywords: "Descending",
+                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
+                                                        keywords: t.descending,
                                                     },
-                                                ], "aria-label": "Sort direction" }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": "Remove sort", children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), _jsx("div", { className: "recordstable-sort-foot", children: _jsxs("a", { className: "recordstable-sort-learn", href: "https://attio.com/help", target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) })] }))] }), _jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "menu", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), activeFilters ? `Filter · ${activeFilters}` : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "recordstable-menu", role: "menu", children: [_jsx("input", { className: "recordstable-menu-input", placeholder: "Filter by\u2026", "aria-label": "Filter by field", 
+                                                ], "aria-label": t.sortDirection }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), _jsx("div", { className: "recordstable-sort-foot", children: _jsxs("a", { className: "recordstable-sort-learn", href: "https://attio.com/help", target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] }) })] }))] }), _jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && (_jsxs("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [_jsx("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                         autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), cols
                                         .filter((col) => col.label
@@ -792,14 +885,12 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                         const col = cols.find((c) => c.key === cond.key);
                         const open = openMenu === `fcond:${cond.id}`;
                         const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                        return (_jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("span", { className: "recordstable-fchip", children: [_jsxs("button", { type: "button", className: "recordstable-fchip-main", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "recordstable-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "recordstable-fchip-op", children: "Select condition" }))] }), _jsx("button", { type: "button", className: "recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "recordstable-menu", role: "menu", children: [_jsxs("div", { className: "recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "recordstable-menu-input", placeholder: "Value\u2026", "aria-label": `${col?.label} filter value`, 
+                        return (_jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("span", { className: "recordstable-fchip", children: [_jsxs("button", { type: "button", className: "recordstable-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "recordstable-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-fchip-op", children: t.op[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "recordstable-fchip-op", children: t.selectCondition }))] }), _jsx("button", { type: "button", className: "recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "recordstable-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [t.op[op], cond.op === op ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "recordstable-menu-input", placeholder: t.filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                             // biome-ignore lint/a11y/noAutofocus: focus the value field
                                             autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
-                    }), _jsx("span", { className: "recordstable-spacer" }), _jsxs("span", { className: "recordstable-count", children: [visibleRows.length, " record", visibleRows.length === 1 ? "" : "s"] }), showNew && (_jsxs("button", { type: "button", className: "recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), "New"] }))] }), _jsxs("div", { ref: scrollRef, className: "recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, "data-scrolled-y": scrolledY ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
+                    }), _jsx("span", { className: "recordstable-spacer" }), _jsx("span", { className: "recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && (_jsxs("button", { type: "button", className: "recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), _jsxs("div", { ref: scrollRef, className: "recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
                     const left = e.currentTarget.scrollLeft > 0;
-                    const top = e.currentTarget.scrollTop > 0;
                     setScrolledX((prev) => (prev === left ? prev : left));
-                    setScrolledY((prev) => (prev === top ? prev : top));
                 }, children: [_jsxs("table", { className: "recordstable-table", style: {
                             // fill the container; the trailing add-column absorbs the slack (a
                             // flexible filler). minWidth keeps real column widths and drives the
@@ -808,7 +899,7 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                             minWidth: CHECK_W +
                                 ADDCOL_W +
                                 cols.reduce((sum, c) => sum + colWidth(c), 0),
-                        }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: CHECK_W } }), cols.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key))), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "recordstable-th recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": "Select all", checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
+                        }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: CHECK_W } }), cols.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key))), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "recordstable-th recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": t.selectAll, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
                                             const Icon = col.icon;
                                             const sc = sorts.find((s) => s.key === col.key);
                                             return (_jsxs("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "data-drop": dragCol && dragCol !== col.key && i >= 1 ? "" : undefined, onDragOver: dragCol && i >= 1 ? (e) => e.preventDefault() : undefined, onDrop: dragCol && i >= 1
@@ -818,7 +909,7 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                                                     }
                                                     : undefined, children: [renamingCol === col.key ? (_jsx("input", { className: "recordstable-th-rename", 
                                                         // biome-ignore lint/a11y/noAutofocus: focus the rename field the moment it opens
-                                                        autoFocus: true, defaultValue: col.label, "aria-label": "Column label", onKeyDown: (e) => {
+                                                        autoFocus: true, defaultValue: col.label, "aria-label": t.columnLabel, onKeyDown: (e) => {
                                                             if (e.key === "Enter")
                                                                 renameColumn(col.key, e.currentTarget.value);
                                                             else if (e.key === "Escape")
@@ -830,18 +921,19 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                                                             }
                                                             : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "recordstable-th-label", children: col.label }), _jsx("span", { className: "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", { className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", style: menuPos ?? undefined, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), "Sort ascending"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), "Sort descending"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { size: 15, strokeWidth: 1.75 }), "Move left"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { size: 15, strokeWidth: 1.75 }), "Move right"] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => {
+                                                        createPortal(_jsxs("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "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: "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: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
                                                                         setOpenMenu(null);
-                                                                    }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), "Edit column label"] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), "Hide from view"] }))] }), rootRef.current), _jsx("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
+                                                                    }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), _jsx("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             const th = e.currentTarget
                                                                 .parentElement;
                                                             resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
                                                         }, onClick: (e) => e.stopPropagation() })] }, col.key));
-                                        }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": "Add column", children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
+                                        }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
                                         e.preventDefault();
+                                        ctxReturn.current = document.activeElement;
                                         setCtxMenu({ x: e.clientX, y: e.clientY, id: row.id });
                                     }, children: [_jsx("td", { className: "recordstable-td recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": `Select ${row.id}`, checked: selected.has(row.id), onClick: (e) => {
                                                         shiftHeld.current = e.shiftKey;
@@ -849,7 +941,7 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                                             const canEdit = canEditCol(col);
                                             const isPicker = isPickerCol(col);
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
-                                            return (_jsxs("td", { className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return (_jsxs("td", { className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: () => {
                                                     if (isPicker)
@@ -858,14 +950,14 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                                                     scrollRef.current?.focus({ preventScroll: true });
                                                 }, onDoubleClick: canEdit
                                                     ? () => setEditing({ id: row.id, key: col.key })
-                                                    : undefined, children: [isPicker ? (col.type === "status" ? (_jsx(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? (_jsx(ReferenceCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? (_jsx(TagsCell, { column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : (_jsx(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? (_jsx("input", { className: `recordstable-edit${col.type === "number" ? " recordstable-edit--num" : ""}`, 
+                                                    : undefined, children: [isPicker ? (col.type === "status" ? (_jsx(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? (_jsx(ReferenceCell, { labels: t, column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? (_jsx(TagsCell, { labels: t, column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : (_jsx(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? (_jsx("input", { className: `recordstable-edit${col.type === "number" ? " recordstable-edit--num" : ""}`, 
                                                         // biome-ignore lint/a11y/noAutofocus: focusing the just-opened editor is the expected behavior
                                                         autoFocus: true, defaultValue: cellText(col, row), onBlur: (e) => commitEdit(row.id, col.key, e.target.value), onKeyDown: (e) => {
                                                             if (e.key === "Enter")
                                                                 commitEdit(row.id, col.key, e.target.value);
                                                             if (e.key === "Escape")
                                                                 setEditing(null);
-                                                        } })) : (_jsx(CellView, { column: col, row: row, pinned: i === 0 && pinned.has(row.id), onOpenPage: i === 0 && onOpenRecordPage
+                                                        } })) : (_jsx(CellView, { labels: t, column: col, row: row, pinned: i === 0 && pinned.has(row.id), onOpenPage: i === 0 && onOpenRecordPage
                                                             ? () => onOpenRecordPage(row)
                                                             : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && (_jsx("button", { type: "button", className: "recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
                                                             e.stopPropagation();
@@ -885,16 +977,15 @@ export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rows
                                                                     bottom: window.innerHeight - r.top + 4,
                                                                     right: window.innerWidth - r.right,
                                                                 });
+                                                                menuReturn.current = e.currentTarget;
                                                                 setOpenMenu(`sum:${col.key}`);
-                                                            }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-sum-label", children: AGG_LABELS[a] }), _jsx("span", { className: "recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "recordstable-sum-label", children: "Calculate" })) }), sumOpen &&
+                                                            }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-sum-label", children: t.agg[a] }), _jsx("span", { className: "recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "recordstable-sum-label", children: t.calculate })) }), sumOpen &&
                                                             rootRef.current &&
-                                                            createPortal(_jsx("div", { className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", style: menuPos ?? undefined, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [AGG_LABELS[opt], a === opt ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), _jsx("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters
-                                ? "No records match that filter"
-                                : "No records yet", description: activeFilters
+                                                            createPortal(_jsx("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
+                                        }), _jsx("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), "Clear filter"] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "New record"] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), "New record"] }))] }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: "Selected", onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: "Add to list" }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: "Send email" }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: "Run workflow" }), _jsxs(Menu, { align: "end", "aria-label": "More actions", trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: "More" }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: "Export CSV" }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: "Delete" })] })] })), _jsx(CreateRecordDialog, { open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
-                createPortal(_jsxs("div", { className: "recordstable-menu recordstable-ctx", role: "menu", style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), "Copy"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), "Duplicate"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), "Add to list"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), "Delete"] })] }), rootRef.current ?? document.body)] }));
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: "Selected", onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                createPortal(_jsxs("div", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 export const defaultColumns = [
     { key: "company", label: "Company", type: "entity", icon: Building2 },