@arbidocs/blocks 0.4.95 → 0.4.97

package/dist/databases/index.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var chunkD54JXTPG_cjs = require('../chunk-D54JXTPG.cjs');
 var chunkIXALYQT7_cjs = require('../chunk-IXALYQT7.cjs');
 require('../chunk-FX3K6LNZ.cjs');
 var chunkMHVNT4J3_cjs = require('../chunk-MHVNT4J3.cjs');
@@ -141,6 +142,10 @@ function compareCells(a, b, type, titlesA, titlesB) {
   const tb = shown ? formatCell(b, type, void 0, titlesB) : String(b);
   return ta.localeCompare(tb, void 0, { sensitivity: "base", numeric: true });
 }
+function rowTitle(row, columns, locale) {
+  const first = columns[0];
+  return first ? formatCell(row.values[first.id], first.type, locale, row.titles) : "";
+}
 var CHIP = "inline-flex h-[22px] min-w-0 max-w-[14rem] shrink-0 items-center gap-1 rounded-md border border-border bg-muted/50 px-1.5 text-xs text-foreground";
 function initials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
@@ -192,8 +197,17 @@ function LinkChip({
     }
   );
 }
-function ChipRow({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full min-w-0 items-center gap-1 overflow-hidden", children });
+function ChipRow({ children, wrap }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: ui.cn(
+        "flex min-w-0 items-center gap-1",
+        wrap ? "flex-wrap py-0.5" : "h-full overflow-hidden"
+      ),
+      children
+    }
+  );
 }
 function PersonCell({ value, titles }) {
   const [id] = cellIds(value);
@@ -203,11 +217,12 @@ function LinkChipsCell({
   value,
   titles,
   kind,
-  onOpenDocument
+  onOpenDocument,
+  wrap
 }) {
   const ids = cellIds(value);
   if (ids.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ChipRow, { children: ids.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ChipRow, { wrap, children: ids.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
     LinkChip,
     {
       label: titleOf(id, titles),
@@ -221,11 +236,12 @@ function LinkChipsCell({
 function LookupCell({
   value,
   titles,
-  locale
+  locale,
+  wrap
 }) {
   const values = cellList(value);
   if (values.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ChipRow, { children: values.map((v, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ChipRow, { wrap, children: values.map((v, i) => {
     const text = formatLookupValue(v, titles, locale);
     const key = `${i}-${text}`;
     if (typeof v === "string" && /^doc-/.test(v))
@@ -494,9 +510,11 @@ function SelectCellEditor(props) {
 var DEFAULT_DATABASE_COLUMN_LABELS = {
   addColumn: "Add a column",
   columnSettings: (name) => `${name} column settings`,
-  computed: "Computed from a relation (read-only)"
+  computed: "Computed from a relation (read-only)",
+  openRow: "Open row"
 };
 var ADD_COLUMN_COL_ID = "__add_column";
+var OPEN_ROW_COL_ID = "__open_row";
 var COLUMN_TYPE_ICONS = {
   text: lucideReact.Type,
   number: lucideReact.Hash,
@@ -554,7 +572,7 @@ function columnWidth(column) {
   const header = Math.round(column.name.length * 8) + 76 + (isComputedColumn(column) ? 16 : 0);
   return Math.min(320, Math.max(WIDTHS[column.type], header));
 }
-function canEdit(column, sources) {
+function canEditColumn(column, sources) {
   if (isComputedColumn(column)) return false;
   if (column.type === "person") return Boolean(sources?.members);
   if (column.type === "document") return Boolean(sources?.documents);
@@ -650,8 +668,43 @@ function rendererFor(column, locale, sources) {
   }
 }
 function createDatabaseColumns(columns, options = {}) {
-  const { readOnly, onEditColumn, onAddColumn, locale, sources } = options;
+  const { readOnly, onEditColumn, onAddColumn, onOpenRow, locale, sources } = options;
   const l = { ...DEFAULT_DATABASE_COLUMN_LABELS, ...options.labels };
+  const openRow = onOpenRow && columns.length > 0 ? [
+    {
+      colId: OPEN_ROW_COL_ID,
+      headerName: "",
+      width: 40,
+      minWidth: 40,
+      maxWidth: 40,
+      resizable: false,
+      sortable: false,
+      editable: false,
+      suppressMovable: true,
+      // Pinned: the button stays in view however far the table scrolls.
+      pinned: "left",
+      lockPinned: true,
+      lockPosition: "left",
+      cellClass: "flex items-center justify-center !px-0",
+      valueGetter: () => null,
+      cellRenderer: (p) => p.data ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": l.openRow,
+          title: l.openRow,
+          "data-testid": `database-open-row-${p.data.id}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (p.data) onOpenRow(p.data);
+          },
+          onDoubleClick: (e) => e.stopPropagation(),
+          className: "flex size-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-muted hover:text-foreground",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-3.5" })
+        }
+      ) : null
+    }
+  ] : [];
   const defs = columns.map((column) => ({
     colId: column.id,
     headerName: column.name,
@@ -659,7 +712,7 @@ function createDatabaseColumns(columns, options = {}) {
     minWidth: 90,
     resizable: true,
     sortable: true,
-    editable: !readOnly && canEdit(column, sources),
+    editable: !readOnly && canEditColumn(column, sources),
     // The grid's own type inference must not second-guess the database's column type.
     cellDataType: false,
     headerComponentParams: {
@@ -689,6 +742,7 @@ function createDatabaseColumns(columns, options = {}) {
     ...editorFor(column, sources),
     ...rendererFor(column, locale, sources)
   }));
+  defs.unshift(...openRow);
   if (!readOnly && onAddColumn) {
     defs.push({
       colId: ADD_COLUMN_COL_ID,
@@ -938,6 +992,313 @@ function RollupFields({
     ] })
   ] });
 }
+var DEFAULT_DATABASE_ROW_DETAIL_LABELS = {
+  untitled: "Untitled",
+  fields: "Fields",
+  documents: "Linked documents",
+  noDocuments: "No document is linked to this row.",
+  empty: "Empty",
+  deleteRow: "Delete row",
+  close: "Close",
+  computed: "Computed from a relation"
+};
+function DraftInput({
+  value,
+  type,
+  onCommit,
+  testId,
+  label
+}) {
+  const [draft, setDraft] = react.useState(value);
+  react.useEffect(() => setDraft(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Input,
+    {
+      type,
+      value: draft,
+      "aria-label": label,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: () => draft !== value && onCommit(draft),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Escape") {
+          setDraft(value);
+          requestAnimationFrame(() => e.target.blur());
+        }
+      },
+      className: "h-8",
+      "data-testid": testId
+    }
+  );
+}
+function PopoverField({
+  display,
+  emptyLabel,
+  testId,
+  label,
+  renderEditor,
+  onCommit
+}) {
+  const [open, setOpen] = react.useState(false);
+  const pending = react.useRef(null);
+  const cancelled = react.useRef(false);
+  const close = (keep) => {
+    setOpen(false);
+    const change = pending.current;
+    pending.current = null;
+    if (change && !cancelled.current) onCommit(change.value);
+    cancelled.current = false;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) {
+          pending.current = null;
+          cancelled.current = false;
+          setOpen(true);
+        } else close();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-haspopup": "dialog",
+            onKeyDown: (e) => {
+              if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                setOpen(true);
+              }
+            },
+            className: "flex min-h-8 w-full min-w-0 cursor-pointer items-center rounded-md border border-input bg-transparent px-2 py-1 text-left text-sm outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring",
+            "data-testid": testId,
+            children: display ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: emptyLabel })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.PopoverContent,
+          {
+            align: "start",
+            className: "w-auto border-0 bg-transparent p-0 shadow-none",
+            onEscapeKeyDown: () => {
+              cancelled.current = true;
+            },
+            children: renderEditor({
+              onValueChange: (value) => {
+                pending.current = { value };
+              },
+              stopEditing: () => close()
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function DatabaseRowDetail({
+  row,
+  columns,
+  onChange,
+  sources,
+  onDelete,
+  onClose,
+  readOnly = false,
+  locale,
+  labels,
+  className,
+  testId = "database-row-detail"
+}) {
+  const l = { ...DEFAULT_DATABASE_ROW_DETAIL_LABELS, ...labels };
+  const title = row ? rowTitle(row, columns, locale) || l.untitled : "";
+  const commit = (column, value) => {
+    if (!row || !onChange) return;
+    const next = toApiValue(value, column.type);
+    if (sameCellValue(next, row.values[column.id])) return;
+    onChange(row, column.id, next);
+  };
+  const fieldEditor = (column) => {
+    if (!row) return null;
+    const value = row.values[column.id];
+    const id = `${testId}-input-${column.id}`;
+    const editable = !readOnly && Boolean(onChange) && canEditColumn(column, sources);
+    const display = () => {
+      switch (column.type) {
+        case "select":
+          return typeof value === "string" && value ? /* @__PURE__ */ jsxRuntime.jsx(SelectChip, { value }) : null;
+        case "person":
+          return cellIds(value).length ? /* @__PURE__ */ jsxRuntime.jsx(PersonCell, { value, titles: row.titles }) : null;
+        case "document":
+        case "relation":
+          return cellIds(value).length ? /* @__PURE__ */ jsxRuntime.jsx(
+            LinkChipsCell,
+            {
+              value,
+              titles: row.titles,
+              kind: column.type,
+              onOpenDocument: sources?.onOpenDocument,
+              wrap: true
+            }
+          ) : null;
+        case "lookup":
+          return /* @__PURE__ */ jsxRuntime.jsx(LookupCell, { value, titles: row.titles, locale, wrap: true });
+        default: {
+          const text = formatCell(value, column.type, locale, row.titles);
+          return text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-words", children: text }) : null;
+        }
+      }
+    };
+    if (!editable) {
+      const shown = display();
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: ui.cn(
+            "flex min-h-8 min-w-0 items-center py-1 text-sm",
+            isComputedColumn(column) && "text-muted-foreground"
+          ),
+          title: isComputedColumn(column) ? l.computed : void 0,
+          "data-testid": id,
+          children: shown ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" })
+        }
+      );
+    }
+    switch (column.type) {
+      case "checkbox":
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Checkbox,
+          {
+            checked: value === true,
+            "aria-label": column.name,
+            onCheckedChange: (checked) => commit(column, checked === true),
+            "data-testid": id
+          }
+        ) });
+      case "number":
+      case "date":
+      case "text": {
+        const text = value == null ? "" : column.type === "date" ? String(value).slice(0, 10) : String(value);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DraftInput,
+          {
+            value: text,
+            type: column.type,
+            label: column.name,
+            onCommit: (next) => commit(column, next),
+            testId: id
+          }
+        );
+      }
+      case "select":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          PopoverField,
+          {
+            display: display(),
+            emptyLabel: l.empty,
+            label: column.name,
+            testId: id,
+            onCommit: (next) => commit(column, next),
+            renderEditor: (editor) => /* @__PURE__ */ jsxRuntime.jsx(SelectCellEditor, { ...editor, value, options: column.options ?? [] })
+          }
+        );
+      case "person":
+      case "document":
+      case "relation": {
+        const target = column.relation?.database_id;
+        const searchRows = sources?.searchRows;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          PopoverField,
+          {
+            display: display(),
+            emptyLabel: l.empty,
+            label: column.name,
+            testId: id,
+            onCommit: (next) => commit(column, next),
+            renderEditor: (editor) => /* @__PURE__ */ jsxRuntime.jsx(
+              PickCellEditor,
+              {
+                ...editor,
+                value,
+                data: row,
+                kind: column.type,
+                options: column.type === "person" ? sources?.members : column.type === "document" ? sources?.documents : void 0,
+                search: column.type === "relation" && target && searchRows ? (q) => searchRows(target, q) : void 0
+              }
+            )
+          }
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  const documents = /* @__PURE__ */ new Map();
+  if (row) {
+    for (const column of columns) {
+      if (column.type !== "document") continue;
+      for (const id of cellIds(row.values[column.id])) {
+        documents.set(id, [...documents.get(id) ?? [], column.name]);
+      }
+    }
+  }
+  const openDocument = sources?.onOpenDocument;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkD54JXTPG_cjs.DetailPanel,
+    {
+      title,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { className: "size-4" }),
+      isLoading: !row,
+      onClose,
+      labels: { close: l.close },
+      className,
+      testId,
+      actions: row && onDelete && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "size-8 text-red-text",
+          onClick: () => onDelete(row),
+          "aria-label": l.deleteRow,
+          title: l.deleteRow,
+          "data-testid": `${testId}-delete`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" })
+        }
+      ) : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailSection, { title: l.fields, testId: `${testId}-fields`, children: /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailFields, { children: columns.map((column) => {
+          const Icon = COLUMN_TYPE_ICONS[column.type];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            chunkD54JXTPG_cjs.DetailField,
+            {
+              label: column.name,
+              icon: Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5" }) : void 0,
+              testId: `${testId}-field-${column.id}`,
+              children: fieldEditor(column)
+            },
+            column.id
+          );
+        }) }) }),
+        columns.some((c) => c.type === "document") && /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailSection, { title: l.documents, count: documents.size, testId: `${testId}-documents`, children: documents.size ? /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailLinkList, { children: [...documents].map(([id, via]) => /* @__PURE__ */ jsxRuntime.jsx(
+          chunkD54JXTPG_cjs.DetailLinkItem,
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-4" }),
+            onClick: openDocument ? () => openDocument(id) : void 0,
+            testId: `${testId}-doc-${id}`,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-medium", children: titleOf(id, row?.titles) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-muted-foreground", children: via.join(", ") })
+            ] })
+          },
+          id
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx(chunkD54JXTPG_cjs.DetailEmpty, { children: l.noDocuments }) })
+      ]
+    }
+  );
+}
 var escapeHtml = (text) => text.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
 var DEFAULT_DATABASE_TABLE_LABELS = {
   newRow: "New row",
@@ -954,6 +1315,7 @@ function DatabaseTable({
   onAddRow,
   onAddColumn,
   onEditColumn,
+  onOpenRow,
   sources,
   onSelectionChange,
   selected,
@@ -974,11 +1336,12 @@ function DatabaseTable({
       readOnly,
       onEditColumn,
       onAddColumn,
+      onOpenRow,
       sources,
       locale,
       labels: columnLabels
     }),
-    [columns, readOnly, onEditColumn, onAddColumn, sources, locale, columnLabels]
+    [columns, readOnly, onEditColumn, onAddColumn, onOpenRow, sources, locale, columnLabels]
   );
   const noColumns = columns.length === 0;
   const emptyState = {
@@ -1094,6 +1457,7 @@ function DatabaseToolbar({
   onExport,
   onDeleteDatabase,
   readOnly = false,
+  views,
   labels
 }) {
   const l = { ...DEFAULT_DATABASE_TOOLBAR_LABELS, ...labels };
@@ -1184,6 +1548,7 @@ function DatabaseToolbar({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+      views,
       !readOnly && selectedCount > 0 && onDeleteSelected && /* @__PURE__ */ jsxRuntime.jsxs(
         ui.Button,
         {
@@ -1776,12 +2141,14 @@ exports.DEFAULT_DATABASE_COLUMN_DIALOG_LABELS = DEFAULT_DATABASE_COLUMN_DIALOG_L
 exports.DEFAULT_DATABASE_COLUMN_LABELS = DEFAULT_DATABASE_COLUMN_LABELS;
 exports.DEFAULT_DATABASE_COLUMN_TYPE_LABELS = DEFAULT_DATABASE_COLUMN_TYPE_LABELS;
 exports.DEFAULT_DATABASE_LIST_LABELS = DEFAULT_DATABASE_LIST_LABELS;
+exports.DEFAULT_DATABASE_ROW_DETAIL_LABELS = DEFAULT_DATABASE_ROW_DETAIL_LABELS;
 exports.DEFAULT_DATABASE_TABLE_LABELS = DEFAULT_DATABASE_TABLE_LABELS;
 exports.DEFAULT_DATABASE_TOOLBAR_LABELS = DEFAULT_DATABASE_TOOLBAR_LABELS;
 exports.DEFAULT_NEW_DATABASE_DIALOG_LABELS = DEFAULT_NEW_DATABASE_DIALOG_LABELS;
 exports.DEFAULT_PICK_CELL_EDITOR_LABELS = DEFAULT_PICK_CELL_EDITOR_LABELS;
 exports.DatabaseColumnDialog = DatabaseColumnDialog;
 exports.DatabaseList = DatabaseList;
+exports.DatabaseRowDetail = DatabaseRowDetail;
 exports.DatabaseTable = DatabaseTable;
 exports.DatabaseToolbar = DatabaseToolbar;
 exports.LINK_COLUMN_TYPES = LINK_COLUMN_TYPES;
@@ -1789,11 +2156,13 @@ exports.LinkChip = LinkChip;
 exports.LinkChipsCell = LinkChipsCell;
 exports.LookupCell = LookupCell;
 exports.NewDatabaseDialog = NewDatabaseDialog;
+exports.OPEN_ROW_COL_ID = OPEN_ROW_COL_ID;
 exports.PersonCell = PersonCell;
 exports.PersonChip = PersonChip;
 exports.PickCellEditor = PickCellEditor;
 exports.SelectCellEditor = SelectCellEditor;
 exports.SelectChip = SelectChip;
+exports.canEditColumn = canEditColumn;
 exports.cellIds = cellIds;
 exports.cellList = cellList;
 exports.columnWidth = columnWidth;
@@ -1805,6 +2174,7 @@ exports.formatLookupValue = formatLookupValue;
 exports.formatNumberValue = formatNumberValue;
 exports.isComputedColumn = isComputedColumn;
 exports.optionTone = optionTone;
+exports.rowTitle = rowTitle;
 exports.sameCellValue = sameCellValue;
 exports.titleOf = titleOf;
 exports.toApiValue = toApiValue;