@flanksource/clicky-ui 0.2.8 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Combobox.cjs +89 -49
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.d.ts +3 -0
- package/dist/components/Combobox.d.ts.map +1 -1
- package/dist/components/Combobox.js +91 -51
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/FilterBar.cjs +42 -44
- package/dist/components/FilterBar.cjs.map +1 -1
- package/dist/components/FilterBar.d.ts +19 -0
- package/dist/components/FilterBar.d.ts.map +1 -1
- package/dist/components/FilterBar.js +43 -45
- package/dist/components/FilterBar.js.map +1 -1
- package/dist/components/JsonSchemaForm.cjs +48 -0
- package/dist/components/JsonSchemaForm.cjs.map +1 -0
- package/dist/components/JsonSchemaForm.d.ts +3 -0
- package/dist/components/JsonSchemaForm.d.ts.map +1 -0
- package/dist/components/JsonSchemaForm.js +48 -0
- package/dist/components/JsonSchemaForm.js.map +1 -0
- package/dist/components/json-schema-form-array.cjs +169 -0
- package/dist/components/json-schema-form-array.cjs.map +1 -0
- package/dist/components/json-schema-form-array.d.ts +8 -0
- package/dist/components/json-schema-form-array.d.ts.map +1 -0
- package/dist/components/json-schema-form-array.js +169 -0
- package/dist/components/json-schema-form-array.js.map +1 -0
- package/dist/components/json-schema-form-fields.cjs +374 -0
- package/dist/components/json-schema-form-fields.cjs.map +1 -0
- package/dist/components/json-schema-form-fields.d.ts +19 -0
- package/dist/components/json-schema-form-fields.d.ts.map +1 -0
- package/dist/components/json-schema-form-fields.js +374 -0
- package/dist/components/json-schema-form-fields.js.map +1 -0
- package/dist/components/json-schema-form-render.cjs +154 -0
- package/dist/components/json-schema-form-render.cjs.map +1 -0
- package/dist/components/json-schema-form-render.d.ts +40 -0
- package/dist/components/json-schema-form-render.d.ts.map +1 -0
- package/dist/components/json-schema-form-render.js +154 -0
- package/dist/components/json-schema-form-render.js.map +1 -0
- package/dist/components/json-schema-form-resolve.cjs +121 -0
- package/dist/components/json-schema-form-resolve.cjs.map +1 -0
- package/dist/components/json-schema-form-resolve.d.ts +19 -0
- package/dist/components/json-schema-form-resolve.d.ts.map +1 -0
- package/dist/components/json-schema-form-resolve.js +121 -0
- package/dist/components/json-schema-form-resolve.js.map +1 -0
- package/dist/components/json-schema-form-types.d.ts +124 -0
- package/dist/components/json-schema-form-types.d.ts.map +1 -0
- package/dist/components.cjs +7 -0
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.ts +3 -0
- package/dist/components.d.ts.map +1 -1
- package/dist/components.js +8 -1
- package/dist/components.js.map +1 -1
- package/dist/data/Clicky.cjs +1 -1
- package/dist/data/Clicky.cjs.map +1 -1
- package/dist/data/Clicky.js +1 -1
- package/dist/data/Clicky.js.map +1 -1
- package/dist/data/DataTable.cjs +16 -15
- package/dist/data/DataTable.cjs.map +1 -1
- package/dist/data/DataTable.d.ts +2 -1
- package/dist/data/DataTable.d.ts.map +1 -1
- package/dist/data/DataTable.js +16 -15
- package/dist/data/DataTable.js.map +1 -1
- package/dist/data/Icon.cjs +11 -0
- package/dist/data/Icon.cjs.map +1 -1
- package/dist/data/Icon.d.ts +12 -1
- package/dist/data/Icon.d.ts.map +1 -1
- package/dist/data/Icon.js +12 -1
- package/dist/data/Icon.js.map +1 -1
- package/dist/data/LogDetails.cjs +277 -0
- package/dist/data/LogDetails.cjs.map +1 -0
- package/dist/data/LogDetails.d.ts +5 -0
- package/dist/data/LogDetails.d.ts.map +1 -0
- package/dist/data/LogDetails.js +277 -0
- package/dist/data/LogDetails.js.map +1 -0
- package/dist/data/LogsTable.cjs +6 -202
- package/dist/data/LogsTable.cjs.map +1 -1
- package/dist/data/LogsTable.d.ts.map +1 -1
- package/dist/data/LogsTable.js +4 -200
- package/dist/data/LogsTable.js.map +1 -1
- package/dist/data/Properties.cjs +2 -2
- package/dist/data/Properties.cjs.map +1 -1
- package/dist/data/Properties.js +2 -2
- package/dist/data/Properties.js.map +1 -1
- package/dist/data/cells/TagList.cjs +19 -3
- package/dist/data/cells/TagList.cjs.map +1 -1
- package/dist/data/cells/TagList.d.ts +11 -1
- package/dist/data/cells/TagList.d.ts.map +1 -1
- package/dist/data/cells/TagList.js +19 -3
- package/dist/data/cells/TagList.js.map +1 -1
- package/dist/data/cells/Timestamp.cjs +17 -2
- package/dist/data/cells/Timestamp.cjs.map +1 -1
- package/dist/data/cells/Timestamp.d.ts +2 -0
- package/dist/data/cells/Timestamp.d.ts.map +1 -1
- package/dist/data/cells/Timestamp.js +17 -2
- package/dist/data/cells/Timestamp.js.map +1 -1
- package/dist/data/log-utils.cjs +7 -0
- package/dist/data/log-utils.cjs.map +1 -0
- package/dist/data/log-utils.d.ts +2 -0
- package/dist/data/log-utils.d.ts.map +1 -0
- package/dist/data/log-utils.js +7 -0
- package/dist/data/log-utils.js.map +1 -0
- package/dist/data.cjs +3 -0
- package/dist/data.cjs.map +1 -1
- package/dist/data.d.ts +2 -2
- package/dist/data.d.ts.map +1 -1
- package/dist/data.js +5 -2
- package/dist/index.cjs +13 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +15 -2
- package/dist/index.js.map +1 -1
- package/dist/rpc/EntityExplorerApp.cjs +3 -2
- package/dist/rpc/EntityExplorerApp.cjs.map +1 -1
- package/dist/rpc/EntityExplorerApp.js +3 -2
- package/dist/rpc/EntityExplorerApp.js.map +1 -1
- package/dist/rpc/OperationActionDialog.cjs +1 -1
- package/dist/rpc/OperationActionDialog.cjs.map +1 -1
- package/dist/rpc/OperationActionDialog.js +1 -1
- package/dist/rpc/OperationActionDialog.js.map +1 -1
- package/dist/rpc/OperationCommandPage.cjs +21 -14
- package/dist/rpc/OperationCommandPage.cjs.map +1 -1
- package/dist/rpc/OperationCommandPage.d.ts.map +1 -1
- package/dist/rpc/OperationCommandPage.js +21 -14
- package/dist/rpc/OperationCommandPage.js.map +1 -1
- package/dist/rpc/apiClient.cjs +316 -0
- package/dist/rpc/apiClient.cjs.map +1 -0
- package/dist/rpc/apiClient.d.ts +44 -0
- package/dist/rpc/apiClient.d.ts.map +1 -0
- package/dist/rpc/apiClient.js +316 -0
- package/dist/rpc/apiClient.js.map +1 -0
- package/dist/rpc/useOperations.cjs.map +1 -1
- package/dist/rpc/useOperations.d.ts +2 -1
- package/dist/rpc/useOperations.d.ts.map +1 -1
- package/dist/rpc/useOperations.js.map +1 -1
- package/dist/rpc.cjs +3 -0
- package/dist/rpc.cjs.map +1 -1
- package/dist/rpc.d.ts +1 -0
- package/dist/rpc.d.ts.map +1 -1
- package/dist/rpc.js +3 -0
- package/dist/rpc.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/data/LogsTable.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { jsx
|
|
2
|
-
import { useMemo
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
4
|
import { AnsiHtml } from "./AnsiHtml.js";
|
|
5
5
|
import { DataTable } from "./DataTable.js";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { UiCopy } from "../icons/components/UiCopy.js";
|
|
9
|
-
import { UiZoomIn } from "../icons/components/UiZoomIn.js";
|
|
10
|
-
import { UiZoomOut } from "../icons/components/UiZoomOut.js";
|
|
6
|
+
import { renderLogDetails } from "./LogDetails.js";
|
|
7
|
+
import { asRecord } from "./log-utils.js";
|
|
11
8
|
const ANSI_PATTERN = new RegExp(`${String.fromCharCode(27)}\\[[0-9;?]*[ -/]*[@-~]`);
|
|
12
9
|
const DEFAULT_LOG_COLUMNS = [
|
|
13
10
|
{
|
|
@@ -214,196 +211,6 @@ function buildTags({
|
|
|
214
211
|
}
|
|
215
212
|
return tags;
|
|
216
213
|
}
|
|
217
|
-
function renderLogDetails(row) {
|
|
218
|
-
return /* @__PURE__ */ jsx(LogDetails, { row });
|
|
219
|
-
}
|
|
220
|
-
function LogDetails({ row }) {
|
|
221
|
-
const [openPaths, setOpenPaths] = useState({});
|
|
222
|
-
const setPathOpen = (path, open) => {
|
|
223
|
-
setOpenPaths((current) => ({ ...current, [path]: open }));
|
|
224
|
-
};
|
|
225
|
-
const details = useMemo(() => buildProcessedLogDetails(row), [row]);
|
|
226
|
-
const labelForPath = (path) => formatPropertyLabel(path.split(".").pop() ?? path);
|
|
227
|
-
const prefixActions = [
|
|
228
|
-
{
|
|
229
|
-
id: "expand",
|
|
230
|
-
icon: UiZoomIn,
|
|
231
|
-
label: (key) => `Expand ${labelForPath(key)}`,
|
|
232
|
-
visible: (_k, _v, item) => !!item.expandable,
|
|
233
|
-
disabled: (_k, _v, item) => !!item.expanded,
|
|
234
|
-
onClick: (_k, _v, item) => {
|
|
235
|
-
var _a;
|
|
236
|
-
return (_a = item.onToggle) == null ? void 0 : _a.call(item, true);
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
id: "collapse",
|
|
241
|
-
icon: UiZoomOut,
|
|
242
|
-
label: (key) => `Collapse ${labelForPath(key)}`,
|
|
243
|
-
visible: (_k, _v, item) => !!item.expandable,
|
|
244
|
-
disabled: (_k, _v, item) => !item.expanded,
|
|
245
|
-
onClick: (_k, _v, item) => {
|
|
246
|
-
var _a;
|
|
247
|
-
return (_a = item.onToggle) == null ? void 0 : _a.call(item, false);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
];
|
|
251
|
-
const suffixActions = [
|
|
252
|
-
{
|
|
253
|
-
id: "copy",
|
|
254
|
-
icon: UiCopy,
|
|
255
|
-
label: (key) => `Copy ${labelForPath(key)}`,
|
|
256
|
-
onClick: (_k, value) => copyLogDetailsValue(value)
|
|
257
|
-
}
|
|
258
|
-
];
|
|
259
|
-
const renderLabel = (key) => labelForPath(key);
|
|
260
|
-
const renderValue = (_key, value, item) => item.expandable ? /* @__PURE__ */ jsx(LogValueSummary, { value }) : /* @__PURE__ */ jsx(LogScalarValue, { value });
|
|
261
|
-
const toItems = (value, path, depth) => getValueEntries(value).map(([key, entryValue]) => {
|
|
262
|
-
const entryPath = `${path}.${String(key)}`;
|
|
263
|
-
const expandable = isExpandableValue(entryValue);
|
|
264
|
-
const open = openPaths[entryPath] ?? depth < 1;
|
|
265
|
-
return {
|
|
266
|
-
key: entryPath,
|
|
267
|
-
value: entryValue,
|
|
268
|
-
expandable,
|
|
269
|
-
expanded: open,
|
|
270
|
-
onToggle: (next) => setPathOpen(entryPath, next),
|
|
271
|
-
renderChildren: () => /* @__PURE__ */ jsx(
|
|
272
|
-
Properties,
|
|
273
|
-
{
|
|
274
|
-
density: "compact",
|
|
275
|
-
items: toItems(entryValue, entryPath, depth + 1),
|
|
276
|
-
renderLabel,
|
|
277
|
-
renderValue,
|
|
278
|
-
prefixActions,
|
|
279
|
-
suffixActions,
|
|
280
|
-
className: "mt-density-1"
|
|
281
|
-
}
|
|
282
|
-
)
|
|
283
|
-
};
|
|
284
|
-
});
|
|
285
|
-
return /* @__PURE__ */ jsx("div", { className: "space-y-density-3 text-xs", children: /* @__PURE__ */ jsx(
|
|
286
|
-
Properties,
|
|
287
|
-
{
|
|
288
|
-
density: "compact",
|
|
289
|
-
items: toItems(details, "details", 0),
|
|
290
|
-
renderLabel,
|
|
291
|
-
renderValue,
|
|
292
|
-
prefixActions,
|
|
293
|
-
suffixActions
|
|
294
|
-
}
|
|
295
|
-
) });
|
|
296
|
-
}
|
|
297
|
-
function LogValueSummary({ value }) {
|
|
298
|
-
if (Array.isArray(value)) {
|
|
299
|
-
return /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
|
|
300
|
-
"[",
|
|
301
|
-
value.length,
|
|
302
|
-
" items]"
|
|
303
|
-
] });
|
|
304
|
-
}
|
|
305
|
-
const record = asRecord(value);
|
|
306
|
-
if (record) {
|
|
307
|
-
const count = Object.keys(record).length;
|
|
308
|
-
return /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
|
|
309
|
-
"{ ",
|
|
310
|
-
count,
|
|
311
|
-
" properties",
|
|
312
|
-
" }"
|
|
313
|
-
] });
|
|
314
|
-
}
|
|
315
|
-
return /* @__PURE__ */ jsx(LogScalarValue, { value });
|
|
316
|
-
}
|
|
317
|
-
function LogScalarValue({ value }) {
|
|
318
|
-
if (value === null || value === void 0) {
|
|
319
|
-
return /* @__PURE__ */ jsx("span", { className: "font-mono italic text-muted-foreground", children: "null" });
|
|
320
|
-
}
|
|
321
|
-
if (typeof value === "string") {
|
|
322
|
-
return /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground", children: value });
|
|
323
|
-
}
|
|
324
|
-
if (typeof value === "number" || typeof value === "boolean") {
|
|
325
|
-
return /* @__PURE__ */ jsx("span", { className: "font-mono text-blue-700 dark:text-blue-400", children: String(value) });
|
|
326
|
-
}
|
|
327
|
-
return /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground", children: stablePrettyString(value) });
|
|
328
|
-
}
|
|
329
|
-
function getValueEntries(value) {
|
|
330
|
-
if (Array.isArray(value)) {
|
|
331
|
-
return value.map((entry, index) => [index, entry]);
|
|
332
|
-
}
|
|
333
|
-
return Object.entries(asRecord(value) ?? {});
|
|
334
|
-
}
|
|
335
|
-
function isExpandableValue(value) {
|
|
336
|
-
return getValueEntries(value).length > 0;
|
|
337
|
-
}
|
|
338
|
-
function stablePrettyString(value) {
|
|
339
|
-
if (typeof value === "string") return value;
|
|
340
|
-
try {
|
|
341
|
-
return JSON.stringify(value, null, 2);
|
|
342
|
-
} catch {
|
|
343
|
-
return String(value);
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
function copyLogDetailsValue(value) {
|
|
347
|
-
var _a;
|
|
348
|
-
if (typeof navigator !== "undefined" && ((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
|
|
349
|
-
Promise.resolve(navigator.clipboard.writeText(stablePrettyString(value))).catch(
|
|
350
|
-
() => void 0
|
|
351
|
-
);
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
function buildProcessedLogDetails(row) {
|
|
355
|
-
const attributes = buildProcessedLogAttributes(row);
|
|
356
|
-
return stripEmptyProperties({
|
|
357
|
-
timestamp: row.timestamp,
|
|
358
|
-
level: row.level,
|
|
359
|
-
pod: row.pod,
|
|
360
|
-
logger: row.logger,
|
|
361
|
-
thread: row.thread,
|
|
362
|
-
message: row.message,
|
|
363
|
-
tags: row.tags,
|
|
364
|
-
...Object.keys(attributes).length > 0 ? { attributes } : {}
|
|
365
|
-
});
|
|
366
|
-
}
|
|
367
|
-
function buildProcessedLogAttributes(row) {
|
|
368
|
-
const attributes = {
|
|
369
|
-
...asRecord(row.raw),
|
|
370
|
-
...asRecord(row.parsedLine)
|
|
371
|
-
};
|
|
372
|
-
const hiddenKeys = /* @__PURE__ */ new Set([
|
|
373
|
-
"@timestamp",
|
|
374
|
-
"container",
|
|
375
|
-
"event.dataset",
|
|
376
|
-
"labels",
|
|
377
|
-
"level",
|
|
378
|
-
"line",
|
|
379
|
-
"log.level",
|
|
380
|
-
"log.logger",
|
|
381
|
-
"logger",
|
|
382
|
-
"message",
|
|
383
|
-
"msg",
|
|
384
|
-
"pod",
|
|
385
|
-
"process.thread.name",
|
|
386
|
-
"service",
|
|
387
|
-
"service.name",
|
|
388
|
-
"severity",
|
|
389
|
-
"thread",
|
|
390
|
-
"time",
|
|
391
|
-
"timestamp"
|
|
392
|
-
]);
|
|
393
|
-
return stripEmptyProperties(
|
|
394
|
-
Object.fromEntries(Object.entries(attributes).filter(([key]) => !hiddenKeys.has(key)))
|
|
395
|
-
);
|
|
396
|
-
}
|
|
397
|
-
function stripEmptyProperties(record) {
|
|
398
|
-
return Object.fromEntries(
|
|
399
|
-
Object.entries(record).filter(([, value]) => {
|
|
400
|
-
if (value == null) return false;
|
|
401
|
-
if (typeof value === "string") return value.trim().length > 0;
|
|
402
|
-
if (Array.isArray(value)) return value.length > 0;
|
|
403
|
-
return true;
|
|
404
|
-
})
|
|
405
|
-
);
|
|
406
|
-
}
|
|
407
214
|
function tryParseJson(value) {
|
|
408
215
|
try {
|
|
409
216
|
return JSON.parse(value);
|
|
@@ -411,9 +218,6 @@ function tryParseJson(value) {
|
|
|
411
218
|
return JSON_PARSE_FAILED;
|
|
412
219
|
}
|
|
413
220
|
}
|
|
414
|
-
function asRecord(value) {
|
|
415
|
-
return value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
|
|
416
|
-
}
|
|
417
221
|
function pick(record, path) {
|
|
418
222
|
if (!record) return void 0;
|
|
419
223
|
if (Object.prototype.hasOwnProperty.call(record, path)) return record[path];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LogsTable.js","sources":["../../src/data/LogsTable.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { AnsiHtml } from \"./AnsiHtml\";\nimport { DataTable, type DataTableColumn, type DataTableProps } from \"./DataTable\";\nimport { Properties, type PropertiesAction, type PropertiesItem } from \"./Properties\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport { UiCopy, UiZoomIn, UiZoomOut } from \"../icons\";\n\nexport type LogsTableInput = string | Record<string, unknown>;\n\nexport type LogsTableRow = {\n id: string;\n timestamp: string;\n level: string;\n pod: string;\n logger: string;\n thread: string;\n message: string;\n tags: string[];\n line: string;\n parsedLine?: unknown;\n raw: unknown;\n};\n\nexport type LogsTableProps = Omit<DataTableProps<LogsTableRow>, \"data\" | \"columns\"> & {\n /** Raw newline-delimited log text or pre-parsed log records. */\n logs: string | LogsTableInput[];\n /** Optional custom columns; defaults to timestamp, level, pod, logger, thread, message, and tags. */\n columns?: DataTableColumn<LogsTableRow>[];\n /** Render parsed/raw log details when a row is expanded. */\n showRawDetails?: boolean;\n};\n\n// Matches CSI / SGR escape sequences (e.g. \"\\x1b[31m\"). Used to skip the\n// AnsiHtml render for plain messages so the cell stays a fast text node.\nconst ANSI_PATTERN = new RegExp(`${String.fromCharCode(27)}\\\\[[0-9;?]*[ -/]*[@-~]`);\n\nconst DEFAULT_LOG_COLUMNS: DataTableColumn<LogsTableRow>[] = [\n {\n key: \"timestamp\",\n label: \"Timestamp\",\n kind: \"timestamp\",\n shrink: true,\n minWidth: 180,\n },\n {\n key: \"level\",\n label: \"Level\",\n kind: \"status\",\n shrink: true,\n minWidth: 96,\n status: { showLabel: true },\n },\n { key: \"pod\", label: \"Pod\", shrink: true, minWidth: 180 },\n { key: \"logger\", label: \"Logger\", shrink: true, minWidth: 220 },\n { key: \"thread\", label: \"Thread\", shrink: true, minWidth: 180 },\n {\n key: \"message\",\n label: \"Message\",\n grow: true,\n minWidth: 360,\n cellClassName: \"font-mono text-xs\",\n render: (value) => {\n const text = typeof value === \"string\" ? value : value == null ? \"\" : String(value);\n if (!ANSI_PATTERN.test(text)) return text;\n return <AnsiHtml as=\"span\" text={text} className=\"whitespace-pre-wrap break-words\" />;\n },\n },\n {\n key: \"tags\",\n label: \"Tags\",\n kind: \"tags\",\n grow: true,\n tags: { maxVisible: 4 },\n },\n];\n\nconst DEFAULT_SORT = {\n key: \"timestamp\",\n dir: \"desc\",\n} satisfies NonNullable<DataTableProps<LogsTableRow>[\"defaultSort\"]>;\nconst JSON_PARSE_FAILED = Symbol(\"json-parse-failed\");\n\nexport function LogsTable({\n logs,\n columns,\n showRawDetails = true,\n className,\n autoFilter = true,\n defaultSort,\n getRowId,\n renderExpandedRow,\n showDensityControl = true,\n showThemeControl = true,\n showFullscreenControl = true,\n fullscreenTitle = \"Logs\",\n fullscreenButtonLabel = \"Open logs full screen\",\n defaultDensity = \"compact\",\n ...tableProps\n}: LogsTableProps) {\n const rows = useMemo(() => normalizeLogsTableRows(logs), [logs]);\n const resolvedRenderExpandedRow =\n renderExpandedRow ?? (showRawDetails ? renderLogDetails : undefined);\n return (\n <DataTable\n {...tableProps}\n data={rows}\n columns={columns ?? DEFAULT_LOG_COLUMNS}\n className={cn(\"rounded-md bg-background p-2\", className)}\n autoFilter={autoFilter}\n defaultDensity={defaultDensity}\n defaultSort={defaultSort ?? DEFAULT_SORT}\n getRowId={getRowId ?? ((row) => row.id)}\n showDensityControl={showDensityControl}\n showThemeControl={showThemeControl}\n showFullscreenControl={showFullscreenControl}\n fullscreenTitle={fullscreenTitle}\n fullscreenButtonLabel={fullscreenButtonLabel}\n {...(resolvedRenderExpandedRow ? { renderExpandedRow: resolvedRenderExpandedRow } : {})}\n />\n );\n}\n\nexport function normalizeLogsTableRows(logs: string | LogsTableInput[]): LogsTableRow[] {\n const entries = typeof logs === \"string\" ? splitLogLines(logs) : logs;\n return entries.map((entry, index) => normalizeLogEntry(entry, index));\n}\n\nfunction splitLogLines(logs: string): string[] {\n return logs.split(/\\r?\\n/).filter((line) => line.length > 0);\n}\n\nfunction normalizeLogEntry(entry: LogsTableInput, index: number): LogsTableRow {\n const parsedOuterValue = typeof entry === \"string\" ? tryParseJson(entry) : entry;\n const parsedOuter = parsedOuterValue === JSON_PARSE_FAILED ? entry : parsedOuterValue;\n const outer = asRecord(parsedOuter);\n const outerLine = stringValue(outer?.line);\n const parsedLineValue = outerLine ? tryParseJson(outerLine) : JSON_PARSE_FAILED;\n const parsedLine = parsedLineValue === JSON_PARSE_FAILED ? undefined : parsedLineValue;\n const inner = asRecord(parsedLine) ?? (outerLine ? undefined : outer);\n const labels = asRecord(outer?.labels);\n\n const timestamp = firstString(\n pick(outer, \"timestamp\"),\n pick(inner, \"@timestamp\"),\n pick(outer, \"ts\"),\n pick(inner, \"timestamp\"),\n pick(outer, \"time\"),\n pick(inner, \"time\"),\n );\n const level = firstString(\n pick(inner, \"log.level\"),\n pick(inner, \"level\"),\n pick(outer, \"level\"),\n pick(outer, \"severity\"),\n pick(inner, \"severity\"),\n );\n const pod = firstString(\n pick(outer, \"pod\"),\n pick(labels, \"pod\"),\n pick(inner, \"kubernetes.pod.name\"),\n );\n const namespace = firstString(\n pick(outer, \"namespace\"),\n pick(labels, \"namespace\"),\n pick(inner, \"kubernetes.namespace\"),\n );\n const container = firstString(\n pick(outer, \"container\"),\n pick(labels, \"container\"),\n pick(inner, \"container.name\"),\n );\n const service = firstString(\n pick(inner, \"service.name\"),\n pick(inner, \"service\"),\n pick(outer, \"service\"),\n pick(labels, \"service\"),\n );\n const dataset = firstString(pick(inner, \"event.dataset\"), pick(inner, \"dataset\"));\n const logger = firstString(\n pick(inner, \"log.logger\"),\n pick(inner, \"logger\"),\n pick(outer, \"logger\"),\n );\n const thread = firstString(\n pick(inner, \"process.thread.name\"),\n pick(inner, \"thread\"),\n pick(outer, \"thread\"),\n );\n const message = firstString(\n pick(inner, \"message\"),\n pick(inner, \"msg\"),\n pick(outer, \"message\"),\n outerLine,\n typeof entry === \"string\" ? entry : undefined,\n );\n\n const tags = buildTags({\n namespace,\n container,\n service,\n dataset,\n ecsVersion: firstString(pick(inner, \"ecs.version\")),\n labels,\n });\n\n return {\n id: `${index}:${timestamp || pod || message || stableString(entry)}`,\n timestamp,\n level,\n pod,\n logger,\n thread,\n message,\n tags,\n line: outerLine ?? (typeof entry === \"string\" ? entry : stableString(entry)),\n raw: parsedOuter,\n ...(parsedLine !== undefined ? { parsedLine } : {}),\n };\n}\n\nfunction buildTags({\n namespace,\n container,\n service,\n dataset,\n ecsVersion,\n labels,\n}: {\n namespace: string;\n container: string;\n service: string;\n dataset: string;\n ecsVersion: string;\n labels: Record<string, unknown> | undefined;\n}) {\n const tags: string[] = [];\n const seen = new Set<string>();\n const addTag = (key: string, value: unknown) => {\n const valueString = stringValue(value);\n if (!valueString) return;\n const tag = `${key}=${valueString}`;\n if (seen.has(tag)) return;\n seen.add(tag);\n tags.push(tag);\n };\n\n addTag(\"namespace\", namespace);\n addTag(\"container\", container);\n addTag(\"service\", service);\n addTag(\"dataset\", dataset);\n addTag(\"ecs.version\", ecsVersion);\n\n if (labels) {\n for (const [key, value] of Object.entries(labels)) {\n addTag(key, value);\n }\n }\n\n return tags;\n}\n\nfunction renderLogDetails(row: LogsTableRow): ReactNode {\n return <LogDetails row={row} />;\n}\n\nfunction LogDetails({ row }: { row: LogsTableRow }) {\n const [openPaths, setOpenPaths] = useState<Record<string, boolean>>({});\n const setPathOpen = (path: string, open: boolean) => {\n setOpenPaths((current) => ({ ...current, [path]: open }));\n };\n const details = useMemo(() => buildProcessedLogDetails(row), [row]);\n\n const labelForPath = (path: string) => formatPropertyLabel(path.split(\".\").pop() ?? path);\n\n const prefixActions: PropertiesAction<unknown>[] = [\n {\n id: \"expand\",\n icon: UiZoomIn,\n label: (key) => `Expand ${labelForPath(key)}`,\n visible: (_k, _v, item) => !!item.expandable,\n disabled: (_k, _v, item) => !!item.expanded,\n onClick: (_k, _v, item) => item.onToggle?.(true),\n },\n {\n id: \"collapse\",\n icon: UiZoomOut,\n label: (key) => `Collapse ${labelForPath(key)}`,\n visible: (_k, _v, item) => !!item.expandable,\n disabled: (_k, _v, item) => !item.expanded,\n onClick: (_k, _v, item) => item.onToggle?.(false),\n },\n ];\n\n const suffixActions: PropertiesAction<unknown>[] = [\n {\n id: \"copy\",\n icon: UiCopy,\n label: (key) => `Copy ${labelForPath(key)}`,\n onClick: (_k, value) => copyLogDetailsValue(value),\n },\n ];\n\n const renderLabel = (key: string) => labelForPath(key);\n const renderValue = (_key: string, value: unknown, item: PropertiesItem<unknown>) =>\n item.expandable ? <LogValueSummary value={value} /> : <LogScalarValue value={value} />;\n\n const toItems = (value: unknown, path: string, depth: number): PropertiesItem<unknown>[] =>\n getValueEntries(value).map(([key, entryValue]) => {\n const entryPath = `${path}.${String(key)}`;\n const expandable = isExpandableValue(entryValue);\n const open = openPaths[entryPath] ?? depth < 1;\n return {\n key: entryPath,\n value: entryValue,\n expandable,\n expanded: open,\n onToggle: (next) => setPathOpen(entryPath, next),\n renderChildren: () => (\n <Properties\n density=\"compact\"\n items={toItems(entryValue, entryPath, depth + 1)}\n renderLabel={renderLabel}\n renderValue={renderValue}\n prefixActions={prefixActions}\n suffixActions={suffixActions}\n className=\"mt-density-1\"\n />\n ),\n };\n });\n\n return (\n <div className=\"space-y-density-3 text-xs\">\n <Properties\n density=\"compact\"\n items={toItems(details, \"details\", 0)}\n renderLabel={renderLabel}\n renderValue={renderValue}\n prefixActions={prefixActions}\n suffixActions={suffixActions}\n />\n </div>\n );\n}\n\nfunction LogValueSummary({ value }: { value: unknown }) {\n if (Array.isArray(value)) {\n return <span className=\"font-mono text-muted-foreground\">[{value.length} items]</span>;\n }\n const record = asRecord(value);\n if (record) {\n const count = Object.keys(record).length;\n return (\n <span className=\"font-mono text-muted-foreground\">\n {\"{ \"}\n {count} properties{\" }\"}\n </span>\n );\n }\n return <LogScalarValue value={value} />;\n}\n\nfunction LogScalarValue({ value }: { value: unknown }) {\n if (value === null || value === undefined) {\n return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n }\n\n if (typeof value === \"string\") {\n return (\n <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground\">\n {value}\n </pre>\n );\n }\n\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return <span className=\"font-mono text-blue-700 dark:text-blue-400\">{String(value)}</span>;\n }\n\n return (\n <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground\">\n {stablePrettyString(value)}\n </pre>\n );\n}\n\nfunction getValueEntries(value: unknown): Array<[string | number, unknown]> {\n if (Array.isArray(value)) {\n return value.map((entry, index) => [index, entry]);\n }\n return Object.entries(asRecord(value) ?? {});\n}\n\nfunction isExpandableValue(value: unknown) {\n return getValueEntries(value).length > 0;\n}\n\nfunction stablePrettyString(value: unknown): string {\n if (typeof value === \"string\") return value;\n try {\n return JSON.stringify(value, null, 2);\n } catch {\n return String(value);\n }\n}\n\nfunction copyLogDetailsValue(value: unknown) {\n if (typeof navigator !== \"undefined\" && navigator.clipboard?.writeText) {\n Promise.resolve(navigator.clipboard.writeText(stablePrettyString(value))).catch(\n () => undefined,\n );\n }\n}\n\nfunction buildProcessedLogDetails(row: LogsTableRow): Record<string, unknown> {\n const attributes = buildProcessedLogAttributes(row);\n return stripEmptyProperties({\n timestamp: row.timestamp,\n level: row.level,\n pod: row.pod,\n logger: row.logger,\n thread: row.thread,\n message: row.message,\n tags: row.tags,\n ...(Object.keys(attributes).length > 0 ? { attributes } : {}),\n });\n}\n\nfunction buildProcessedLogAttributes(row: LogsTableRow): Record<string, unknown> {\n const attributes = {\n ...asRecord(row.raw),\n ...asRecord(row.parsedLine),\n };\n const hiddenKeys = new Set([\n \"@timestamp\",\n \"container\",\n \"event.dataset\",\n \"labels\",\n \"level\",\n \"line\",\n \"log.level\",\n \"log.logger\",\n \"logger\",\n \"message\",\n \"msg\",\n \"pod\",\n \"process.thread.name\",\n \"service\",\n \"service.name\",\n \"severity\",\n \"thread\",\n \"time\",\n \"timestamp\",\n ]);\n\n return stripEmptyProperties(\n Object.fromEntries(Object.entries(attributes).filter(([key]) => !hiddenKeys.has(key))),\n );\n}\n\nfunction stripEmptyProperties(record: Record<string, unknown>): Record<string, unknown> {\n return Object.fromEntries(\n Object.entries(record).filter(([, value]) => {\n if (value == null) return false;\n if (typeof value === \"string\") return value.trim().length > 0;\n if (Array.isArray(value)) return value.length > 0;\n return true;\n }),\n );\n}\n\nfunction tryParseJson(value: string): unknown | typeof JSON_PARSE_FAILED {\n try {\n return JSON.parse(value) as unknown;\n } catch {\n return JSON_PARSE_FAILED;\n }\n}\n\nfunction asRecord(value: unknown): Record<string, unknown> | undefined {\n return value && typeof value === \"object\" && !Array.isArray(value)\n ? (value as Record<string, unknown>)\n : undefined;\n}\n\nfunction pick(record: Record<string, unknown> | undefined, path: string): unknown {\n if (!record) return undefined;\n if (Object.prototype.hasOwnProperty.call(record, path)) return record[path];\n return path.split(\".\").reduce<unknown>((current, key) => {\n if (current && typeof current === \"object\") {\n return (current as Record<string, unknown>)[key];\n }\n return undefined;\n }, record);\n}\n\nfunction firstString(...values: unknown[]): string {\n for (const value of values) {\n const string = stringValue(value);\n if (string) return string;\n }\n return \"\";\n}\n\nfunction stringValue(value: unknown): string {\n if (value == null) return \"\";\n if (typeof value === \"string\") return value.trim();\n if (typeof value === \"number\" || typeof value === \"boolean\") return String(value);\n return \"\";\n}\n\nfunction stableString(value: unknown): string {\n if (typeof value === \"string\") return value;\n try {\n return JSON.stringify(value);\n } catch {\n return String(value);\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LogsTable.js","sources":["../../src/data/LogsTable.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { AnsiHtml } from \"./AnsiHtml\";\nimport { DataTable, type DataTableColumn, type DataTableProps } from \"./DataTable\";\nimport { renderLogDetails } from \"./LogDetails\";\nimport { asRecord } from \"./log-utils\";\n\nexport type LogsTableInput = string | Record<string, unknown>;\n\nexport type LogsTableRow = {\n id: string;\n timestamp: string;\n level: string;\n pod: string;\n logger: string;\n thread: string;\n message: string;\n tags: string[];\n line: string;\n parsedLine?: unknown;\n raw: unknown;\n};\n\nexport type LogsTableProps = Omit<DataTableProps<LogsTableRow>, \"data\" | \"columns\"> & {\n /** Raw newline-delimited log text or pre-parsed log records. */\n logs: string | LogsTableInput[];\n /** Optional custom columns; defaults to timestamp, level, pod, logger, thread, message, and tags. */\n columns?: DataTableColumn<LogsTableRow>[];\n /** Render parsed/raw log details when a row is expanded. */\n showRawDetails?: boolean;\n};\n\n// Matches CSI / SGR escape sequences (e.g. \"\\x1b[31m\"). Used to skip the\n// AnsiHtml render for plain messages so the cell stays a fast text node.\nconst ANSI_PATTERN = new RegExp(`${String.fromCharCode(27)}\\\\[[0-9;?]*[ -/]*[@-~]`);\n\nconst DEFAULT_LOG_COLUMNS: DataTableColumn<LogsTableRow>[] = [\n {\n key: \"timestamp\",\n label: \"Timestamp\",\n kind: \"timestamp\",\n shrink: true,\n minWidth: 180,\n },\n {\n key: \"level\",\n label: \"Level\",\n kind: \"status\",\n shrink: true,\n minWidth: 96,\n status: { showLabel: true },\n },\n { key: \"pod\", label: \"Pod\", shrink: true, minWidth: 180 },\n { key: \"logger\", label: \"Logger\", shrink: true, minWidth: 220 },\n { key: \"thread\", label: \"Thread\", shrink: true, minWidth: 180 },\n {\n key: \"message\",\n label: \"Message\",\n grow: true,\n minWidth: 360,\n cellClassName: \"font-mono text-xs\",\n render: (value) => {\n const text = typeof value === \"string\" ? value : value == null ? \"\" : String(value);\n if (!ANSI_PATTERN.test(text)) return text;\n return <AnsiHtml as=\"span\" text={text} className=\"whitespace-pre-wrap break-words\" />;\n },\n },\n {\n key: \"tags\",\n label: \"Tags\",\n kind: \"tags\",\n grow: true,\n tags: { maxVisible: 4 },\n },\n];\n\nconst DEFAULT_SORT = {\n key: \"timestamp\",\n dir: \"desc\",\n} satisfies NonNullable<DataTableProps<LogsTableRow>[\"defaultSort\"]>;\nconst JSON_PARSE_FAILED = Symbol(\"json-parse-failed\");\n\nexport function LogsTable({\n logs,\n columns,\n showRawDetails = true,\n className,\n autoFilter = true,\n defaultSort,\n getRowId,\n renderExpandedRow,\n showDensityControl = true,\n showThemeControl = true,\n showFullscreenControl = true,\n fullscreenTitle = \"Logs\",\n fullscreenButtonLabel = \"Open logs full screen\",\n defaultDensity = \"compact\",\n ...tableProps\n}: LogsTableProps) {\n const rows = useMemo(() => normalizeLogsTableRows(logs), [logs]);\n const resolvedRenderExpandedRow =\n renderExpandedRow ?? (showRawDetails ? renderLogDetails : undefined);\n return (\n <DataTable\n {...tableProps}\n data={rows}\n columns={columns ?? DEFAULT_LOG_COLUMNS}\n className={cn(\"rounded-md bg-background p-2\", className)}\n autoFilter={autoFilter}\n defaultDensity={defaultDensity}\n defaultSort={defaultSort ?? DEFAULT_SORT}\n getRowId={getRowId ?? ((row) => row.id)}\n showDensityControl={showDensityControl}\n showThemeControl={showThemeControl}\n showFullscreenControl={showFullscreenControl}\n fullscreenTitle={fullscreenTitle}\n fullscreenButtonLabel={fullscreenButtonLabel}\n {...(resolvedRenderExpandedRow ? { renderExpandedRow: resolvedRenderExpandedRow } : {})}\n />\n );\n}\n\nexport function normalizeLogsTableRows(logs: string | LogsTableInput[]): LogsTableRow[] {\n const entries = typeof logs === \"string\" ? splitLogLines(logs) : logs;\n return entries.map((entry, index) => normalizeLogEntry(entry, index));\n}\n\nfunction splitLogLines(logs: string): string[] {\n return logs.split(/\\r?\\n/).filter((line) => line.length > 0);\n}\n\nfunction normalizeLogEntry(entry: LogsTableInput, index: number): LogsTableRow {\n const parsedOuterValue = typeof entry === \"string\" ? tryParseJson(entry) : entry;\n const parsedOuter = parsedOuterValue === JSON_PARSE_FAILED ? entry : parsedOuterValue;\n const outer = asRecord(parsedOuter);\n const outerLine = stringValue(outer?.line);\n const parsedLineValue = outerLine ? tryParseJson(outerLine) : JSON_PARSE_FAILED;\n const parsedLine = parsedLineValue === JSON_PARSE_FAILED ? undefined : parsedLineValue;\n const inner = asRecord(parsedLine) ?? (outerLine ? undefined : outer);\n const labels = asRecord(outer?.labels);\n\n const timestamp = firstString(\n pick(outer, \"timestamp\"),\n pick(inner, \"@timestamp\"),\n pick(outer, \"ts\"),\n pick(inner, \"timestamp\"),\n pick(outer, \"time\"),\n pick(inner, \"time\"),\n );\n const level = firstString(\n pick(inner, \"log.level\"),\n pick(inner, \"level\"),\n pick(outer, \"level\"),\n pick(outer, \"severity\"),\n pick(inner, \"severity\"),\n );\n const pod = firstString(\n pick(outer, \"pod\"),\n pick(labels, \"pod\"),\n pick(inner, \"kubernetes.pod.name\"),\n );\n const namespace = firstString(\n pick(outer, \"namespace\"),\n pick(labels, \"namespace\"),\n pick(inner, \"kubernetes.namespace\"),\n );\n const container = firstString(\n pick(outer, \"container\"),\n pick(labels, \"container\"),\n pick(inner, \"container.name\"),\n );\n const service = firstString(\n pick(inner, \"service.name\"),\n pick(inner, \"service\"),\n pick(outer, \"service\"),\n pick(labels, \"service\"),\n );\n const dataset = firstString(pick(inner, \"event.dataset\"), pick(inner, \"dataset\"));\n const logger = firstString(\n pick(inner, \"log.logger\"),\n pick(inner, \"logger\"),\n pick(outer, \"logger\"),\n );\n const thread = firstString(\n pick(inner, \"process.thread.name\"),\n pick(inner, \"thread\"),\n pick(outer, \"thread\"),\n );\n const message = firstString(\n pick(inner, \"message\"),\n pick(inner, \"msg\"),\n pick(outer, \"message\"),\n outerLine,\n typeof entry === \"string\" ? entry : undefined,\n );\n\n const tags = buildTags({\n namespace,\n container,\n service,\n dataset,\n ecsVersion: firstString(pick(inner, \"ecs.version\")),\n labels,\n });\n\n return {\n id: `${index}:${timestamp || pod || message || stableString(entry)}`,\n timestamp,\n level,\n pod,\n logger,\n thread,\n message,\n tags,\n line: outerLine ?? (typeof entry === \"string\" ? entry : stableString(entry)),\n raw: parsedOuter,\n ...(parsedLine !== undefined ? { parsedLine } : {}),\n };\n}\n\nfunction buildTags({\n namespace,\n container,\n service,\n dataset,\n ecsVersion,\n labels,\n}: {\n namespace: string;\n container: string;\n service: string;\n dataset: string;\n ecsVersion: string;\n labels: Record<string, unknown> | undefined;\n}) {\n const tags: string[] = [];\n const seen = new Set<string>();\n const addTag = (key: string, value: unknown) => {\n const valueString = stringValue(value);\n if (!valueString) return;\n const tag = `${key}=${valueString}`;\n if (seen.has(tag)) return;\n seen.add(tag);\n tags.push(tag);\n };\n\n addTag(\"namespace\", namespace);\n addTag(\"container\", container);\n addTag(\"service\", service);\n addTag(\"dataset\", dataset);\n addTag(\"ecs.version\", ecsVersion);\n\n if (labels) {\n for (const [key, value] of Object.entries(labels)) {\n addTag(key, value);\n }\n }\n\n return tags;\n}\n\nfunction tryParseJson(value: string): unknown | typeof JSON_PARSE_FAILED {\n try {\n return JSON.parse(value) as unknown;\n } catch {\n return JSON_PARSE_FAILED;\n }\n}\n\nfunction pick(record: Record<string, unknown> | undefined, path: string): unknown {\n if (!record) return undefined;\n if (Object.prototype.hasOwnProperty.call(record, path)) return record[path];\n return path.split(\".\").reduce<unknown>((current, key) => {\n if (current && typeof current === \"object\") {\n return (current as Record<string, unknown>)[key];\n }\n return undefined;\n }, record);\n}\n\nfunction firstString(...values: unknown[]): string {\n for (const value of values) {\n const string = stringValue(value);\n if (string) return string;\n }\n return \"\";\n}\n\nfunction stringValue(value: unknown): string {\n if (value == null) return \"\";\n if (typeof value === \"string\") return value.trim();\n if (typeof value === \"number\" || typeof value === \"boolean\") return String(value);\n return \"\";\n}\n\nfunction stableString(value: unknown): string {\n if (typeof value === \"string\") return value;\n try {\n return JSON.stringify(value);\n } catch {\n return String(value);\n }\n}\n"],"names":[],"mappings":";;;;;;;AAkCA,MAAM,eAAe,IAAI,OAAO,GAAG,OAAO,aAAa,EAAE,CAAC,wBAAwB;AAElF,MAAM,sBAAuD;AAAA,EAC3D;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ,EAAE,WAAW,KAAA;AAAA,EAAK;AAAA,EAE5B,EAAE,KAAK,OAAO,OAAO,OAAO,QAAQ,MAAM,UAAU,IAAA;AAAA,EACpD,EAAE,KAAK,UAAU,OAAO,UAAU,QAAQ,MAAM,UAAU,IAAA;AAAA,EAC1D,EAAE,KAAK,UAAU,OAAO,UAAU,QAAQ,MAAM,UAAU,IAAA;AAAA,EAC1D;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ,CAAC,UAAU;AACjB,YAAM,OAAO,OAAO,UAAU,WAAW,QAAQ,SAAS,OAAO,KAAK,OAAO,KAAK;AAClF,UAAI,CAAC,aAAa,KAAK,IAAI,EAAG,QAAO;AACrC,iCAAQ,UAAA,EAAS,IAAG,QAAO,MAAY,WAAU,mCAAkC;AAAA,IACrF;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM,EAAE,YAAY,EAAA;AAAA,EAAE;AAE1B;AAEA,MAAM,eAAe;AAAA,EACnB,KAAK;AAAA,EACL,KAAK;AACP;AACA,MAAM,oBAAoB,OAAO,mBAAmB;AAE7C,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAmB;AACjB,QAAM,OAAO,QAAQ,MAAM,uBAAuB,IAAI,GAAG,CAAC,IAAI,CAAC;AAC/D,QAAM,4BACJ,sBAAsB,iBAAiB,mBAAmB;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,WAAW;AAAA,MACpB,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACvD;AAAA,MACA;AAAA,MACA,aAAa,eAAe;AAAA,MAC5B,UAAU,aAAa,CAAC,QAAQ,IAAI;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,4BAA4B,EAAE,mBAAmB,8BAA8B,CAAA;AAAA,IAAC;AAAA,EAAA;AAG3F;AAEO,SAAS,uBAAuB,MAAiD;AACtF,QAAM,UAAU,OAAO,SAAS,WAAW,cAAc,IAAI,IAAI;AACjE,SAAO,QAAQ,IAAI,CAAC,OAAO,UAAU,kBAAkB,OAAO,KAAK,CAAC;AACtE;AAEA,SAAS,cAAc,MAAwB;AAC7C,SAAO,KAAK,MAAM,OAAO,EAAE,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAC7D;AAEA,SAAS,kBAAkB,OAAuB,OAA6B;AAC7E,QAAM,mBAAmB,OAAO,UAAU,WAAW,aAAa,KAAK,IAAI;AAC3E,QAAM,cAAc,qBAAqB,oBAAoB,QAAQ;AACrE,QAAM,QAAQ,SAAS,WAAW;AAClC,QAAM,YAAY,YAAY,+BAAO,IAAI;AACzC,QAAM,kBAAkB,YAAY,aAAa,SAAS,IAAI;AAC9D,QAAM,aAAa,oBAAoB,oBAAoB,SAAY;AACvE,QAAM,QAAQ,SAAS,UAAU,MAAM,YAAY,SAAY;AAC/D,QAAM,SAAS,SAAS,+BAAO,MAAM;AAErC,QAAM,YAAY;AAAA,IAChB,KAAK,OAAO,WAAW;AAAA,IACvB,KAAK,OAAO,YAAY;AAAA,IACxB,KAAK,OAAO,IAAI;AAAA,IAChB,KAAK,OAAO,WAAW;AAAA,IACvB,KAAK,OAAO,MAAM;AAAA,IAClB,KAAK,OAAO,MAAM;AAAA,EAAA;AAEpB,QAAM,QAAQ;AAAA,IACZ,KAAK,OAAO,WAAW;AAAA,IACvB,KAAK,OAAO,OAAO;AAAA,IACnB,KAAK,OAAO,OAAO;AAAA,IACnB,KAAK,OAAO,UAAU;AAAA,IACtB,KAAK,OAAO,UAAU;AAAA,EAAA;AAExB,QAAM,MAAM;AAAA,IACV,KAAK,OAAO,KAAK;AAAA,IACjB,KAAK,QAAQ,KAAK;AAAA,IAClB,KAAK,OAAO,qBAAqB;AAAA,EAAA;AAEnC,QAAM,YAAY;AAAA,IAChB,KAAK,OAAO,WAAW;AAAA,IACvB,KAAK,QAAQ,WAAW;AAAA,IACxB,KAAK,OAAO,sBAAsB;AAAA,EAAA;AAEpC,QAAM,YAAY;AAAA,IAChB,KAAK,OAAO,WAAW;AAAA,IACvB,KAAK,QAAQ,WAAW;AAAA,IACxB,KAAK,OAAO,gBAAgB;AAAA,EAAA;AAE9B,QAAM,UAAU;AAAA,IACd,KAAK,OAAO,cAAc;AAAA,IAC1B,KAAK,OAAO,SAAS;AAAA,IACrB,KAAK,OAAO,SAAS;AAAA,IACrB,KAAK,QAAQ,SAAS;AAAA,EAAA;AAExB,QAAM,UAAU,YAAY,KAAK,OAAO,eAAe,GAAG,KAAK,OAAO,SAAS,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,KAAK,OAAO,YAAY;AAAA,IACxB,KAAK,OAAO,QAAQ;AAAA,IACpB,KAAK,OAAO,QAAQ;AAAA,EAAA;AAEtB,QAAM,SAAS;AAAA,IACb,KAAK,OAAO,qBAAqB;AAAA,IACjC,KAAK,OAAO,QAAQ;AAAA,IACpB,KAAK,OAAO,QAAQ;AAAA,EAAA;AAEtB,QAAM,UAAU;AAAA,IACd,KAAK,OAAO,SAAS;AAAA,IACrB,KAAK,OAAO,KAAK;AAAA,IACjB,KAAK,OAAO,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,UAAU,WAAW,QAAQ;AAAA,EAAA;AAGtC,QAAM,OAAO,UAAU;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,YAAY,KAAK,OAAO,aAAa,CAAC;AAAA,IAClD;AAAA,EAAA,CACD;AAED,SAAO;AAAA,IACL,IAAI,GAAG,KAAK,IAAI,aAAa,OAAO,WAAW,aAAa,KAAK,CAAC;AAAA,IAClE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,cAAc,OAAO,UAAU,WAAW,QAAQ,aAAa,KAAK;AAAA,IAC1E,KAAK;AAAA,IACL,GAAI,eAAe,SAAY,EAAE,eAAe,CAAA;AAAA,EAAC;AAErD;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,OAAiB,CAAA;AACvB,QAAM,2BAAW,IAAA;AACjB,QAAM,SAAS,CAAC,KAAa,UAAmB;AAC9C,UAAM,cAAc,YAAY,KAAK;AACrC,QAAI,CAAC,YAAa;AAClB,UAAM,MAAM,GAAG,GAAG,IAAI,WAAW;AACjC,QAAI,KAAK,IAAI,GAAG,EAAG;AACnB,SAAK,IAAI,GAAG;AACZ,SAAK,KAAK,GAAG;AAAA,EACf;AAEA,SAAO,aAAa,SAAS;AAC7B,SAAO,aAAa,SAAS;AAC7B,SAAO,WAAW,OAAO;AACzB,SAAO,WAAW,OAAO;AACzB,SAAO,eAAe,UAAU;AAEhC,MAAI,QAAQ;AACV,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,aAAO,KAAK,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,OAAmD;AACvE,MAAI;AACF,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,KAAK,QAA6C,MAAuB;AAChF,MAAI,CAAC,OAAQ,QAAO;AACpB,MAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,IAAI,EAAG,QAAO,OAAO,IAAI;AAC1E,SAAO,KAAK,MAAM,GAAG,EAAE,OAAgB,CAAC,SAAS,QAAQ;AACvD,QAAI,WAAW,OAAO,YAAY,UAAU;AAC1C,aAAQ,QAAoC,GAAG;AAAA,IACjD;AACA,WAAO;AAAA,EACT,GAAG,MAAM;AACX;AAEA,SAAS,eAAe,QAA2B;AACjD,aAAW,SAAS,QAAQ;AAC1B,UAAM,SAAS,YAAY,KAAK;AAChC,QAAI,OAAQ,QAAO;AAAA,EACrB;AACA,SAAO;AACT;AAEA,SAAS,YAAY,OAAwB;AAC3C,MAAI,SAAS,KAAM,QAAO;AAC1B,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,KAAA;AAC5C,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,SAAO;AACT;AAEA,SAAS,aAAa,OAAwB;AAC5C,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI;AACF,WAAO,KAAK,UAAU,KAAK;AAAA,EAC7B,QAAQ;AACN,WAAO,OAAO,KAAK;AAAA,EACrB;AACF;"}
|
package/dist/data/Properties.cjs
CHANGED
|
@@ -70,7 +70,7 @@ function Properties({
|
|
|
70
70
|
/* @__PURE__ */ jsxRuntime.jsxs("dd", { className: utils.cn("min-w-0 space-y-density-1", valueClassName), children: [
|
|
71
71
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
|
|
72
72
|
/* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
|
|
73
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("min-w-0 max-w-full
|
|
73
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("min-w-0 max-w-full", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
|
|
74
74
|
/* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
|
|
75
75
|
] }),
|
|
76
76
|
item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
|
|
@@ -93,7 +93,7 @@ function ActionList({
|
|
|
93
93
|
(action) => !action.visible || action.visible(item.key, item.value, item)
|
|
94
94
|
);
|
|
95
95
|
if (rendered.length === 0) return null;
|
|
96
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("inline-flex items-center
|
|
96
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("inline-flex items-center", className), children: rendered.map((action) => /* @__PURE__ */ jsxRuntime.jsx(PropertiesActionButton, { action, item }, action.id)) });
|
|
97
97
|
}
|
|
98
98
|
function PropertiesActionButton({
|
|
99
99
|
action,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n /** Stable action id. */\n id: string;\n /** Iconify name or imported icon component. */\n icon: string | StaticIconComponent;\n /** Accessible label and tooltip for this row action. */\n label: (key: string, value: V, item: PropertiesItem<V>) => string;\n /** Return false to hide the action for a specific row. */\n visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Return true to disable the action for a specific row. */\n disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Called when the row action is clicked. */\n onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n /** Stable property key. Also used as the default label. */\n key: string;\n /** Property value passed to renderers and actions. */\n value: V;\n /** Secondary text shown below the label. */\n subtitle?: ReactNode;\n /** Hide this row without removing it from the item array. */\n hidden?: boolean;\n /** Enables an expandable child area below the row value. */\n expandable?: boolean;\n /** Controlled expanded state. */\n expanded?: boolean;\n /** Called when an expandable row is toggled. */\n onToggle?: (next: boolean) => void;\n /** Child content rendered when the row is expanded. */\n renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n /** Property rows to render. Hidden items are filtered out. */\n items: PropertiesItem<V>[];\n /** Custom label renderer. */\n renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Custom value renderer. */\n renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Static icon name or function that returns an icon name per row. */\n labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n /** Actions rendered before the value. */\n prefixActions?: PropertiesAction<V>[];\n /** Actions rendered after the value. */\n suffixActions?: PropertiesAction<V>[];\n /** Classes applied to the list root. */\n className?: string;\n /** Classes applied to each row. */\n rowClassName?: string;\n /** Classes applied to each label cell. */\n labelClassName?: string;\n /** Classes applied to each value cell. */\n valueClassName?: string;\n /** Row density preset. */\n density?: PropertiesDensity;\n /** Empty-state content when no rows are visible. */\n emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n PropertiesDensity,\n { row: string; label: string; value: string; gridCols: string }\n> = {\n comfortable: {\n row: \"px-density-3 py-density-2\",\n label: \"text-xs font-medium text-muted-foreground\",\n value: \"text-sm text-foreground\",\n gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n },\n compact: {\n row: \"px-density-2 py-density-1.5\",\n label: \"font-mono text-[11px] text-muted-foreground\",\n value: \"text-xs text-foreground\",\n gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n },\n};\n\nexport function Properties<V = unknown>({\n items,\n renderLabel,\n renderValue,\n labelIcon,\n prefixActions,\n suffixActions,\n className,\n rowClassName,\n labelClassName,\n valueClassName,\n density = \"comfortable\",\n emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n const visible = items.filter((item) => !item.hidden);\n\n if (visible.length === 0) {\n return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n }\n\n const styles = DENSITY_CLASSES[density];\n\n return (\n <dl\n className={cn(\n \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n className,\n )}\n >\n {visible.map((item) => {\n const iconName =\n typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n const renderedLabel = renderLabel\n ? renderLabel(item.key, item.value, item)\n : formatPropertyLabel(item.key);\n const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n return (\n <div\n key={item.key}\n className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n >\n <dt\n aria-label={ariaLabel}\n className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n >\n <div className=\"flex min-w-0 items-center gap-density-1\">\n {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n </div>\n {item.subtitle ? (\n <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n {item.subtitle}\n </div>\n ) : null}\n </dt>\n <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n <div className=\"flex min-w-0 items-start gap-density-1\">\n <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n <div className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}>\n {renderValue\n ? renderValue(item.key, item.value, item)\n : defaultRenderValue(item.value)}\n </div>\n <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n </div>\n {item.expandable && item.expanded && item.renderChildren\n ? item.renderChildren()\n : null}\n </dd>\n </div>\n );\n })}\n </dl>\n );\n}\n\nfunction ActionList<V>({\n actions,\n item,\n className,\n}: {\n actions: PropertiesAction<V>[] | undefined;\n item: PropertiesItem<V>;\n className?: string;\n}) {\n if (!actions || actions.length === 0) return null;\n const rendered = actions.filter(\n (action) => !action.visible || action.visible(item.key, item.value, item),\n );\n if (rendered.length === 0) return null;\n return (\n <span className={cn(\"inline-flex items-center gap-0.5\", className)}>\n {rendered.map((action) => (\n <PropertiesActionButton key={action.id} action={action} item={item} />\n ))}\n </span>\n );\n}\n\nfunction PropertiesActionButton<V>({\n action,\n item,\n}: {\n action: PropertiesAction<V>;\n item: PropertiesItem<V>;\n}) {\n const label = action.label(item.key, item.value, item);\n const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n disabled={disabled}\n className={cn(\n \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n \"hover:bg-accent hover:text-foreground\",\n \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n )}\n onClick={(event) => {\n event.stopPropagation();\n action.onClick(item.key, item.value, item);\n }}\n >\n <Icon\n {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n className=\"text-xs\"\n />\n </button>\n );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n if (value === null || value === undefined) {\n return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n }\n if (typeof value === \"string\") return value;\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return <span className=\"font-mono\">{String(value)}</span>;\n }\n try {\n return (\n <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n {JSON.stringify(value, null, 2)}\n </pre>\n );\n } catch {\n return String(value);\n }\n}\n"],"names":["jsx","cn","formatPropertyLabel","jsxs","Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n /** Stable action id. */\n id: string;\n /** Iconify name or imported icon component. */\n icon: string | StaticIconComponent;\n /** Accessible label and tooltip for this row action. */\n label: (key: string, value: V, item: PropertiesItem<V>) => string;\n /** Return false to hide the action for a specific row. */\n visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Return true to disable the action for a specific row. */\n disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Called when the row action is clicked. */\n onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n /** Stable property key. Also used as the default label. */\n key: string;\n /** Property value passed to renderers and actions. */\n value: V;\n /** Secondary text shown below the label. */\n subtitle?: ReactNode;\n /** Hide this row without removing it from the item array. */\n hidden?: boolean;\n /** Enables an expandable child area below the row value. */\n expandable?: boolean;\n /** Controlled expanded state. */\n expanded?: boolean;\n /** Called when an expandable row is toggled. */\n onToggle?: (next: boolean) => void;\n /** Child content rendered when the row is expanded. */\n renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n /** Property rows to render. Hidden items are filtered out. */\n items: PropertiesItem<V>[];\n /** Custom label renderer. */\n renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Custom value renderer. */\n renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Static icon name or function that returns an icon name per row. */\n labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n /** Actions rendered before the value. */\n prefixActions?: PropertiesAction<V>[];\n /** Actions rendered after the value. */\n suffixActions?: PropertiesAction<V>[];\n /** Classes applied to the list root. */\n className?: string;\n /** Classes applied to each row. */\n rowClassName?: string;\n /** Classes applied to each label cell. */\n labelClassName?: string;\n /** Classes applied to each value cell. */\n valueClassName?: string;\n /** Row density preset. */\n density?: PropertiesDensity;\n /** Empty-state content when no rows are visible. */\n emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n PropertiesDensity,\n { row: string; label: string; value: string; gridCols: string }\n> = {\n comfortable: {\n row: \"px-density-3 py-density-2\",\n label: \"text-xs font-medium text-muted-foreground\",\n value: \"text-sm text-foreground\",\n gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n },\n compact: {\n row: \"px-density-2 py-density-1.5\",\n label: \"font-mono text-[11px] text-muted-foreground\",\n value: \"text-xs text-foreground\",\n gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n },\n};\n\nexport function Properties<V = unknown>({\n items,\n renderLabel,\n renderValue,\n labelIcon,\n prefixActions,\n suffixActions,\n className,\n rowClassName,\n labelClassName,\n valueClassName,\n density = \"comfortable\",\n emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n const visible = items.filter((item) => !item.hidden);\n\n if (visible.length === 0) {\n return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n }\n\n const styles = DENSITY_CLASSES[density];\n\n return (\n <dl\n className={cn(\n \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n className,\n )}\n >\n {visible.map((item) => {\n const iconName =\n typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n const renderedLabel = renderLabel\n ? renderLabel(item.key, item.value, item)\n : formatPropertyLabel(item.key);\n const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n return (\n <div\n key={item.key}\n className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n >\n <dt\n aria-label={ariaLabel}\n className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n >\n <div className=\"flex min-w-0 items-center gap-density-1\">\n {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n </div>\n {item.subtitle ? (\n <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n {item.subtitle}\n </div>\n ) : null}\n </dt>\n <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n <div className=\"flex min-w-0 items-start gap-density-1\">\n <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n <div className={cn(\"min-w-0 max-w-full\", styles.value)}>\n {renderValue\n ? renderValue(item.key, item.value, item)\n : defaultRenderValue(item.value)}\n </div>\n <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n </div>\n {item.expandable && item.expanded && item.renderChildren\n ? item.renderChildren()\n : null}\n </dd>\n </div>\n );\n })}\n </dl>\n );\n}\n\nfunction ActionList<V>({\n actions,\n item,\n className,\n}: {\n actions: PropertiesAction<V>[] | undefined;\n item: PropertiesItem<V>;\n className?: string;\n}) {\n if (!actions || actions.length === 0) return null;\n const rendered = actions.filter(\n (action) => !action.visible || action.visible(item.key, item.value, item),\n );\n if (rendered.length === 0) return null;\n return (\n <span className={cn(\"inline-flex items-center\", className)}>\n {rendered.map((action) => (\n <PropertiesActionButton key={action.id} action={action} item={item} />\n ))}\n </span>\n );\n}\n\nfunction PropertiesActionButton<V>({\n action,\n item,\n}: {\n action: PropertiesAction<V>;\n item: PropertiesItem<V>;\n}) {\n const label = action.label(item.key, item.value, item);\n const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n disabled={disabled}\n className={cn(\n \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n \"hover:bg-accent hover:text-foreground\",\n \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n )}\n onClick={(event) => {\n event.stopPropagation();\n action.onClick(item.key, item.value, item);\n }}\n >\n <Icon\n {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n className=\"text-xs\"\n />\n </button>\n );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n if (value === null || value === undefined) {\n return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n }\n if (typeof value === \"string\") return value;\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return <span className=\"font-mono\">{String(value)}</span>;\n }\n try {\n return (\n <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n {JSON.stringify(value, null, 2)}\n </pre>\n );\n } catch {\n return String(value);\n }\n}\n"],"names":["jsx","cn","formatPropertyLabel","jsxs","Icon"],"mappings":"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"}
|
package/dist/data/Properties.js
CHANGED
|
@@ -68,7 +68,7 @@ function Properties({
|
|
|
68
68
|
/* @__PURE__ */ jsxs("dd", { className: cn("min-w-0 space-y-density-1", valueClassName), children: [
|
|
69
69
|
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
|
|
70
70
|
/* @__PURE__ */ jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
|
|
71
|
-
/* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full
|
|
71
|
+
/* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
|
|
72
72
|
/* @__PURE__ */ jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
|
|
73
73
|
] }),
|
|
74
74
|
item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
|
|
@@ -91,7 +91,7 @@ function ActionList({
|
|
|
91
91
|
(action) => !action.visible || action.visible(item.key, item.value, item)
|
|
92
92
|
);
|
|
93
93
|
if (rendered.length === 0) return null;
|
|
94
|
-
return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center
|
|
94
|
+
return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center", className), children: rendered.map((action) => /* @__PURE__ */ jsx(PropertiesActionButton, { action, item }, action.id)) });
|
|
95
95
|
}
|
|
96
96
|
function PropertiesActionButton({
|
|
97
97
|
action,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n /** Stable action id. */\n id: string;\n /** Iconify name or imported icon component. */\n icon: string | StaticIconComponent;\n /** Accessible label and tooltip for this row action. */\n label: (key: string, value: V, item: PropertiesItem<V>) => string;\n /** Return false to hide the action for a specific row. */\n visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Return true to disable the action for a specific row. */\n disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Called when the row action is clicked. */\n onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n /** Stable property key. Also used as the default label. */\n key: string;\n /** Property value passed to renderers and actions. */\n value: V;\n /** Secondary text shown below the label. */\n subtitle?: ReactNode;\n /** Hide this row without removing it from the item array. */\n hidden?: boolean;\n /** Enables an expandable child area below the row value. */\n expandable?: boolean;\n /** Controlled expanded state. */\n expanded?: boolean;\n /** Called when an expandable row is toggled. */\n onToggle?: (next: boolean) => void;\n /** Child content rendered when the row is expanded. */\n renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n /** Property rows to render. Hidden items are filtered out. */\n items: PropertiesItem<V>[];\n /** Custom label renderer. */\n renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Custom value renderer. */\n renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Static icon name or function that returns an icon name per row. */\n labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n /** Actions rendered before the value. */\n prefixActions?: PropertiesAction<V>[];\n /** Actions rendered after the value. */\n suffixActions?: PropertiesAction<V>[];\n /** Classes applied to the list root. */\n className?: string;\n /** Classes applied to each row. */\n rowClassName?: string;\n /** Classes applied to each label cell. */\n labelClassName?: string;\n /** Classes applied to each value cell. */\n valueClassName?: string;\n /** Row density preset. */\n density?: PropertiesDensity;\n /** Empty-state content when no rows are visible. */\n emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n PropertiesDensity,\n { row: string; label: string; value: string; gridCols: string }\n> = {\n comfortable: {\n row: \"px-density-3 py-density-2\",\n label: \"text-xs font-medium text-muted-foreground\",\n value: \"text-sm text-foreground\",\n gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n },\n compact: {\n row: \"px-density-2 py-density-1.5\",\n label: \"font-mono text-[11px] text-muted-foreground\",\n value: \"text-xs text-foreground\",\n gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n },\n};\n\nexport function Properties<V = unknown>({\n items,\n renderLabel,\n renderValue,\n labelIcon,\n prefixActions,\n suffixActions,\n className,\n rowClassName,\n labelClassName,\n valueClassName,\n density = \"comfortable\",\n emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n const visible = items.filter((item) => !item.hidden);\n\n if (visible.length === 0) {\n return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n }\n\n const styles = DENSITY_CLASSES[density];\n\n return (\n <dl\n className={cn(\n \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n className,\n )}\n >\n {visible.map((item) => {\n const iconName =\n typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n const renderedLabel = renderLabel\n ? renderLabel(item.key, item.value, item)\n : formatPropertyLabel(item.key);\n const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n return (\n <div\n key={item.key}\n className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n >\n <dt\n aria-label={ariaLabel}\n className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n >\n <div className=\"flex min-w-0 items-center gap-density-1\">\n {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n </div>\n {item.subtitle ? (\n <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n {item.subtitle}\n </div>\n ) : null}\n </dt>\n <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n <div className=\"flex min-w-0 items-start gap-density-1\">\n <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n <div className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}>\n {renderValue\n ? renderValue(item.key, item.value, item)\n : defaultRenderValue(item.value)}\n </div>\n <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n </div>\n {item.expandable && item.expanded && item.renderChildren\n ? item.renderChildren()\n : null}\n </dd>\n </div>\n );\n })}\n </dl>\n );\n}\n\nfunction ActionList<V>({\n actions,\n item,\n className,\n}: {\n actions: PropertiesAction<V>[] | undefined;\n item: PropertiesItem<V>;\n className?: string;\n}) {\n if (!actions || actions.length === 0) return null;\n const rendered = actions.filter(\n (action) => !action.visible || action.visible(item.key, item.value, item),\n );\n if (rendered.length === 0) return null;\n return (\n <span className={cn(\"inline-flex items-center gap-0.5\", className)}>\n {rendered.map((action) => (\n <PropertiesActionButton key={action.id} action={action} item={item} />\n ))}\n </span>\n );\n}\n\nfunction PropertiesActionButton<V>({\n action,\n item,\n}: {\n action: PropertiesAction<V>;\n item: PropertiesItem<V>;\n}) {\n const label = action.label(item.key, item.value, item);\n const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n disabled={disabled}\n className={cn(\n \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n \"hover:bg-accent hover:text-foreground\",\n \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n )}\n onClick={(event) => {\n event.stopPropagation();\n action.onClick(item.key, item.value, item);\n }}\n >\n <Icon\n {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n className=\"text-xs\"\n />\n </button>\n );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n if (value === null || value === undefined) {\n return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n }\n if (typeof value === \"string\") return value;\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return <span className=\"font-mono\">{String(value)}</span>;\n }\n try {\n return (\n <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n {JSON.stringify(value, null, 2)}\n </pre>\n );\n } catch {\n return String(value);\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n /** Stable action id. */\n id: string;\n /** Iconify name or imported icon component. */\n icon: string | StaticIconComponent;\n /** Accessible label and tooltip for this row action. */\n label: (key: string, value: V, item: PropertiesItem<V>) => string;\n /** Return false to hide the action for a specific row. */\n visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Return true to disable the action for a specific row. */\n disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n /** Called when the row action is clicked. */\n onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n /** Stable property key. Also used as the default label. */\n key: string;\n /** Property value passed to renderers and actions. */\n value: V;\n /** Secondary text shown below the label. */\n subtitle?: ReactNode;\n /** Hide this row without removing it from the item array. */\n hidden?: boolean;\n /** Enables an expandable child area below the row value. */\n expandable?: boolean;\n /** Controlled expanded state. */\n expanded?: boolean;\n /** Called when an expandable row is toggled. */\n onToggle?: (next: boolean) => void;\n /** Child content rendered when the row is expanded. */\n renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n /** Property rows to render. Hidden items are filtered out. */\n items: PropertiesItem<V>[];\n /** Custom label renderer. */\n renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Custom value renderer. */\n renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n /** Static icon name or function that returns an icon name per row. */\n labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n /** Actions rendered before the value. */\n prefixActions?: PropertiesAction<V>[];\n /** Actions rendered after the value. */\n suffixActions?: PropertiesAction<V>[];\n /** Classes applied to the list root. */\n className?: string;\n /** Classes applied to each row. */\n rowClassName?: string;\n /** Classes applied to each label cell. */\n labelClassName?: string;\n /** Classes applied to each value cell. */\n valueClassName?: string;\n /** Row density preset. */\n density?: PropertiesDensity;\n /** Empty-state content when no rows are visible. */\n emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n PropertiesDensity,\n { row: string; label: string; value: string; gridCols: string }\n> = {\n comfortable: {\n row: \"px-density-3 py-density-2\",\n label: \"text-xs font-medium text-muted-foreground\",\n value: \"text-sm text-foreground\",\n gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n },\n compact: {\n row: \"px-density-2 py-density-1.5\",\n label: \"font-mono text-[11px] text-muted-foreground\",\n value: \"text-xs text-foreground\",\n gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n },\n};\n\nexport function Properties<V = unknown>({\n items,\n renderLabel,\n renderValue,\n labelIcon,\n prefixActions,\n suffixActions,\n className,\n rowClassName,\n labelClassName,\n valueClassName,\n density = \"comfortable\",\n emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n const visible = items.filter((item) => !item.hidden);\n\n if (visible.length === 0) {\n return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n }\n\n const styles = DENSITY_CLASSES[density];\n\n return (\n <dl\n className={cn(\n \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n className,\n )}\n >\n {visible.map((item) => {\n const iconName =\n typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n const renderedLabel = renderLabel\n ? renderLabel(item.key, item.value, item)\n : formatPropertyLabel(item.key);\n const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n return (\n <div\n key={item.key}\n className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n >\n <dt\n aria-label={ariaLabel}\n className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n >\n <div className=\"flex min-w-0 items-center gap-density-1\">\n {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n </div>\n {item.subtitle ? (\n <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n {item.subtitle}\n </div>\n ) : null}\n </dt>\n <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n <div className=\"flex min-w-0 items-start gap-density-1\">\n <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n <div className={cn(\"min-w-0 max-w-full\", styles.value)}>\n {renderValue\n ? renderValue(item.key, item.value, item)\n : defaultRenderValue(item.value)}\n </div>\n <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n </div>\n {item.expandable && item.expanded && item.renderChildren\n ? item.renderChildren()\n : null}\n </dd>\n </div>\n );\n })}\n </dl>\n );\n}\n\nfunction ActionList<V>({\n actions,\n item,\n className,\n}: {\n actions: PropertiesAction<V>[] | undefined;\n item: PropertiesItem<V>;\n className?: string;\n}) {\n if (!actions || actions.length === 0) return null;\n const rendered = actions.filter(\n (action) => !action.visible || action.visible(item.key, item.value, item),\n );\n if (rendered.length === 0) return null;\n return (\n <span className={cn(\"inline-flex items-center\", className)}>\n {rendered.map((action) => (\n <PropertiesActionButton key={action.id} action={action} item={item} />\n ))}\n </span>\n );\n}\n\nfunction PropertiesActionButton<V>({\n action,\n item,\n}: {\n action: PropertiesAction<V>;\n item: PropertiesItem<V>;\n}) {\n const label = action.label(item.key, item.value, item);\n const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n disabled={disabled}\n className={cn(\n \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n \"hover:bg-accent hover:text-foreground\",\n \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n )}\n onClick={(event) => {\n event.stopPropagation();\n action.onClick(item.key, item.value, item);\n }}\n >\n <Icon\n {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n className=\"text-xs\"\n />\n </button>\n );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n if (value === null || value === undefined) {\n return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n }\n if (typeof value === \"string\") return value;\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return <span className=\"font-mono\">{String(value)}</span>;\n }\n try {\n return (\n <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n {JSON.stringify(value, null, 2)}\n </pre>\n );\n } catch {\n return String(value);\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -220,13 +220,25 @@ function TagList({
|
|
|
220
220
|
maxVisible = 3,
|
|
221
221
|
className,
|
|
222
222
|
actions = "hover",
|
|
223
|
-
compact
|
|
223
|
+
compact,
|
|
224
|
+
wrap = false
|
|
224
225
|
}) {
|
|
225
226
|
const density = useDensity.useDensityValue();
|
|
226
227
|
const isCompact = compact ?? density === "compact";
|
|
227
228
|
if (tags.length === 0) {
|
|
228
229
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" });
|
|
229
230
|
}
|
|
231
|
+
if (wrap) {
|
|
232
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("flex min-w-0 flex-wrap items-center gap-1", className), children: tags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
233
|
+
TagBadge,
|
|
234
|
+
{
|
|
235
|
+
tag,
|
|
236
|
+
actions,
|
|
237
|
+
compact: isCompact
|
|
238
|
+
},
|
|
239
|
+
`${tag.display}-${index}`
|
|
240
|
+
)) });
|
|
241
|
+
}
|
|
230
242
|
const visible = tags.slice(0, maxVisible);
|
|
231
243
|
const overflow = tags.slice(maxVisible);
|
|
232
244
|
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("flex min-w-0 items-center gap-1", className), children: [
|
|
@@ -263,7 +275,10 @@ function TagList({
|
|
|
263
275
|
)
|
|
264
276
|
] });
|
|
265
277
|
}
|
|
266
|
-
function TagPropertiesList({
|
|
278
|
+
function TagPropertiesList({
|
|
279
|
+
tags,
|
|
280
|
+
rowClassName = "grid-cols-[minmax(4rem,8rem)_minmax(0,1fr)]"
|
|
281
|
+
}) {
|
|
267
282
|
const tagActions = useTagActions();
|
|
268
283
|
const items = react.useMemo(
|
|
269
284
|
() => tags.map((tag, index) => ({ key: `${tag.token}-${index}`, value: tag })),
|
|
@@ -275,7 +290,7 @@ function TagPropertiesList({ tags }) {
|
|
|
275
290
|
items,
|
|
276
291
|
density: "compact",
|
|
277
292
|
className: "border-0 bg-transparent",
|
|
278
|
-
rowClassName
|
|
293
|
+
rowClassName,
|
|
279
294
|
renderLabel: (_key, tag) => tag.key ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: tag.key }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: "tag" }),
|
|
280
295
|
renderValue: (_key, tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-mono", title: tag.value, children: tag.value }),
|
|
281
296
|
suffixActions: [
|
|
@@ -323,6 +338,7 @@ function useTagActionsValue(value, onChange) {
|
|
|
323
338
|
}
|
|
324
339
|
exports.TagActionsProvider = TagActionsProvider;
|
|
325
340
|
exports.TagList = TagList;
|
|
341
|
+
exports.TagPropertiesList = TagPropertiesList;
|
|
326
342
|
exports.normalizeTags = normalizeTags;
|
|
327
343
|
exports.splitTagToken = splitTagToken;
|
|
328
344
|
exports.tagActionsFromRecord = tagActionsFromRecord;
|