@flanksource/clicky-ui 0.3.35 → 0.3.37

package/dist/data/Clicky.cjs

@@ -10,6 +10,7 @@ const classify = require("../rpc/classify.cjs");
 const formMetadata = require("../rpc/formMetadata.cjs");
 const types = require("../rpc/types.cjs");
 const useOperations = require("../rpc/useOperations.cjs");
+const string = require("../lib/string.cjs");
 const utils = require("../lib/utils.cjs");
 const DataTable = require("./DataTable.cjs");
 const calloutTones = require("./callout-tones.cjs");
@@ -124,7 +125,14 @@ function Clicky(props) {
         ...props.onSortChange ? { onTableSortChange: props.onSortChange } : {},
         ...props.infinite ? { tableInfinite: props.infinite } : {},
         ...props.rowSelection ? { tableRowSelection: props.rowSelection } : {},
+        ...props.hiddenColumns ? { tableHiddenColumns: props.hiddenColumns } : {},
         ...props.loading !== void 0 ? { tableLoading: props.loading } : {},
+        ...props.renderRowDetail ? { tableRenderRowDetail: props.renderRowDetail } : {},
+        ...props.cellRenderers ? { tableCellRenderers: props.cellRenderers } : {},
+        ...props.renderRowCard ? { tableRenderRowCard: props.renderRowCard } : {},
+        ...props.detailStyle ? { tableDetailStyle: props.detailStyle } : {},
+        ...props.detailDialogSize ? { tableDetailDialogSize: props.detailDialogSize } : {},
+        ...props.detailDialogTitle ? { tableDetailDialogTitle: props.detailDialogTitle } : {},
         ...tableMenuActions.length > 0 ? { tableMenuActions } : {},
         children: props.url ? /* @__PURE__ */ jsxRuntime.jsx(ClickyRemoteRenderer, { ...props, url: props.url }) : /* @__PURE__ */ jsxRuntime.jsx(
           ClickyContent,
@@ -156,12 +164,19 @@ function ClickyRuntimeProvider({
   onTableSortChange,
   tableInfinite,
   tableRowSelection,
+  tableHiddenColumns,
   tableMenuActions,
   tableLoading,
+  tableRenderRowDetail,
+  tableCellRenderers,
+  tableRenderRowCard,
+  tableDetailStyle,
+  tableDetailDialogSize,
+  tableDetailDialogTitle,
   children
 }) {
   if (!commandRuntime) {
-    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tableCellFilters || onTableCellFilterChange || tablePagination || tableSort !== void 0 || onTableSortChange || tableInfinite || tableRowSelection || tableMenuActions || tableLoading;
+    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tableCellFilters || onTableCellFilterChange || tablePagination || tableSort !== void 0 || onTableSortChange || tableInfinite || tableRowSelection || tableHiddenColumns || tableMenuActions || tableLoading || tableRenderRowDetail || tableCellRenderers || tableRenderRowCard || tableDetailStyle || tableDetailDialogSize || tableDetailDialogTitle;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ClickyRuntimeContext.Provider,
       {
@@ -180,8 +195,15 @@ function ClickyRuntimeProvider({
           onTableSortChange,
           tableInfinite,
           tableRowSelection,
+          tableHiddenColumns,
           tableMenuActions,
-          tableLoading
+          tableLoading,
+          tableRenderRowDetail,
+          tableCellRenderers,
+          tableRenderRowCard,
+          tableDetailStyle,
+          tableDetailDialogSize,
+          tableDetailDialogTitle
         } : clickyRuntimeContextDefault,
         children
       }
@@ -204,8 +226,15 @@ function ClickyRuntimeProvider({
       ...onTableSortChange ? { onTableSortChange } : {},
       ...tableInfinite ? { tableInfinite } : {},
       ...tableRowSelection ? { tableRowSelection } : {},
+      ...tableHiddenColumns ? { tableHiddenColumns } : {},
       ...tableMenuActions ? { tableMenuActions } : {},
       ...tableLoading !== void 0 ? { tableLoading } : {},
+      ...tableRenderRowDetail ? { tableRenderRowDetail } : {},
+      ...tableCellRenderers ? { tableCellRenderers } : {},
+      ...tableRenderRowCard ? { tableRenderRowCard } : {},
+      ...tableDetailStyle ? { tableDetailStyle } : {},
+      ...tableDetailDialogSize ? { tableDetailDialogSize } : {},
+      ...tableDetailDialogTitle ? { tableDetailDialogTitle } : {},
       children
     }
   );
@@ -225,8 +254,15 @@ function ClickyCommandRuntimeProvider({
   onTableSortChange,
   tableInfinite,
   tableRowSelection,
+  tableHiddenColumns,
   tableMenuActions,
   tableLoading,
+  tableRenderRowDetail,
+  tableCellRenderers,
+  tableRenderRowCard,
+  tableDetailStyle,
+  tableDetailDialogSize,
+  tableDetailDialogTitle,
   children
 }) {
   const { operations, isLoading } = useOperations.useOperations(commandRuntime.client);
@@ -246,8 +282,15 @@ function ClickyCommandRuntimeProvider({
       onTableSortChange,
       tableInfinite,
       tableRowSelection,
+      tableHiddenColumns,
       tableMenuActions,
       tableLoading,
+      tableRenderRowDetail,
+      tableCellRenderers,
+      tableRenderRowCard,
+      tableDetailStyle,
+      tableDetailDialogSize,
+      tableDetailDialogTitle,
       operations,
       operationsLoading: isLoading
     }),
@@ -268,8 +311,15 @@ function ClickyCommandRuntimeProvider({
       onTableSortChange,
       tableInfinite,
       tableRowSelection,
+      tableHiddenColumns,
       tableMenuActions,
-      tableLoading
+      tableLoading,
+      tableRenderRowDetail,
+      tableCellRenderers,
+      tableRenderRowCard,
+      tableDetailStyle,
+      tableDetailDialogSize,
+      tableDetailDialogTitle
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ClickyRuntimeContext.Provider, { value, children });
@@ -1127,7 +1177,10 @@ function filenameStemFromUrl(url) {
   return segment ?? "";
 }
 function sanitizeFilenameStem(value) {
-  const cleaned = value.trim().replace(/\.[a-z0-9]+$/i, "").replace(/[^a-z0-9._-]+/gi, "-").replace(/-+/g, "-").replace(/^[._-]+|[._-]+$/g, "");
+  const cleaned = string.stripSurroundingChars(
+    value.trim().replace(/\.[a-z0-9]+$/i, "").replace(/[^a-z0-9._-]+/gi, "-").replace(/-+/g, "-"),
+    "._-"
+  );
   return cleaned || "clicky-output";
 }
 function downloadExtension(format) {
@@ -1311,8 +1364,23 @@ function triggerDownload(url) {
 function isAbsoluteUrl(url) {
   return /^[a-z][a-z\d+\-.]*:/i.test(url) || url.startsWith("//");
 }
-function ClickyNodeRenderer({ node }) {
-  if (!node) return null;
+const CLICKY_STYLE_TOKEN_MAP = {
+  "text-muted": "text-muted-foreground"
+};
+function normalizeClickyClassName(className) {
+  return className.split(/\s+/).map((token) => CLICKY_STYLE_TOKEN_MAP[token] ?? token).join(" ");
+}
+function normalizeClickyNodeStyle(node) {
+  var _a;
+  const className = (_a = node.style) == null ? void 0 : _a.className;
+  if (!className) return node;
+  const normalized = normalizeClickyClassName(className);
+  if (normalized === className) return node;
+  return { ...node, style: { ...node.style, className: normalized } };
+}
+function ClickyNodeRenderer({ node: rawNode }) {
+  if (!rawNode) return null;
+  const node = normalizeClickyNodeStyle(rawNode);
   switch (node.kind) {
     case "text":
       return /* @__PURE__ */ jsxRuntime.jsx(ClickyText, { node });
@@ -2062,8 +2130,15 @@ function ClickyTable({
   onSortChange,
   infinite,
   rowSelection,
+  hiddenColumns,
   menuActions,
-  loading
+  loading,
+  renderRowDetail,
+  cellRenderers,
+  renderRowCard,
+  detailStyle,
+  detailDialogSize,
+  detailDialogTitle
 }) {
   const runtime = react.useContext(ClickyRuntimeContext);
   const rowClick = onTableRowClick ?? runtime.onTableRowClick;
@@ -2079,15 +2154,27 @@ function ClickyTable({
   const effectiveSortChange = onSortChange ?? runtime.onTableSortChange;
   const effectiveInfinite = infinite ?? runtime.tableInfinite;
   const effectiveRowSelection = rowSelection ?? runtime.tableRowSelection;
+  const effectiveHiddenColumns = hiddenColumns ?? runtime.tableHiddenColumns;
   const effectiveMenuActions = menuActions ?? runtime.tableMenuActions;
   const effectiveLoading = loading ?? runtime.tableLoading;
-  if (columns.length === 0) {
+  const effectiveRenderRowDetail = renderRowDetail ?? runtime.tableRenderRowDetail;
+  const effectiveCellRenderers = cellRenderers ?? runtime.tableCellRenderers;
+  const effectiveRenderRowCard = renderRowCard ?? runtime.tableRenderRowCard;
+  const effectiveDetailStyle = detailStyle ?? runtime.tableDetailStyle;
+  const effectiveDetailDialogSize = detailDialogSize ?? runtime.tableDetailDialogSize;
+  const effectiveDetailDialogTitle = detailDialogTitle ?? runtime.tableDetailDialogTitle;
+  const hiddenColumnNames = new Set(effectiveHiddenColumns);
+  const visibleColumns = columns.filter(
+    (column) => !hiddenColumnNames.has(column.name)
+  );
+  if (visibleColumns.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "No data" });
   }
-  if (shouldRenderRowsAsCollapsedStructs(columns, rows)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ClickyCollapsedStructRows, { columns, rows });
+  if (shouldRenderRowsAsCollapsedStructs(visibleColumns, rows)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ClickyCollapsedStructRows, { columns: visibleColumns, rows });
   }
-  const tableColumns = columns.map((column) => {
+  const columnsByName = new Map(columns.map((column) => [column.name, column]));
+  const tableColumns = visibleColumns.map((column) => {
     const tagColumn = isClickyTagColumn(column);
     const keyValueColumn = isClickyKeyValueColumn(column);
     const jsonColumn = column.type === "json";
@@ -2105,8 +2192,20 @@ function ClickyTable({
       },
       serverFilterLabel: (value) => clickyNodeText(value),
       ...column.grow !== void 0 ? { grow: column.grow } : {},
-      ...column.shrink !== void 0 ? { shrink: column.shrink } : {}
+      ...column.shrink !== void 0 ? { shrink: column.shrink } : {},
+      ...column.minWidth !== void 0 ? { minWidth: column.minWidth } : {},
+      ...column.maxWidth !== void 0 ? { maxWidth: column.maxWidth } : {}
     };
+    const timestampColumn = column.kind === "timestamp" && !tagColumn && !keyValueColumn && !jsonColumn;
+    if (timestampColumn) {
+      return {
+        ...base,
+        kind: "timestamp",
+        accessor: (row) => clickyCellRawValue(row.cells[column.name], column),
+        serverFilterValue: (value) => typeof value === "string" || typeof value === "number" ? String(value) : void 0,
+        serverFilterLabel: (value, row) => typeof value === "string" || typeof value === "number" ? String(value) : clickyNodeText(row.cells[column.name])
+      };
+    }
     if (keyValueColumn) {
       return {
         ...base,
@@ -2139,14 +2238,25 @@ function ClickyTable({
     return {
       ...base,
       ...column.kind ? { kind: column.kind } : {},
-      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: value }),
+      // A "code" cell (a SQL/JSON/etc. statement) renders full-block —
+      // bordered, headered, wrapping — everywhere else ClickyNodeRenderer
+      // draws one, but a table row is one line tall: render it truncated and
+      // inline instead, with the full source on the row-detail path.
+      render: (value) => {
+        const node = value;
+        if (node.kind === "code") return /* @__PURE__ */ jsxRuntime.jsx(ClickyInlineCodeCell, { node });
+        return /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node });
+      },
       sortValue: (value) => clickyNodeSortValue(value),
       filterValue: (value) => clickyNodeText(value)
     };
+  }).map((tableColumn, index) => {
+    const render = effectiveCellRenderers == null ? void 0 : effectiveCellRenderers[visibleColumns[index].name];
+    return render ? { ...tableColumn, render: (value, row) => render(clickyCellRawValue(value, visibleColumns[index]), clickyRowRawValues(row, columnsByName)) } : tableColumn;
   });
-  const defaultSortColumn = effectivePagination || effectiveSortChange ? void 0 : columns.find((column) => column.sortable !== false) ?? columns[0];
+  const defaultSortColumn = effectivePagination || effectiveSortChange ? void 0 : visibleColumns.find((column) => column.sortable !== false) ?? visibleColumns[0];
   const controlledTableSort = effectiveSort ? (() => {
-    const column = columns.find(
+    const column = visibleColumns.find(
       (candidate) => candidate.sortKey === effectiveSort.key
     );
     if (!column) {
@@ -2162,7 +2272,7 @@ function ClickyTable({
       return;
     }
     const columnName = next.key.startsWith("cells.") ? next.key.slice("cells.".length) : next.key;
-    const column = columns.find(
+    const column = visibleColumns.find(
       (candidate) => candidate.name === columnName
     );
     if (!(column == null ? void 0 : column.sortKey)) {
@@ -2178,6 +2288,7 @@ function ClickyTable({
       className: "min-h-0 flex-1",
       data: rows,
       columns: tableColumns,
+      defaultHiddenColumns: visibleColumns.filter((column) => column.defaultHidden).map((column) => `cells.${column.name}`),
       ...autoFilter !== void 0 ? { autoFilter } : {},
       ...defaultSortColumn ? {
         defaultSort: {
@@ -2187,7 +2298,7 @@ function ClickyTable({
       } : {},
       ...controlledTableSort !== void 0 ? { sort: controlledTableSort } : {},
       ...onControlledTableSortChange ? { onSortChange: onControlledTableSortChange, manualSort: true } : {},
-      getRowId: (row, index) => (effectiveRowSelection == null ? void 0 : effectiveRowSelection.getRowId(row, index)) ?? `${index}-${columns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
+      getRowId: (row, index) => (effectiveRowSelection == null ? void 0 : effectiveRowSelection.getRowId(row, index)) ?? (effectiveRenderRowCard && typeof clickyRowRawValues(row, columnsByName).id === "string" ? String(clickyRowRawValues(row, columnsByName).id) : void 0) ?? `${index}-${visibleColumns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
       ...effectiveRowSelection ? { rowSelection: effectiveRowSelection } : {},
       ...rowClick ? { onRowClick: rowClick } : {},
       ...rowHref ? { getRowHref: rowHref } : {},
@@ -2202,7 +2313,16 @@ function ClickyTable({
       ...effectivePagination ? { pagination: effectivePagination } : {},
       ...effectiveInfinite ? { infinite: effectiveInfinite } : {},
       ...effectiveMenuActions ? { menuActions: effectiveMenuActions } : {},
-      ...effectiveLoading !== void 0 ? { loading: effectiveLoading } : {}
+      ...effectiveLoading !== void 0 ? { loading: effectiveLoading } : {},
+      ...effectiveRenderRowDetail ? {
+        renderExpandedRow: (row) => effectiveRenderRowDetail(clickyRowRawValues(row, columnsByName))
+      } : {},
+      ...effectiveRenderRowCard ? { renderCard: (row) => effectiveRenderRowCard(clickyRowRawValues(row, columnsByName)) } : {},
+      ...effectiveDetailStyle ? { detailStyle: effectiveDetailStyle } : {},
+      ...effectiveDetailDialogSize ? { detailDialogSize: effectiveDetailDialogSize } : {},
+      ...effectiveDetailDialogTitle ? {
+        detailDialogTitle: (row) => effectiveDetailDialogTitle(clickyRowRawValues(row, columnsByName))
+      } : {}
     }
   );
 }
@@ -2226,6 +2346,17 @@ function ClickyCollapsedStructRows({
     );
   }) });
 }
+function ClickyInlineCodeCell({ node }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CodeBlock.CodeBlock,
+    {
+      language: node.language,
+      source: node.source ?? node.plain ?? "",
+      highlightedHtml: node.highlightedHtml,
+      inline: true
+    }
+  );
+}
 function shouldRenderRowsAsCollapsedStructs(columns, rows) {
   if (rows.length === 0) return false;
   if (columns.some(
@@ -2731,6 +2862,44 @@ function isExecutionResponse(value) {
 function clickyNodeSortValue(node) {
   return (node == null ? void 0 : node.filterValue) ?? clickyNodeText(node);
 }
+const NON_TEXT_COLUMN_TYPES = /* @__PURE__ */ new Set([
+  "number",
+  "int",
+  "integer",
+  "float",
+  "decimal",
+  "currency",
+  "bytes",
+  "duration",
+  "boolean",
+  "bool",
+  "date",
+  "datetime",
+  "time",
+  "timestamp"
+]);
+function clickyCellRawValue(node, column) {
+  if (node == null) return void 0;
+  if (node.kind === "execution-tree") return node.executionRoots ?? [];
+  if (node.kind === "object-graph") return node.objects ?? [];
+  if (node.kind === "map" || node.kind === "list") {
+    return clickyNodeJSONValue(node);
+  }
+  if (node.filterValue !== void 0) return node.filterValue;
+  const text = clickyNodeText(node);
+  if (text === "" && (column == null ? void 0 : column.type) !== void 0 && NON_TEXT_COLUMN_TYPES.has(column.type)) {
+    return null;
+  }
+  return text;
+}
+function clickyRowRawValues(row, columnsByName) {
+  return Object.fromEntries(
+    Object.entries(row.cells).map(([name, node]) => [
+      name,
+      clickyCellRawValue(node, columnsByName.get(name))
+    ])
+  );
+}
 function clickyNodeText(node) {
   var _a, _b, _c, _d, _e, _f;
   if (!node) return "";
@@ -2751,7 +2920,7 @@ function clickyNodeText(node) {
   if (node.plain) return node.plain;
   if (node.text) return node.text;
   if (node.kind === "html")
-    return htmlUtils.sanitizeHtml(node.html ?? "").replace(/<[^>]+>/g, " ").trim();
+    return string.stripHtmlTags(htmlUtils.sanitizeHtml(node.html ?? "")).trim();
   if (node.kind === "code") return node.source ?? "";
   if ((node.kind === "link" || node.kind === "link-command") && ((_a = node.children) == null ? void 0 : _a.length)) {
     return [