@flanksource/clicky-ui 0.2.11 → 0.2.12
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/JsonSchemaForm.cjs +1 -1
- package/dist/components/JsonSchemaForm.cjs.map +1 -1
- package/dist/components/JsonSchemaForm.js +1 -1
- package/dist/components/JsonSchemaForm.js.map +1 -1
- package/dist/components/json-schema-form-fields.cjs +9 -7
- package/dist/components/json-schema-form-fields.cjs.map +1 -1
- package/dist/components/json-schema-form-fields.d.ts.map +1 -1
- package/dist/components/json-schema-form-fields.js +9 -7
- package/dist/components/json-schema-form-fields.js.map +1 -1
- package/dist/components/json-schema-form-types.d.ts +8 -4
- package/dist/components/json-schema-form-types.d.ts.map +1 -1
- package/dist/data/LogDetails.cjs +4 -2
- package/dist/data/LogDetails.cjs.map +1 -1
- package/dist/data/LogDetails.js +4 -2
- package/dist/data/LogDetails.js.map +1 -1
- package/dist/layout/SplitPane.cjs +34 -27
- package/dist/layout/SplitPane.cjs.map +1 -1
- package/dist/layout/SplitPane.d.ts.map +1 -1
- package/dist/layout/SplitPane.js +34 -27
- package/dist/layout/SplitPane.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ const utils = require("../lib/utils.cjs");
|
|
|
5
5
|
const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
|
|
6
6
|
const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
|
|
7
7
|
const DEFAULT_LABEL_MAX_WIDTH = "40ch";
|
|
8
|
-
const DEFAULT_VALUE_MAX_WIDTH = "
|
|
8
|
+
const DEFAULT_VALUE_MAX_WIDTH = "600px";
|
|
9
9
|
function resolveFormLayout(layout, inline) {
|
|
10
10
|
const base = layout ?? { mode: inline ? "inline" : "stacked" };
|
|
11
11
|
if (base.mode !== "inline") return { mode: "stacked" };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport {\n DEFAULT_FORM_SIZE,\n fieldInnerGapClass,\n inlineRowGapClass,\n labelSizeClass,\n stackedRowGapClass,\n} from \"./json-schema-form-size\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"
|
|
1
|
+
{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport {\n DEFAULT_FORM_SIZE,\n fieldInnerGapClass,\n inlineRowGapClass,\n labelSizeClass,\n stackedRowGapClass,\n} from \"./json-schema-form-size\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props to a single resolved\n// FormLayout. An explicit `layout` wins; otherwise `inline` selects the inline\n// preset. Width caps are only filled for inline mode.\nfunction resolveFormLayout(layout: FormLayout | undefined, inline: boolean): FormLayout {\n const base = layout ?? { mode: inline ? \"inline\" : \"stacked\" };\n if (base.mode !== \"inline\") return { mode: \"stacked\" };\n return {\n mode: \"inline\",\n labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH,\n };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n schema,\n value,\n onChange,\n readOnly = false,\n inline = false,\n layout,\n size = DEFAULT_FORM_SIZE,\n idPrefix,\n hideReadOnlyFields = false,\n hiddenKeys,\n requiredFirst = false,\n title,\n pre,\n post,\n}: JsonSchemaFormProps) {\n const resolvedLayout = resolveFormLayout(layout, inline);\n const ctx: RenderContext = {\n readOnly,\n hideReadOnlyFields,\n layout: resolvedLayout,\n size,\n requiredFirst,\n pre: pre ?? [],\n post: post ?? [],\n depth: 0,\n ...(idPrefix ? { idPrefix } : {}),\n };\n const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n const rowGap = resolvedLayout.mode === \"inline\" ? inlineRowGapClass[size] : stackedRowGapClass[size];\n return (\n <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n {title && <h3 className={cn(\"font-semibold\", labelSizeClass[size])}>{title}</h3>}\n <div className={cn(\"grid\", rowGap)}>{rows}</div>\n </div>\n );\n}\n"],"names":["DEFAULT_FORM_SIZE","renderObjectFields","inlineRowGapClass","stackedRowGapClass","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass"],"mappings":";;;;;;AAWA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAKhC,SAAS,kBAAkB,QAAgC,QAA6B;AACtF,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,WAAW,UAAA;AACnD,MAAI,KAAK,SAAS,SAAU,QAAO,EAAE,MAAM,UAAA;AAC3C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,eAAe,KAAK,iBAAiB;AAAA,IACrC,eAAe,KAAK,iBAAiB;AAAA,EAAA;AAEzC;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,OAAOA,mBAAAA;AAAAA,EACP;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,iBAAiB,kBAAkB,QAAQ,MAAM;AACvD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,OAAO;AAAA,IACP,GAAI,WAAW,EAAE,aAAa,CAAA;AAAA,EAAC;AAEjC,QAAM,OAAOC,qBAAAA,mBAAmB,QAAQ,OAAO,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAErG,QAAM,SAAS,eAAe,SAAS,WAAWC,mBAAAA,kBAAkB,IAAI,IAAIC,mBAAAA,mBAAmB,IAAI;AACnG,SACEC,2BAAAA,KAAC,SAAI,WAAWC,MAAAA,GAAG,iBAAiBC,sCAAmB,IAAI,CAAC,GACzD,UAAA;AAAA,IAAA,SAASC,2BAAAA,IAAC,QAAG,WAAWF,MAAAA,GAAG,iBAAiBG,mBAAAA,eAAe,IAAI,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,mCAC1E,OAAA,EAAI,WAAWH,MAAAA,GAAG,QAAQ,MAAM,GAAI,UAAA,KAAA,CAAK;AAAA,EAAA,GAC5C;AAEJ;;"}
|
|
@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
|
|
|
3
3
|
import { renderObjectFields } from "./json-schema-form-render.js";
|
|
4
4
|
import { inlineRowGapClass, DEFAULT_FORM_SIZE, stackedRowGapClass, labelSizeClass, fieldInnerGapClass } from "./json-schema-form-size.js";
|
|
5
5
|
const DEFAULT_LABEL_MAX_WIDTH = "40ch";
|
|
6
|
-
const DEFAULT_VALUE_MAX_WIDTH = "
|
|
6
|
+
const DEFAULT_VALUE_MAX_WIDTH = "600px";
|
|
7
7
|
function resolveFormLayout(layout, inline) {
|
|
8
8
|
const base = layout ?? { mode: inline ? "inline" : "stacked" };
|
|
9
9
|
if (base.mode !== "inline") return { mode: "stacked" };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport {\n DEFAULT_FORM_SIZE,\n fieldInnerGapClass,\n inlineRowGapClass,\n labelSizeClass,\n stackedRowGapClass,\n} from \"./json-schema-form-size\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"
|
|
1
|
+
{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport {\n DEFAULT_FORM_SIZE,\n fieldInnerGapClass,\n inlineRowGapClass,\n labelSizeClass,\n stackedRowGapClass,\n} from \"./json-schema-form-size\";\nimport type { FormLayout, JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props to a single resolved\n// FormLayout. An explicit `layout` wins; otherwise `inline` selects the inline\n// preset. Width caps are only filled for inline mode.\nfunction resolveFormLayout(layout: FormLayout | undefined, inline: boolean): FormLayout {\n const base = layout ?? { mode: inline ? \"inline\" : \"stacked\" };\n if (base.mode !== \"inline\") return { mode: \"stacked\" };\n return {\n mode: \"inline\",\n labelMaxWidth: base.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n valueMaxWidth: base.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH,\n };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n schema,\n value,\n onChange,\n readOnly = false,\n inline = false,\n layout,\n size = DEFAULT_FORM_SIZE,\n idPrefix,\n hideReadOnlyFields = false,\n hiddenKeys,\n requiredFirst = false,\n title,\n pre,\n post,\n}: JsonSchemaFormProps) {\n const resolvedLayout = resolveFormLayout(layout, inline);\n const ctx: RenderContext = {\n readOnly,\n hideReadOnlyFields,\n layout: resolvedLayout,\n size,\n requiredFirst,\n pre: pre ?? [],\n post: post ?? [],\n depth: 0,\n ...(idPrefix ? { idPrefix } : {}),\n };\n const rows = renderObjectFields(schema, value, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n\n const rowGap = resolvedLayout.mode === \"inline\" ? inlineRowGapClass[size] : stackedRowGapClass[size];\n return (\n <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n {title && <h3 className={cn(\"font-semibold\", labelSizeClass[size])}>{title}</h3>}\n <div className={cn(\"grid\", rowGap)}>{rows}</div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAKhC,SAAS,kBAAkB,QAAgC,QAA6B;AACtF,QAAM,OAAO,UAAU,EAAE,MAAM,SAAS,WAAW,UAAA;AACnD,MAAI,KAAK,SAAS,SAAU,QAAO,EAAE,MAAM,UAAA;AAC3C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,eAAe,KAAK,iBAAiB;AAAA,IACrC,eAAe,KAAK,iBAAiB;AAAA,EAAA;AAEzC;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,iBAAiB,kBAAkB,QAAQ,MAAM;AACvD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,KAAK,OAAO,CAAA;AAAA,IACZ,MAAM,QAAQ,CAAA;AAAA,IACd,OAAO;AAAA,IACP,GAAI,WAAW,EAAE,aAAa,CAAA;AAAA,EAAC;AAEjC,QAAM,OAAO,mBAAmB,QAAQ,OAAO,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAErG,QAAM,SAAS,eAAe,SAAS,WAAW,kBAAkB,IAAI,IAAI,mBAAmB,IAAI;AACnG,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,mBAAmB,IAAI,CAAC,GACzD,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAG,WAAW,GAAG,iBAAiB,eAAe,IAAI,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,wBAC1E,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,GAAI,UAAA,KAAA,CAAK;AAAA,EAAA,GAC5C;AAEJ;"}
|
|
@@ -27,12 +27,14 @@ function FieldWrapper({
|
|
|
27
27
|
}) {
|
|
28
28
|
if (layout.mode === "inline") {
|
|
29
29
|
const labelMaxWidth = layout.labelMaxWidth ?? "40ch";
|
|
30
|
-
const valueMaxWidth = layout.valueMaxWidth ?? "
|
|
30
|
+
const valueMaxWidth = layout.valueMaxWidth ?? "600px";
|
|
31
31
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
32
32
|
"div",
|
|
33
33
|
{
|
|
34
34
|
className: "grid items-start gap-x-3 gap-y-0.5",
|
|
35
|
-
style: {
|
|
35
|
+
style: {
|
|
36
|
+
gridTemplateColumns: `minmax(0, min(${labelMaxWidth}, max-content)) minmax(0, ${valueMaxWidth})`
|
|
37
|
+
},
|
|
36
38
|
children: [
|
|
37
39
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex min-w-0 items-center", jsonSchemaFormSize.controlMinHeightClass[size]), children: label }),
|
|
38
40
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: value }),
|
|
@@ -50,11 +52,11 @@ function FieldWrapper({
|
|
|
50
52
|
] });
|
|
51
53
|
}
|
|
52
54
|
function FieldLabel({ field, fieldId, size }) {
|
|
53
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: utils.cn("flex items-center gap-2 font-medium", jsonSchemaFormSize.labelSizeClass[size]), children: [
|
|
54
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: field.labelIcon, className: "text-[15px] text-muted-foreground" }),
|
|
55
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { title: field.label !== field.key ? field.key : void 0, children: field.label }),
|
|
56
|
-
field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" }),
|
|
57
|
-
field.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: field.badge })
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: utils.cn("flex min-w-0 items-center gap-2 font-medium", jsonSchemaFormSize.labelSizeClass[size]), children: [
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: field.labelIcon, className: "shrink-0 text-[15px] text-muted-foreground" }),
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", title: field.label !== field.key ? field.key : void 0, children: field.label }),
|
|
58
|
+
field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-destructive", children: "*" }),
|
|
59
|
+
field.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: field.badge })
|
|
58
60
|
] });
|
|
59
61
|
}
|
|
60
62
|
function fieldInputId(key, prefix) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json-schema-form-fields.cjs","sources":["../../src/components/json-schema-form-fields.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { formatDateTimeRelative } from \"../data/cells/Timestamp\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport { DateTimePicker } from \"./DateTimePicker\";\nimport { ArrayControl } from \"./json-schema-form-array\";\nimport { renderFieldNodes, renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport type {\n FieldControl,\n FieldOption,\n FormLayout,\n JsonSchemaObject,\n JsonSchemaProperty,\n} from \"./json-schema-form-types\";\nimport {\n controlHeightClass,\n controlMinHeightClass,\n fieldInnerGapClass,\n inputSizeClass,\n labelSizeClass,\n stackedRowGapClass,\n type FormSize,\n} from \"./json-schema-form-size\";\n\n// Non-size styling shared by every text-like input box; the size token supplies\n// height, horizontal padding, and text size (see inputSizeClass).\nconst INPUT_BASE =\n \"w-full min-w-0 rounded-md border border-input bg-background text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport function inputClass(size: FormSize): string {\n return cn(INPUT_BASE, inputSizeClass[size]);\n}\n\n// FieldWrapper lays out a label + value (+ helper/error) either inline (2-col)\n// or stacked, mirroring the convention used elsewhere in the library. In inline\n// mode the label and value columns are capped (see FormLayout); the grid\n// template is set inline because Tailwind can't interpolate runtime widths.\nexport function FieldWrapper({\n label,\n value,\n helper,\n error,\n layout,\n size,\n}: {\n label: ReactNode;\n value: ReactNode;\n helper?: ReactNode;\n error?: ReactNode;\n layout: FormLayout;\n size: FormSize;\n}) {\n if (layout.mode === \"inline\") {\n const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n const valueMaxWidth = layout.valueMaxWidth ?? \"400px\";\n return (\n <div\n className=\"grid items-start gap-x-3 gap-y-0.5\"\n style={{ gridTemplateColumns: `minmax(0, ${labelMaxWidth}) minmax(0, ${valueMaxWidth})` }}\n >\n <div className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n <div className=\"min-w-0\">{value}</div>\n {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\n </div>\n );\n }\n return (\n <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n {label}\n {value}\n {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"text-xs text-destructive\">{error}</p>}\n </div>\n );\n}\n\nexport function FieldLabel({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n return (\n <label htmlFor={fieldId} className={cn(\"flex items-center gap-2 font-medium\", labelSizeClass[size])}>\n <LabelIcon icon={field.labelIcon} className=\"text-[15px] text-muted-foreground\" />\n <span title={field.label !== field.key ? field.key : undefined}>{field.label}</span>\n {field.required && <span className=\"text-destructive\">*</span>}\n {field.badge && (\n <span className=\"rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n {field.badge}\n </span>\n )}\n </label>\n );\n}\n\nexport function fieldInputId(key: string, prefix?: string): string {\n const safe = key.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n return prefix ? `jsf-${prefix}-${safe}` : `jsf-${safe}`;\n}\n\n// renderValueControl produces just the value node for a field, dispatching on\n// its resolved kind. The RenderContext carries readOnly + the pre/post stacks so\n// container controls (array/object/map) can recurse with full context.\nexport function renderValueControl(field: FieldControl, ctx: RenderContext): ReactNode {\n const fieldId = fieldInputId(field.key, ctx.idPrefix);\n // A field the schema marks `readOnly` is never editable: it shows its current\n // value as plain text, not a disabled input. (The form-level ctx.readOnly,\n // below, instead disables the real controls so the structure stays visible.)\n // Containers (array/object/map) still render structurally so nested read-only\n // values surface; their own children resolve their own readOnly.\n if (field.readOnly && field.kind !== \"array\" && field.kind !== \"object\" && field.kind !== \"string-map\") {\n return <ReadOnlyValue field={field} fieldId={fieldId} size={ctx.size} />;\n }\n const readOnly = ctx.readOnly;\n const size = ctx.size;\n switch (field.kind) {\n case \"enum\":\n return <EnumControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"boolean\":\n return <BooleanControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"number\":\n return <NumberControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"date\":\n return <DateControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"array\":\n return <ArrayControl field={field} fieldId={fieldId} ctx={ctx} />;\n case \"object\":\n return <ObjectControl field={field} ctx={ctx} />;\n case \"string-map\":\n return <StringMapControl field={field} ctx={ctx} />;\n default:\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n }\n}\n\n// ReadOnlyValue renders a `readOnly` field's current value as static text — no\n// input, no border, just the value (date/date-time formatted human-readably).\n// An empty value shows an em-dash. Carries the same id + data-jsf-input as the\n// editable controls so layout and queries stay uniform.\nfunction ReadOnlyValue({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n const text = toText(field.value);\n const display = field.kind === \"date\" && text ? formatDateTimeRelative(text) : text;\n return (\n <span\n id={fieldId}\n data-jsf-input\n data-jsf-readonly\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {display || <span className=\"text-muted-foreground\">—</span>}\n </span>\n );\n}\n\nfunction StringControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n return (\n <input\n id={fieldId}\n type=\"text\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => field.onChange(e.target.value)}\n />\n );\n}\n\nfunction NumberControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // type=\"text\" (not number) so non-numeric values a consumer permits — e.g.\n // template tokens — are not silently dropped by the browser.\n return (\n <input\n id={fieldId}\n type=\"text\"\n inputMode=\"decimal\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => {\n const raw = e.target.value;\n const coerce = field.coerceNumber !== false;\n if (coerce && raw.trim() !== \"\" && Number.isFinite(Number(raw))) {\n field.onChange(Number(raw));\n } else {\n field.onChange(raw);\n }\n }}\n />\n );\n}\n\n// DateControl edits a `format: date`/`date-time` string. Read-only, it shows the\n// human-readable absolute + relative form (e.g. \"Apr 15, 2026, 12:00 PM (2h\n// ago)\"); editable, a DateTimePicker. The raw string is committed unchanged so a\n// consumer-permitted template token in the field is preserved.\nfunction DateControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const text = toText(field.value);\n if (readOnly) {\n return (\n <div\n id={fieldId}\n data-jsf-input\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {text ? formatDateTimeRelative(text) : <span className=\"text-muted-foreground\">—</span>}\n </div>\n );\n }\n return (\n <DateTimePicker\n id={fieldId}\n aria-label={field.label}\n data-jsf-input\n inputClassName={cn(inputClass(size), \"pr-8\")}\n value={text}\n onChange={(next) => field.onChange(next)}\n placeholder={defaultPlaceholder(field.schema)}\n />\n );\n}\n\nfunction BooleanControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // Only render a checkbox when the value is genuinely boolean (or unset).\n // A non-boolean value (e.g. a token a consumer left in place) renders as text\n // so it is preserved and editable.\n if (typeof field.value === \"boolean\" || field.value === undefined || field.value === null) {\n return (\n <div className={cn(\"flex items-center\", controlHeightClass[size])}>\n <input\n id={fieldId}\n type=\"checkbox\"\n className=\"h-4 w-4 accent-primary\"\n checked={field.value === true}\n disabled={readOnly}\n onChange={(e) => field.onChange(e.target.checked)}\n />\n </div>\n );\n }\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n}\n\nfunction EnumControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const value = toText(field.value);\n const options = withSyntheticValue(field.options ?? [], value);\n if (field.display === \"radio\") {\n return (\n <RadioGroupControl field={field} fieldId={fieldId} readOnly={readOnly} options={options} value={value} size={size} />\n );\n }\n return (\n <Combobox\n id={fieldId}\n options={options}\n value={value}\n disabled={readOnly}\n size={size}\n allowCustomValue={field.allowCustomValue ?? false}\n onChange={(v) => field.onChange(v)}\n {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n />\n );\n}\n\n// RadioGroupControl renders a small fixed enum as a segmented radio-button group\n// instead of a dropdown. It shares EnumControl's option list (any out-of-enum\n// value is already prepended, so a token still shows). One `radiogroup` role +\n// native radios keep it keyboard-navigable; the visible chip is a styled label.\nfunction RadioGroupControl({\n field,\n fieldId,\n readOnly,\n options,\n value,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n options: FieldOption[];\n value: string;\n size: FormSize;\n}) {\n return (\n <div\n role=\"radiogroup\"\n aria-label={field.label}\n id={fieldId}\n data-jsf-input\n className=\"inline-flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-0.5\"\n >\n {options.map((opt) => {\n const checked = opt.value === value;\n return (\n <label\n key={opt.value}\n className={cn(\n \"inline-flex cursor-pointer select-none items-center rounded px-2.5 py-1\",\n labelSizeClass[size],\n checked\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n readOnly && \"cursor-not-allowed opacity-60\",\n )}\n >\n <input\n type=\"radio\"\n name={fieldId}\n className=\"sr-only\"\n value={opt.value}\n checked={checked}\n disabled={readOnly}\n onChange={() => field.onChange(opt.value)}\n />\n {opt.label}\n </label>\n );\n })}\n </div>\n );\n}\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer, so pre/post extensions apply at this depth too.\nfunction ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const subSchema: JsonSchemaObject = {\n type: \"object\",\n properties: field.objectProperties ?? {},\n ...(field.objectRequired ? { required: field.objectRequired } : {}),\n ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n };\n // No border/box: nested objects render as flat headed sections (see\n // ObjectSection in renderFieldRow) rather than progressively indented\n // sub-forms, so deep schemas stay readable as a single column.\n // A read-only object marks its whole subtree non-editable: recurse with\n // form-level readOnly on so child inputs are disabled (and any child the\n // schema marks readOnly still renders as a value span).\n return (\n <div className={cn(\"grid\", stackedRowGapClass[ctx.size])}>\n {renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n ...ctx,\n readOnly: ctx.readOnly || field.readOnly === true,\n depth: ctx.depth + 1,\n })}\n </div>\n );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nfunction StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n // A read-only map marks its whole subtree non-editable: no rename/remove/add\n // and value inputs disabled.\n const readOnly = ctx.readOnly || field.readOnly === true;\n const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const known = field.knownProperties ?? {};\n const knownKeys = Object.keys(known);\n const extraKeys = Object.keys(map).filter((k) => !(k in known));\n const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n // valueSchemaForKey picks an entry's value schema: the first patternProperties\n // entry whose regex matches the key, else the `additionalProperties` schema,\n // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n function valueSchemaForKey(key: string): JsonSchemaProperty {\n for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n let re: RegExp | undefined;\n try {\n re = new RegExp(pattern);\n } catch {\n re = undefined; // a malformed pattern simply never matches\n }\n if (re?.test(key)) return schema;\n }\n return field.valueSchema ?? { type: \"string\" };\n }\n\n // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n // key+value render as one full-width stacked unit instead of a key column\n // beside the value. Resolved per key, since pattern schemas may differ.\n function entryIsStacked(key: string): boolean {\n return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n }\n\n function setEntry(key: string, next: unknown) {\n field.onChange({ ...map, [key]: next });\n }\n function renameEntry(oldKey: string, newKey: string) {\n if (newKey === oldKey) return;\n const next: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n field.onChange(next);\n }\n function removeEntry(key: string) {\n const next = { ...map };\n delete next[key];\n field.onChange(next);\n }\n function addEntry() {\n if (\"\" in map) return;\n field.onChange({ ...map, \"\": \"\" });\n }\n\n function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n const nodes = renderFieldNodes(\n {\n key,\n prop: valueSchema,\n required: false,\n value: map[key] ?? \"\",\n onChange: (next) => setEntry(key, next),\n },\n childCtx,\n );\n return nodes?.value ?? null;\n }\n\n // valueControlForKey resolves the per-key value schema (patternProperties /\n // additionalProperties) before rendering, so the form varies by key.\n function valueControlForKey(key: string): ReactNode {\n return valueControlFor(key, valueSchemaForKey(key));\n }\n\n return (\n <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n {knownKeys.map((key) => (\n <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n <label htmlFor={fieldInputId(key, childCtx.idPrefix)} className=\"truncate text-xs text-muted-foreground\" title={key}>\n {key}\n </label>\n <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n </div>\n ))}\n {extraKeys.map((key) => {\n const keyControl = field.keyOptions ? (\n <Combobox\n options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n value={key}\n disabled={readOnly}\n size={childCtx.size}\n allowCustomValue={false}\n onChange={(next) => renameEntry(key, next)}\n placeholder=\"Select…\"\n />\n ) : (\n <input\n type=\"text\"\n aria-label=\"Field name\"\n className={cn(inputClass(childCtx.size), \"font-mono\")}\n value={key}\n disabled={readOnly}\n onChange={(e) => renameEntry(key, e.target.value)}\n />\n );\n const removeButton = !readOnly ? (\n <button\n type=\"button\"\n aria-label={`Remove ${key}`}\n className=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n onClick={() => removeEntry(key)}\n >\n <Icon icon={UiTrash} className=\"text-sm\" />\n </button>\n ) : null;\n // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n // the key joins the stack: it sits full-width above its value as one\n // unit, rather than cramped in a fixed key column beside it.\n if (entryIsStacked(key)) {\n return (\n <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n <div className=\"flex items-center gap-2\">\n <div className=\"min-w-0 flex-1\">{keyControl}</div>\n {removeButton}\n </div>\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n </div>\n );\n }\n return (\n <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n {keyControl}\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n {removeButton}\n </div>\n );\n })}\n {!readOnly && field.allowExtraKeys !== false && (\n <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={addEntry} className=\"gap-1.5\">\n <Icon icon={UiAdd} className=\"text-sm\" />\n Add field\n </Button>\n )}\n </div>\n );\n}\n\nfunction withSyntheticValue(\n options: { value: string; label: string }[],\n value: string,\n): { value: string; label: string }[] {\n if (!value || options.some((o) => o.value === value)) return options;\n return [{ value, label: value }, ...options];\n}\n\n// keyPickerOptions narrows the map-key enum to keys not already used by another\n// entry, while always keeping this row's current key so it stays selectable.\nfunction keyPickerOptions(\n options: FieldOption[],\n usedKeys: string[],\n currentKey: string,\n): FieldOption[] {\n const taken = new Set(usedKeys.filter((k) => k !== currentKey));\n return options.filter((o) => !taken.has(o.value));\n}\n\nfunction toText(value: unknown): string {\n if (value === undefined || value === null) return \"\";\n if (typeof value === \"object\") return \"\";\n return String(value);\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nexport function defaultPlaceholder(schema: JsonSchemaProperty): string {\n if (schema.default != null && typeof schema.default !== \"object\") return String(schema.default);\n return \"\";\n}\n"],"names":["cn","inputSizeClass","jsxs","jsx","controlMinHeightClass","fieldInnerGapClass","labelSizeClass","LabelIcon","ArrayControl","formatDateTimeRelative","controlHeightClass","DateTimePicker","Combobox","stackedRowGapClass","renderObjectFields","renderFieldNodes","Icon","UiTrash","Button","UiAdd"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"json-schema-form-fields.cjs","sources":["../../src/components/json-schema-form-fields.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { formatDateTimeRelative } from \"../data/cells/Timestamp\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport { DateTimePicker } from \"./DateTimePicker\";\nimport { ArrayControl } from \"./json-schema-form-array\";\nimport { renderFieldNodes, renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport type {\n FieldControl,\n FieldOption,\n FormLayout,\n JsonSchemaObject,\n JsonSchemaProperty,\n} from \"./json-schema-form-types\";\nimport {\n controlHeightClass,\n controlMinHeightClass,\n fieldInnerGapClass,\n inputSizeClass,\n labelSizeClass,\n stackedRowGapClass,\n type FormSize,\n} from \"./json-schema-form-size\";\n\n// Non-size styling shared by every text-like input box; the size token supplies\n// height, horizontal padding, and text size (see inputSizeClass).\nconst INPUT_BASE =\n \"w-full min-w-0 rounded-md border border-input bg-background text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport function inputClass(size: FormSize): string {\n return cn(INPUT_BASE, inputSizeClass[size]);\n}\n\n// FieldWrapper lays out a label + value (+ helper/error) either inline (2-col)\n// or stacked, mirroring the convention used elsewhere in the library. In inline\n// mode the label column shrinks to fit its content but is capped/truncated at\n// labelMaxWidth, and the value column is capped at valueMaxWidth (see\n// FormLayout); the grid template is set inline because Tailwind can't\n// interpolate runtime widths.\nexport function FieldWrapper({\n label,\n value,\n helper,\n error,\n layout,\n size,\n}: {\n label: ReactNode;\n value: ReactNode;\n helper?: ReactNode;\n error?: ReactNode;\n layout: FormLayout;\n size: FormSize;\n}) {\n if (layout.mode === \"inline\") {\n const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n return (\n <div\n className=\"grid items-start gap-x-3 gap-y-0.5\"\n style={{\n gridTemplateColumns: `minmax(0, min(${labelMaxWidth}, max-content)) minmax(0, ${valueMaxWidth})`,\n }}\n >\n <div className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n <div className=\"min-w-0\">{value}</div>\n {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\n </div>\n );\n }\n return (\n <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n {label}\n {value}\n {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"text-xs text-destructive\">{error}</p>}\n </div>\n );\n}\n\nexport function FieldLabel({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n return (\n <label htmlFor={fieldId} className={cn(\"flex min-w-0 items-center gap-2 font-medium\", labelSizeClass[size])}>\n <LabelIcon icon={field.labelIcon} className=\"shrink-0 text-[15px] text-muted-foreground\" />\n <span className=\"truncate\" title={field.label !== field.key ? field.key : undefined}>\n {field.label}\n </span>\n {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n {field.badge && (\n <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n {field.badge}\n </span>\n )}\n </label>\n );\n}\n\nexport function fieldInputId(key: string, prefix?: string): string {\n const safe = key.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n return prefix ? `jsf-${prefix}-${safe}` : `jsf-${safe}`;\n}\n\n// renderValueControl produces just the value node for a field, dispatching on\n// its resolved kind. The RenderContext carries readOnly + the pre/post stacks so\n// container controls (array/object/map) can recurse with full context.\nexport function renderValueControl(field: FieldControl, ctx: RenderContext): ReactNode {\n const fieldId = fieldInputId(field.key, ctx.idPrefix);\n // A field the schema marks `readOnly` is never editable: it shows its current\n // value as plain text, not a disabled input. (The form-level ctx.readOnly,\n // below, instead disables the real controls so the structure stays visible.)\n // Containers (array/object/map) still render structurally so nested read-only\n // values surface; their own children resolve their own readOnly.\n if (field.readOnly && field.kind !== \"array\" && field.kind !== \"object\" && field.kind !== \"string-map\") {\n return <ReadOnlyValue field={field} fieldId={fieldId} size={ctx.size} />;\n }\n const readOnly = ctx.readOnly;\n const size = ctx.size;\n switch (field.kind) {\n case \"enum\":\n return <EnumControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"boolean\":\n return <BooleanControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"number\":\n return <NumberControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"date\":\n return <DateControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"array\":\n return <ArrayControl field={field} fieldId={fieldId} ctx={ctx} />;\n case \"object\":\n return <ObjectControl field={field} ctx={ctx} />;\n case \"string-map\":\n return <StringMapControl field={field} ctx={ctx} />;\n default:\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n }\n}\n\n// ReadOnlyValue renders a `readOnly` field's current value as static text — no\n// input, no border, just the value (date/date-time formatted human-readably).\n// An empty value shows an em-dash. Carries the same id + data-jsf-input as the\n// editable controls so layout and queries stay uniform.\nfunction ReadOnlyValue({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n const text = toText(field.value);\n const display = field.kind === \"date\" && text ? formatDateTimeRelative(text) : text;\n return (\n <span\n id={fieldId}\n data-jsf-input\n data-jsf-readonly\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {display || <span className=\"text-muted-foreground\">—</span>}\n </span>\n );\n}\n\nfunction StringControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n return (\n <input\n id={fieldId}\n type=\"text\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => field.onChange(e.target.value)}\n />\n );\n}\n\nfunction NumberControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // type=\"text\" (not number) so non-numeric values a consumer permits — e.g.\n // template tokens — are not silently dropped by the browser.\n return (\n <input\n id={fieldId}\n type=\"text\"\n inputMode=\"decimal\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => {\n const raw = e.target.value;\n const coerce = field.coerceNumber !== false;\n if (coerce && raw.trim() !== \"\" && Number.isFinite(Number(raw))) {\n field.onChange(Number(raw));\n } else {\n field.onChange(raw);\n }\n }}\n />\n );\n}\n\n// DateControl edits a `format: date`/`date-time` string. Read-only, it shows the\n// human-readable absolute + relative form (e.g. \"Apr 15, 2026, 12:00 PM (2h\n// ago)\"); editable, a DateTimePicker. The raw string is committed unchanged so a\n// consumer-permitted template token in the field is preserved.\nfunction DateControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const text = toText(field.value);\n if (readOnly) {\n return (\n <div\n id={fieldId}\n data-jsf-input\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {text ? formatDateTimeRelative(text) : <span className=\"text-muted-foreground\">—</span>}\n </div>\n );\n }\n return (\n <DateTimePicker\n id={fieldId}\n aria-label={field.label}\n data-jsf-input\n inputClassName={cn(inputClass(size), \"pr-8\")}\n value={text}\n onChange={(next) => field.onChange(next)}\n placeholder={defaultPlaceholder(field.schema)}\n />\n );\n}\n\nfunction BooleanControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // Only render a checkbox when the value is genuinely boolean (or unset).\n // A non-boolean value (e.g. a token a consumer left in place) renders as text\n // so it is preserved and editable.\n if (typeof field.value === \"boolean\" || field.value === undefined || field.value === null) {\n return (\n <div className={cn(\"flex items-center\", controlHeightClass[size])}>\n <input\n id={fieldId}\n type=\"checkbox\"\n className=\"h-4 w-4 accent-primary\"\n checked={field.value === true}\n disabled={readOnly}\n onChange={(e) => field.onChange(e.target.checked)}\n />\n </div>\n );\n }\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n}\n\nfunction EnumControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const value = toText(field.value);\n const options = withSyntheticValue(field.options ?? [], value);\n if (field.display === \"radio\") {\n return (\n <RadioGroupControl field={field} fieldId={fieldId} readOnly={readOnly} options={options} value={value} size={size} />\n );\n }\n return (\n <Combobox\n id={fieldId}\n options={options}\n value={value}\n disabled={readOnly}\n size={size}\n allowCustomValue={field.allowCustomValue ?? false}\n onChange={(v) => field.onChange(v)}\n {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n />\n );\n}\n\n// RadioGroupControl renders a small fixed enum as a segmented radio-button group\n// instead of a dropdown. It shares EnumControl's option list (any out-of-enum\n// value is already prepended, so a token still shows). One `radiogroup` role +\n// native radios keep it keyboard-navigable; the visible chip is a styled label.\nfunction RadioGroupControl({\n field,\n fieldId,\n readOnly,\n options,\n value,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n options: FieldOption[];\n value: string;\n size: FormSize;\n}) {\n return (\n <div\n role=\"radiogroup\"\n aria-label={field.label}\n id={fieldId}\n data-jsf-input\n className=\"inline-flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-0.5\"\n >\n {options.map((opt) => {\n const checked = opt.value === value;\n return (\n <label\n key={opt.value}\n className={cn(\n \"inline-flex cursor-pointer select-none items-center rounded px-2.5 py-1\",\n labelSizeClass[size],\n checked\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n readOnly && \"cursor-not-allowed opacity-60\",\n )}\n >\n <input\n type=\"radio\"\n name={fieldId}\n className=\"sr-only\"\n value={opt.value}\n checked={checked}\n disabled={readOnly}\n onChange={() => field.onChange(opt.value)}\n />\n {opt.label}\n </label>\n );\n })}\n </div>\n );\n}\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer, so pre/post extensions apply at this depth too.\nfunction ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const subSchema: JsonSchemaObject = {\n type: \"object\",\n properties: field.objectProperties ?? {},\n ...(field.objectRequired ? { required: field.objectRequired } : {}),\n ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n };\n // No border/box: nested objects render as flat headed sections (see\n // ObjectSection in renderFieldRow) rather than progressively indented\n // sub-forms, so deep schemas stay readable as a single column.\n // A read-only object marks its whole subtree non-editable: recurse with\n // form-level readOnly on so child inputs are disabled (and any child the\n // schema marks readOnly still renders as a value span).\n return (\n <div className={cn(\"grid\", stackedRowGapClass[ctx.size])}>\n {renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n ...ctx,\n readOnly: ctx.readOnly || field.readOnly === true,\n depth: ctx.depth + 1,\n })}\n </div>\n );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nfunction StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n // A read-only map marks its whole subtree non-editable: no rename/remove/add\n // and value inputs disabled.\n const readOnly = ctx.readOnly || field.readOnly === true;\n const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const known = field.knownProperties ?? {};\n const knownKeys = Object.keys(known);\n const extraKeys = Object.keys(map).filter((k) => !(k in known));\n const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n // valueSchemaForKey picks an entry's value schema: the first patternProperties\n // entry whose regex matches the key, else the `additionalProperties` schema,\n // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n function valueSchemaForKey(key: string): JsonSchemaProperty {\n for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n let re: RegExp | undefined;\n try {\n re = new RegExp(pattern);\n } catch {\n re = undefined; // a malformed pattern simply never matches\n }\n if (re?.test(key)) return schema;\n }\n return field.valueSchema ?? { type: \"string\" };\n }\n\n // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n // key+value render as one full-width stacked unit instead of a key column\n // beside the value. Resolved per key, since pattern schemas may differ.\n function entryIsStacked(key: string): boolean {\n return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n }\n\n function setEntry(key: string, next: unknown) {\n field.onChange({ ...map, [key]: next });\n }\n function renameEntry(oldKey: string, newKey: string) {\n if (newKey === oldKey) return;\n const next: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n field.onChange(next);\n }\n function removeEntry(key: string) {\n const next = { ...map };\n delete next[key];\n field.onChange(next);\n }\n function addEntry() {\n if (\"\" in map) return;\n field.onChange({ ...map, \"\": \"\" });\n }\n\n function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n const nodes = renderFieldNodes(\n {\n key,\n prop: valueSchema,\n required: false,\n value: map[key] ?? \"\",\n onChange: (next) => setEntry(key, next),\n },\n childCtx,\n );\n return nodes?.value ?? null;\n }\n\n // valueControlForKey resolves the per-key value schema (patternProperties /\n // additionalProperties) before rendering, so the form varies by key.\n function valueControlForKey(key: string): ReactNode {\n return valueControlFor(key, valueSchemaForKey(key));\n }\n\n return (\n <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n {knownKeys.map((key) => (\n <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n <label htmlFor={fieldInputId(key, childCtx.idPrefix)} className=\"truncate text-xs text-muted-foreground\" title={key}>\n {key}\n </label>\n <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n </div>\n ))}\n {extraKeys.map((key) => {\n const keyControl = field.keyOptions ? (\n <Combobox\n options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n value={key}\n disabled={readOnly}\n size={childCtx.size}\n allowCustomValue={false}\n onChange={(next) => renameEntry(key, next)}\n placeholder=\"Select…\"\n />\n ) : (\n <input\n type=\"text\"\n aria-label=\"Field name\"\n className={cn(inputClass(childCtx.size), \"font-mono\")}\n value={key}\n disabled={readOnly}\n onChange={(e) => renameEntry(key, e.target.value)}\n />\n );\n const removeButton = !readOnly ? (\n <button\n type=\"button\"\n aria-label={`Remove ${key}`}\n className=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n onClick={() => removeEntry(key)}\n >\n <Icon icon={UiTrash} className=\"text-sm\" />\n </button>\n ) : null;\n // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n // the key joins the stack: it sits full-width above its value as one\n // unit, rather than cramped in a fixed key column beside it.\n if (entryIsStacked(key)) {\n return (\n <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n <div className=\"flex items-center gap-2\">\n <div className=\"min-w-0 flex-1\">{keyControl}</div>\n {removeButton}\n </div>\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n </div>\n );\n }\n return (\n <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n {keyControl}\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n {removeButton}\n </div>\n );\n })}\n {!readOnly && field.allowExtraKeys !== false && (\n <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={addEntry} className=\"gap-1.5\">\n <Icon icon={UiAdd} className=\"text-sm\" />\n Add field\n </Button>\n )}\n </div>\n );\n}\n\nfunction withSyntheticValue(\n options: { value: string; label: string }[],\n value: string,\n): { value: string; label: string }[] {\n if (!value || options.some((o) => o.value === value)) return options;\n return [{ value, label: value }, ...options];\n}\n\n// keyPickerOptions narrows the map-key enum to keys not already used by another\n// entry, while always keeping this row's current key so it stays selectable.\nfunction keyPickerOptions(\n options: FieldOption[],\n usedKeys: string[],\n currentKey: string,\n): FieldOption[] {\n const taken = new Set(usedKeys.filter((k) => k !== currentKey));\n return options.filter((o) => !taken.has(o.value));\n}\n\nfunction toText(value: unknown): string {\n if (value === undefined || value === null) return \"\";\n if (typeof value === \"object\") return \"\";\n return String(value);\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nexport function defaultPlaceholder(schema: JsonSchemaProperty): string {\n if (schema.default != null && typeof schema.default !== \"object\") return String(schema.default);\n return \"\";\n}\n"],"names":["cn","inputSizeClass","jsxs","jsx","controlMinHeightClass","fieldInnerGapClass","labelSizeClass","LabelIcon","ArrayControl","formatDateTimeRelative","controlHeightClass","DateTimePicker","Combobox","stackedRowGapClass","renderObjectFields","renderFieldNodes","Icon","UiTrash","Button","UiAdd"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json-schema-form-fields.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,KAAK,EACV,YAAY,EAEZ,UAAU,EAEV,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAOL,KAAK,QAAQ,EACd,MAAM,yBAAyB,CAAC;AAOjC,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEjD;
|
|
1
|
+
{"version":3,"file":"json-schema-form-fields.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,KAAK,EACV,YAAY,EAEZ,UAAU,EAEV,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAOL,KAAK,QAAQ,EACd,MAAM,yBAAyB,CAAC;AAOjC,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEjD;AAQD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,GACL,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;CAChB,2CA0BA;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,2CAe5G;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAGjE;AAKD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,aAAa,GAAG,SAAS,CA8BrF;AAocD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAGrE"}
|
|
@@ -25,12 +25,14 @@ function FieldWrapper({
|
|
|
25
25
|
}) {
|
|
26
26
|
if (layout.mode === "inline") {
|
|
27
27
|
const labelMaxWidth = layout.labelMaxWidth ?? "40ch";
|
|
28
|
-
const valueMaxWidth = layout.valueMaxWidth ?? "
|
|
28
|
+
const valueMaxWidth = layout.valueMaxWidth ?? "600px";
|
|
29
29
|
return /* @__PURE__ */ jsxs(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
32
32
|
className: "grid items-start gap-x-3 gap-y-0.5",
|
|
33
|
-
style: {
|
|
33
|
+
style: {
|
|
34
|
+
gridTemplateColumns: `minmax(0, min(${labelMaxWidth}, max-content)) minmax(0, ${valueMaxWidth})`
|
|
35
|
+
},
|
|
34
36
|
children: [
|
|
35
37
|
/* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center", controlMinHeightClass[size]), children: label }),
|
|
36
38
|
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: value }),
|
|
@@ -48,11 +50,11 @@ function FieldWrapper({
|
|
|
48
50
|
] });
|
|
49
51
|
}
|
|
50
52
|
function FieldLabel({ field, fieldId, size }) {
|
|
51
|
-
return /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, className: cn("flex items-center gap-2 font-medium", labelSizeClass[size]), children: [
|
|
52
|
-
/* @__PURE__ */ jsx(LabelIcon, { icon: field.labelIcon, className: "text-[15px] text-muted-foreground" }),
|
|
53
|
-
/* @__PURE__ */ jsx("span", { title: field.label !== field.key ? field.key : void 0, children: field.label }),
|
|
54
|
-
field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
|
|
55
|
-
field.badge && /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: field.badge })
|
|
53
|
+
return /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, className: cn("flex min-w-0 items-center gap-2 font-medium", labelSizeClass[size]), children: [
|
|
54
|
+
/* @__PURE__ */ jsx(LabelIcon, { icon: field.labelIcon, className: "shrink-0 text-[15px] text-muted-foreground" }),
|
|
55
|
+
/* @__PURE__ */ jsx("span", { className: "truncate", title: field.label !== field.key ? field.key : void 0, children: field.label }),
|
|
56
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-destructive", children: "*" }),
|
|
57
|
+
field.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: field.badge })
|
|
56
58
|
] });
|
|
57
59
|
}
|
|
58
60
|
function fieldInputId(key, prefix) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json-schema-form-fields.js","sources":["../../src/components/json-schema-form-fields.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { formatDateTimeRelative } from \"../data/cells/Timestamp\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport { DateTimePicker } from \"./DateTimePicker\";\nimport { ArrayControl } from \"./json-schema-form-array\";\nimport { renderFieldNodes, renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport type {\n FieldControl,\n FieldOption,\n FormLayout,\n JsonSchemaObject,\n JsonSchemaProperty,\n} from \"./json-schema-form-types\";\nimport {\n controlHeightClass,\n controlMinHeightClass,\n fieldInnerGapClass,\n inputSizeClass,\n labelSizeClass,\n stackedRowGapClass,\n type FormSize,\n} from \"./json-schema-form-size\";\n\n// Non-size styling shared by every text-like input box; the size token supplies\n// height, horizontal padding, and text size (see inputSizeClass).\nconst INPUT_BASE =\n \"w-full min-w-0 rounded-md border border-input bg-background text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport function inputClass(size: FormSize): string {\n return cn(INPUT_BASE, inputSizeClass[size]);\n}\n\n// FieldWrapper lays out a label + value (+ helper/error) either inline (2-col)\n// or stacked, mirroring the convention used elsewhere in the library. In inline\n// mode the label and value columns are capped (see FormLayout); the grid\n// template is set inline because Tailwind can't interpolate runtime widths.\nexport function FieldWrapper({\n label,\n value,\n helper,\n error,\n layout,\n size,\n}: {\n label: ReactNode;\n value: ReactNode;\n helper?: ReactNode;\n error?: ReactNode;\n layout: FormLayout;\n size: FormSize;\n}) {\n if (layout.mode === \"inline\") {\n const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n const valueMaxWidth = layout.valueMaxWidth ?? \"400px\";\n return (\n <div\n className=\"grid items-start gap-x-3 gap-y-0.5\"\n style={{ gridTemplateColumns: `minmax(0, ${labelMaxWidth}) minmax(0, ${valueMaxWidth})` }}\n >\n <div className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n <div className=\"min-w-0\">{value}</div>\n {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\n </div>\n );\n }\n return (\n <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n {label}\n {value}\n {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"text-xs text-destructive\">{error}</p>}\n </div>\n );\n}\n\nexport function FieldLabel({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n return (\n <label htmlFor={fieldId} className={cn(\"flex items-center gap-2 font-medium\", labelSizeClass[size])}>\n <LabelIcon icon={field.labelIcon} className=\"text-[15px] text-muted-foreground\" />\n <span title={field.label !== field.key ? field.key : undefined}>{field.label}</span>\n {field.required && <span className=\"text-destructive\">*</span>}\n {field.badge && (\n <span className=\"rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n {field.badge}\n </span>\n )}\n </label>\n );\n}\n\nexport function fieldInputId(key: string, prefix?: string): string {\n const safe = key.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n return prefix ? `jsf-${prefix}-${safe}` : `jsf-${safe}`;\n}\n\n// renderValueControl produces just the value node for a field, dispatching on\n// its resolved kind. The RenderContext carries readOnly + the pre/post stacks so\n// container controls (array/object/map) can recurse with full context.\nexport function renderValueControl(field: FieldControl, ctx: RenderContext): ReactNode {\n const fieldId = fieldInputId(field.key, ctx.idPrefix);\n // A field the schema marks `readOnly` is never editable: it shows its current\n // value as plain text, not a disabled input. (The form-level ctx.readOnly,\n // below, instead disables the real controls so the structure stays visible.)\n // Containers (array/object/map) still render structurally so nested read-only\n // values surface; their own children resolve their own readOnly.\n if (field.readOnly && field.kind !== \"array\" && field.kind !== \"object\" && field.kind !== \"string-map\") {\n return <ReadOnlyValue field={field} fieldId={fieldId} size={ctx.size} />;\n }\n const readOnly = ctx.readOnly;\n const size = ctx.size;\n switch (field.kind) {\n case \"enum\":\n return <EnumControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"boolean\":\n return <BooleanControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"number\":\n return <NumberControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"date\":\n return <DateControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"array\":\n return <ArrayControl field={field} fieldId={fieldId} ctx={ctx} />;\n case \"object\":\n return <ObjectControl field={field} ctx={ctx} />;\n case \"string-map\":\n return <StringMapControl field={field} ctx={ctx} />;\n default:\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n }\n}\n\n// ReadOnlyValue renders a `readOnly` field's current value as static text — no\n// input, no border, just the value (date/date-time formatted human-readably).\n// An empty value shows an em-dash. Carries the same id + data-jsf-input as the\n// editable controls so layout and queries stay uniform.\nfunction ReadOnlyValue({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n const text = toText(field.value);\n const display = field.kind === \"date\" && text ? formatDateTimeRelative(text) : text;\n return (\n <span\n id={fieldId}\n data-jsf-input\n data-jsf-readonly\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {display || <span className=\"text-muted-foreground\">—</span>}\n </span>\n );\n}\n\nfunction StringControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n return (\n <input\n id={fieldId}\n type=\"text\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => field.onChange(e.target.value)}\n />\n );\n}\n\nfunction NumberControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // type=\"text\" (not number) so non-numeric values a consumer permits — e.g.\n // template tokens — are not silently dropped by the browser.\n return (\n <input\n id={fieldId}\n type=\"text\"\n inputMode=\"decimal\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => {\n const raw = e.target.value;\n const coerce = field.coerceNumber !== false;\n if (coerce && raw.trim() !== \"\" && Number.isFinite(Number(raw))) {\n field.onChange(Number(raw));\n } else {\n field.onChange(raw);\n }\n }}\n />\n );\n}\n\n// DateControl edits a `format: date`/`date-time` string. Read-only, it shows the\n// human-readable absolute + relative form (e.g. \"Apr 15, 2026, 12:00 PM (2h\n// ago)\"); editable, a DateTimePicker. The raw string is committed unchanged so a\n// consumer-permitted template token in the field is preserved.\nfunction DateControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const text = toText(field.value);\n if (readOnly) {\n return (\n <div\n id={fieldId}\n data-jsf-input\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {text ? formatDateTimeRelative(text) : <span className=\"text-muted-foreground\">—</span>}\n </div>\n );\n }\n return (\n <DateTimePicker\n id={fieldId}\n aria-label={field.label}\n data-jsf-input\n inputClassName={cn(inputClass(size), \"pr-8\")}\n value={text}\n onChange={(next) => field.onChange(next)}\n placeholder={defaultPlaceholder(field.schema)}\n />\n );\n}\n\nfunction BooleanControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // Only render a checkbox when the value is genuinely boolean (or unset).\n // A non-boolean value (e.g. a token a consumer left in place) renders as text\n // so it is preserved and editable.\n if (typeof field.value === \"boolean\" || field.value === undefined || field.value === null) {\n return (\n <div className={cn(\"flex items-center\", controlHeightClass[size])}>\n <input\n id={fieldId}\n type=\"checkbox\"\n className=\"h-4 w-4 accent-primary\"\n checked={field.value === true}\n disabled={readOnly}\n onChange={(e) => field.onChange(e.target.checked)}\n />\n </div>\n );\n }\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n}\n\nfunction EnumControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const value = toText(field.value);\n const options = withSyntheticValue(field.options ?? [], value);\n if (field.display === \"radio\") {\n return (\n <RadioGroupControl field={field} fieldId={fieldId} readOnly={readOnly} options={options} value={value} size={size} />\n );\n }\n return (\n <Combobox\n id={fieldId}\n options={options}\n value={value}\n disabled={readOnly}\n size={size}\n allowCustomValue={field.allowCustomValue ?? false}\n onChange={(v) => field.onChange(v)}\n {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n />\n );\n}\n\n// RadioGroupControl renders a small fixed enum as a segmented radio-button group\n// instead of a dropdown. It shares EnumControl's option list (any out-of-enum\n// value is already prepended, so a token still shows). One `radiogroup` role +\n// native radios keep it keyboard-navigable; the visible chip is a styled label.\nfunction RadioGroupControl({\n field,\n fieldId,\n readOnly,\n options,\n value,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n options: FieldOption[];\n value: string;\n size: FormSize;\n}) {\n return (\n <div\n role=\"radiogroup\"\n aria-label={field.label}\n id={fieldId}\n data-jsf-input\n className=\"inline-flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-0.5\"\n >\n {options.map((opt) => {\n const checked = opt.value === value;\n return (\n <label\n key={opt.value}\n className={cn(\n \"inline-flex cursor-pointer select-none items-center rounded px-2.5 py-1\",\n labelSizeClass[size],\n checked\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n readOnly && \"cursor-not-allowed opacity-60\",\n )}\n >\n <input\n type=\"radio\"\n name={fieldId}\n className=\"sr-only\"\n value={opt.value}\n checked={checked}\n disabled={readOnly}\n onChange={() => field.onChange(opt.value)}\n />\n {opt.label}\n </label>\n );\n })}\n </div>\n );\n}\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer, so pre/post extensions apply at this depth too.\nfunction ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const subSchema: JsonSchemaObject = {\n type: \"object\",\n properties: field.objectProperties ?? {},\n ...(field.objectRequired ? { required: field.objectRequired } : {}),\n ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n };\n // No border/box: nested objects render as flat headed sections (see\n // ObjectSection in renderFieldRow) rather than progressively indented\n // sub-forms, so deep schemas stay readable as a single column.\n // A read-only object marks its whole subtree non-editable: recurse with\n // form-level readOnly on so child inputs are disabled (and any child the\n // schema marks readOnly still renders as a value span).\n return (\n <div className={cn(\"grid\", stackedRowGapClass[ctx.size])}>\n {renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n ...ctx,\n readOnly: ctx.readOnly || field.readOnly === true,\n depth: ctx.depth + 1,\n })}\n </div>\n );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nfunction StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n // A read-only map marks its whole subtree non-editable: no rename/remove/add\n // and value inputs disabled.\n const readOnly = ctx.readOnly || field.readOnly === true;\n const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const known = field.knownProperties ?? {};\n const knownKeys = Object.keys(known);\n const extraKeys = Object.keys(map).filter((k) => !(k in known));\n const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n // valueSchemaForKey picks an entry's value schema: the first patternProperties\n // entry whose regex matches the key, else the `additionalProperties` schema,\n // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n function valueSchemaForKey(key: string): JsonSchemaProperty {\n for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n let re: RegExp | undefined;\n try {\n re = new RegExp(pattern);\n } catch {\n re = undefined; // a malformed pattern simply never matches\n }\n if (re?.test(key)) return schema;\n }\n return field.valueSchema ?? { type: \"string\" };\n }\n\n // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n // key+value render as one full-width stacked unit instead of a key column\n // beside the value. Resolved per key, since pattern schemas may differ.\n function entryIsStacked(key: string): boolean {\n return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n }\n\n function setEntry(key: string, next: unknown) {\n field.onChange({ ...map, [key]: next });\n }\n function renameEntry(oldKey: string, newKey: string) {\n if (newKey === oldKey) return;\n const next: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n field.onChange(next);\n }\n function removeEntry(key: string) {\n const next = { ...map };\n delete next[key];\n field.onChange(next);\n }\n function addEntry() {\n if (\"\" in map) return;\n field.onChange({ ...map, \"\": \"\" });\n }\n\n function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n const nodes = renderFieldNodes(\n {\n key,\n prop: valueSchema,\n required: false,\n value: map[key] ?? \"\",\n onChange: (next) => setEntry(key, next),\n },\n childCtx,\n );\n return nodes?.value ?? null;\n }\n\n // valueControlForKey resolves the per-key value schema (patternProperties /\n // additionalProperties) before rendering, so the form varies by key.\n function valueControlForKey(key: string): ReactNode {\n return valueControlFor(key, valueSchemaForKey(key));\n }\n\n return (\n <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n {knownKeys.map((key) => (\n <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n <label htmlFor={fieldInputId(key, childCtx.idPrefix)} className=\"truncate text-xs text-muted-foreground\" title={key}>\n {key}\n </label>\n <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n </div>\n ))}\n {extraKeys.map((key) => {\n const keyControl = field.keyOptions ? (\n <Combobox\n options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n value={key}\n disabled={readOnly}\n size={childCtx.size}\n allowCustomValue={false}\n onChange={(next) => renameEntry(key, next)}\n placeholder=\"Select…\"\n />\n ) : (\n <input\n type=\"text\"\n aria-label=\"Field name\"\n className={cn(inputClass(childCtx.size), \"font-mono\")}\n value={key}\n disabled={readOnly}\n onChange={(e) => renameEntry(key, e.target.value)}\n />\n );\n const removeButton = !readOnly ? (\n <button\n type=\"button\"\n aria-label={`Remove ${key}`}\n className=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n onClick={() => removeEntry(key)}\n >\n <Icon icon={UiTrash} className=\"text-sm\" />\n </button>\n ) : null;\n // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n // the key joins the stack: it sits full-width above its value as one\n // unit, rather than cramped in a fixed key column beside it.\n if (entryIsStacked(key)) {\n return (\n <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n <div className=\"flex items-center gap-2\">\n <div className=\"min-w-0 flex-1\">{keyControl}</div>\n {removeButton}\n </div>\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n </div>\n );\n }\n return (\n <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n {keyControl}\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n {removeButton}\n </div>\n );\n })}\n {!readOnly && field.allowExtraKeys !== false && (\n <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={addEntry} className=\"gap-1.5\">\n <Icon icon={UiAdd} className=\"text-sm\" />\n Add field\n </Button>\n )}\n </div>\n );\n}\n\nfunction withSyntheticValue(\n options: { value: string; label: string }[],\n value: string,\n): { value: string; label: string }[] {\n if (!value || options.some((o) => o.value === value)) return options;\n return [{ value, label: value }, ...options];\n}\n\n// keyPickerOptions narrows the map-key enum to keys not already used by another\n// entry, while always keeping this row's current key so it stays selectable.\nfunction keyPickerOptions(\n options: FieldOption[],\n usedKeys: string[],\n currentKey: string,\n): FieldOption[] {\n const taken = new Set(usedKeys.filter((k) => k !== currentKey));\n return options.filter((o) => !taken.has(o.value));\n}\n\nfunction toText(value: unknown): string {\n if (value === undefined || value === null) return \"\";\n if (typeof value === \"object\") return \"\";\n return String(value);\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nexport function defaultPlaceholder(schema: JsonSchemaProperty): string {\n if (schema.default != null && typeof schema.default !== \"object\") return String(schema.default);\n return \"\";\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"json-schema-form-fields.js","sources":["../../src/components/json-schema-form-fields.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { formatDateTimeRelative } from \"../data/cells/Timestamp\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport { DateTimePicker } from \"./DateTimePicker\";\nimport { ArrayControl } from \"./json-schema-form-array\";\nimport { renderFieldNodes, renderObjectFields, type RenderContext } from \"./json-schema-form-render\";\nimport type {\n FieldControl,\n FieldOption,\n FormLayout,\n JsonSchemaObject,\n JsonSchemaProperty,\n} from \"./json-schema-form-types\";\nimport {\n controlHeightClass,\n controlMinHeightClass,\n fieldInnerGapClass,\n inputSizeClass,\n labelSizeClass,\n stackedRowGapClass,\n type FormSize,\n} from \"./json-schema-form-size\";\n\n// Non-size styling shared by every text-like input box; the size token supplies\n// height, horizontal padding, and text size (see inputSizeClass).\nconst INPUT_BASE =\n \"w-full min-w-0 rounded-md border border-input bg-background text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport function inputClass(size: FormSize): string {\n return cn(INPUT_BASE, inputSizeClass[size]);\n}\n\n// FieldWrapper lays out a label + value (+ helper/error) either inline (2-col)\n// or stacked, mirroring the convention used elsewhere in the library. In inline\n// mode the label column shrinks to fit its content but is capped/truncated at\n// labelMaxWidth, and the value column is capped at valueMaxWidth (see\n// FormLayout); the grid template is set inline because Tailwind can't\n// interpolate runtime widths.\nexport function FieldWrapper({\n label,\n value,\n helper,\n error,\n layout,\n size,\n}: {\n label: ReactNode;\n value: ReactNode;\n helper?: ReactNode;\n error?: ReactNode;\n layout: FormLayout;\n size: FormSize;\n}) {\n if (layout.mode === \"inline\") {\n const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n return (\n <div\n className=\"grid items-start gap-x-3 gap-y-0.5\"\n style={{\n gridTemplateColumns: `minmax(0, min(${labelMaxWidth}, max-content)) minmax(0, ${valueMaxWidth})`,\n }}\n >\n <div className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n <div className=\"min-w-0\">{value}</div>\n {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\n </div>\n );\n }\n return (\n <div className={cn(\"flex flex-col\", fieldInnerGapClass[size])}>\n {label}\n {value}\n {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n {error && <p className=\"text-xs text-destructive\">{error}</p>}\n </div>\n );\n}\n\nexport function FieldLabel({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n return (\n <label htmlFor={fieldId} className={cn(\"flex min-w-0 items-center gap-2 font-medium\", labelSizeClass[size])}>\n <LabelIcon icon={field.labelIcon} className=\"shrink-0 text-[15px] text-muted-foreground\" />\n <span className=\"truncate\" title={field.label !== field.key ? field.key : undefined}>\n {field.label}\n </span>\n {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n {field.badge && (\n <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n {field.badge}\n </span>\n )}\n </label>\n );\n}\n\nexport function fieldInputId(key: string, prefix?: string): string {\n const safe = key.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n return prefix ? `jsf-${prefix}-${safe}` : `jsf-${safe}`;\n}\n\n// renderValueControl produces just the value node for a field, dispatching on\n// its resolved kind. The RenderContext carries readOnly + the pre/post stacks so\n// container controls (array/object/map) can recurse with full context.\nexport function renderValueControl(field: FieldControl, ctx: RenderContext): ReactNode {\n const fieldId = fieldInputId(field.key, ctx.idPrefix);\n // A field the schema marks `readOnly` is never editable: it shows its current\n // value as plain text, not a disabled input. (The form-level ctx.readOnly,\n // below, instead disables the real controls so the structure stays visible.)\n // Containers (array/object/map) still render structurally so nested read-only\n // values surface; their own children resolve their own readOnly.\n if (field.readOnly && field.kind !== \"array\" && field.kind !== \"object\" && field.kind !== \"string-map\") {\n return <ReadOnlyValue field={field} fieldId={fieldId} size={ctx.size} />;\n }\n const readOnly = ctx.readOnly;\n const size = ctx.size;\n switch (field.kind) {\n case \"enum\":\n return <EnumControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"boolean\":\n return <BooleanControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"number\":\n return <NumberControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"date\":\n return <DateControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n case \"array\":\n return <ArrayControl field={field} fieldId={fieldId} ctx={ctx} />;\n case \"object\":\n return <ObjectControl field={field} ctx={ctx} />;\n case \"string-map\":\n return <StringMapControl field={field} ctx={ctx} />;\n default:\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n }\n}\n\n// ReadOnlyValue renders a `readOnly` field's current value as static text — no\n// input, no border, just the value (date/date-time formatted human-readably).\n// An empty value shows an em-dash. Carries the same id + data-jsf-input as the\n// editable controls so layout and queries stay uniform.\nfunction ReadOnlyValue({ field, fieldId, size }: { field: FieldControl; fieldId: string; size: FormSize }) {\n const text = toText(field.value);\n const display = field.kind === \"date\" && text ? formatDateTimeRelative(text) : text;\n return (\n <span\n id={fieldId}\n data-jsf-input\n data-jsf-readonly\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {display || <span className=\"text-muted-foreground\">—</span>}\n </span>\n );\n}\n\nfunction StringControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n return (\n <input\n id={fieldId}\n type=\"text\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => field.onChange(e.target.value)}\n />\n );\n}\n\nfunction NumberControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // type=\"text\" (not number) so non-numeric values a consumer permits — e.g.\n // template tokens — are not silently dropped by the browser.\n return (\n <input\n id={fieldId}\n type=\"text\"\n inputMode=\"decimal\"\n data-jsf-input\n className={inputClass(size)}\n value={toText(field.value)}\n disabled={readOnly}\n placeholder={defaultPlaceholder(field.schema)}\n onChange={(e) => {\n const raw = e.target.value;\n const coerce = field.coerceNumber !== false;\n if (coerce && raw.trim() !== \"\" && Number.isFinite(Number(raw))) {\n field.onChange(Number(raw));\n } else {\n field.onChange(raw);\n }\n }}\n />\n );\n}\n\n// DateControl edits a `format: date`/`date-time` string. Read-only, it shows the\n// human-readable absolute + relative form (e.g. \"Apr 15, 2026, 12:00 PM (2h\n// ago)\"); editable, a DateTimePicker. The raw string is committed unchanged so a\n// consumer-permitted template token in the field is preserved.\nfunction DateControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const text = toText(field.value);\n if (readOnly) {\n return (\n <div\n id={fieldId}\n data-jsf-input\n className={cn(\"flex items-center text-foreground\", controlHeightClass[size], labelSizeClass[size])}\n title={text || undefined}\n >\n {text ? formatDateTimeRelative(text) : <span className=\"text-muted-foreground\">—</span>}\n </div>\n );\n }\n return (\n <DateTimePicker\n id={fieldId}\n aria-label={field.label}\n data-jsf-input\n inputClassName={cn(inputClass(size), \"pr-8\")}\n value={text}\n onChange={(next) => field.onChange(next)}\n placeholder={defaultPlaceholder(field.schema)}\n />\n );\n}\n\nfunction BooleanControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n // Only render a checkbox when the value is genuinely boolean (or unset).\n // A non-boolean value (e.g. a token a consumer left in place) renders as text\n // so it is preserved and editable.\n if (typeof field.value === \"boolean\" || field.value === undefined || field.value === null) {\n return (\n <div className={cn(\"flex items-center\", controlHeightClass[size])}>\n <input\n id={fieldId}\n type=\"checkbox\"\n className=\"h-4 w-4 accent-primary\"\n checked={field.value === true}\n disabled={readOnly}\n onChange={(e) => field.onChange(e.target.checked)}\n />\n </div>\n );\n }\n return <StringControl field={field} fieldId={fieldId} readOnly={readOnly} size={size} />;\n}\n\nfunction EnumControl({\n field,\n fieldId,\n readOnly,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n size: FormSize;\n}) {\n const value = toText(field.value);\n const options = withSyntheticValue(field.options ?? [], value);\n if (field.display === \"radio\") {\n return (\n <RadioGroupControl field={field} fieldId={fieldId} readOnly={readOnly} options={options} value={value} size={size} />\n );\n }\n return (\n <Combobox\n id={fieldId}\n options={options}\n value={value}\n disabled={readOnly}\n size={size}\n allowCustomValue={field.allowCustomValue ?? false}\n onChange={(v) => field.onChange(v)}\n {...(defaultPlaceholder(field.schema) ? { placeholder: defaultPlaceholder(field.schema) } : {})}\n />\n );\n}\n\n// RadioGroupControl renders a small fixed enum as a segmented radio-button group\n// instead of a dropdown. It shares EnumControl's option list (any out-of-enum\n// value is already prepended, so a token still shows). One `radiogroup` role +\n// native radios keep it keyboard-navigable; the visible chip is a styled label.\nfunction RadioGroupControl({\n field,\n fieldId,\n readOnly,\n options,\n value,\n size,\n}: {\n field: FieldControl;\n fieldId: string;\n readOnly: boolean;\n options: FieldOption[];\n value: string;\n size: FormSize;\n}) {\n return (\n <div\n role=\"radiogroup\"\n aria-label={field.label}\n id={fieldId}\n data-jsf-input\n className=\"inline-flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-0.5\"\n >\n {options.map((opt) => {\n const checked = opt.value === value;\n return (\n <label\n key={opt.value}\n className={cn(\n \"inline-flex cursor-pointer select-none items-center rounded px-2.5 py-1\",\n labelSizeClass[size],\n checked\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n readOnly && \"cursor-not-allowed opacity-60\",\n )}\n >\n <input\n type=\"radio\"\n name={fieldId}\n className=\"sr-only\"\n value={opt.value}\n checked={checked}\n disabled={readOnly}\n onChange={() => field.onChange(opt.value)}\n />\n {opt.label}\n </label>\n );\n })}\n </div>\n );\n}\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer, so pre/post extensions apply at this depth too.\nfunction ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const subSchema: JsonSchemaObject = {\n type: \"object\",\n properties: field.objectProperties ?? {},\n ...(field.objectRequired ? { required: field.objectRequired } : {}),\n ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n };\n // No border/box: nested objects render as flat headed sections (see\n // ObjectSection in renderFieldRow) rather than progressively indented\n // sub-forms, so deep schemas stay readable as a single column.\n // A read-only object marks its whole subtree non-editable: recurse with\n // form-level readOnly on so child inputs are disabled (and any child the\n // schema marks readOnly still renders as a value span).\n return (\n <div className={cn(\"grid\", stackedRowGapClass[ctx.size])}>\n {renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n ...ctx,\n readOnly: ctx.readOnly || field.readOnly === true,\n depth: ctx.depth + 1,\n })}\n </div>\n );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nfunction StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n // A read-only map marks its whole subtree non-editable: no rename/remove/add\n // and value inputs disabled.\n const readOnly = ctx.readOnly || field.readOnly === true;\n const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n const known = field.knownProperties ?? {};\n const knownKeys = Object.keys(known);\n const extraKeys = Object.keys(map).filter((k) => !(k in known));\n const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n // valueSchemaForKey picks an entry's value schema: the first patternProperties\n // entry whose regex matches the key, else the `additionalProperties` schema,\n // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n function valueSchemaForKey(key: string): JsonSchemaProperty {\n for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n let re: RegExp | undefined;\n try {\n re = new RegExp(pattern);\n } catch {\n re = undefined; // a malformed pattern simply never matches\n }\n if (re?.test(key)) return schema;\n }\n return field.valueSchema ?? { type: \"string\" };\n }\n\n // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n // key+value render as one full-width stacked unit instead of a key column\n // beside the value. Resolved per key, since pattern schemas may differ.\n function entryIsStacked(key: string): boolean {\n return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n }\n\n function setEntry(key: string, next: unknown) {\n field.onChange({ ...map, [key]: next });\n }\n function renameEntry(oldKey: string, newKey: string) {\n if (newKey === oldKey) return;\n const next: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n field.onChange(next);\n }\n function removeEntry(key: string) {\n const next = { ...map };\n delete next[key];\n field.onChange(next);\n }\n function addEntry() {\n if (\"\" in map) return;\n field.onChange({ ...map, \"\": \"\" });\n }\n\n function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n const nodes = renderFieldNodes(\n {\n key,\n prop: valueSchema,\n required: false,\n value: map[key] ?? \"\",\n onChange: (next) => setEntry(key, next),\n },\n childCtx,\n );\n return nodes?.value ?? null;\n }\n\n // valueControlForKey resolves the per-key value schema (patternProperties /\n // additionalProperties) before rendering, so the form varies by key.\n function valueControlForKey(key: string): ReactNode {\n return valueControlFor(key, valueSchemaForKey(key));\n }\n\n return (\n <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n {knownKeys.map((key) => (\n <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n <label htmlFor={fieldInputId(key, childCtx.idPrefix)} className=\"truncate text-xs text-muted-foreground\" title={key}>\n {key}\n </label>\n <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n </div>\n ))}\n {extraKeys.map((key) => {\n const keyControl = field.keyOptions ? (\n <Combobox\n options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n value={key}\n disabled={readOnly}\n size={childCtx.size}\n allowCustomValue={false}\n onChange={(next) => renameEntry(key, next)}\n placeholder=\"Select…\"\n />\n ) : (\n <input\n type=\"text\"\n aria-label=\"Field name\"\n className={cn(inputClass(childCtx.size), \"font-mono\")}\n value={key}\n disabled={readOnly}\n onChange={(e) => renameEntry(key, e.target.value)}\n />\n );\n const removeButton = !readOnly ? (\n <button\n type=\"button\"\n aria-label={`Remove ${key}`}\n className=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\"\n onClick={() => removeEntry(key)}\n >\n <Icon icon={UiTrash} className=\"text-sm\" />\n </button>\n ) : null;\n // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n // the key joins the stack: it sits full-width above its value as one\n // unit, rather than cramped in a fixed key column beside it.\n if (entryIsStacked(key)) {\n return (\n <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n <div className=\"flex items-center gap-2\">\n <div className=\"min-w-0 flex-1\">{keyControl}</div>\n {removeButton}\n </div>\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n </div>\n );\n }\n return (\n <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n {keyControl}\n <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n {removeButton}\n </div>\n );\n })}\n {!readOnly && field.allowExtraKeys !== false && (\n <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={addEntry} className=\"gap-1.5\">\n <Icon icon={UiAdd} className=\"text-sm\" />\n Add field\n </Button>\n )}\n </div>\n );\n}\n\nfunction withSyntheticValue(\n options: { value: string; label: string }[],\n value: string,\n): { value: string; label: string }[] {\n if (!value || options.some((o) => o.value === value)) return options;\n return [{ value, label: value }, ...options];\n}\n\n// keyPickerOptions narrows the map-key enum to keys not already used by another\n// entry, while always keeping this row's current key so it stays selectable.\nfunction keyPickerOptions(\n options: FieldOption[],\n usedKeys: string[],\n currentKey: string,\n): FieldOption[] {\n const taken = new Set(usedKeys.filter((k) => k !== currentKey));\n return options.filter((o) => !taken.has(o.value));\n}\n\nfunction toText(value: unknown): string {\n if (value === undefined || value === null) return \"\";\n if (typeof value === \"object\") return \"\";\n return String(value);\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nexport function defaultPlaceholder(schema: JsonSchemaProperty): string {\n if (schema.default != null && typeof schema.default !== \"object\") return String(schema.default);\n return \"\";\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -92,9 +92,12 @@ export type PostExtension = (field: FieldControl, nodes: {
|
|
|
92
92
|
export interface FormLayout {
|
|
93
93
|
/** "inline" = 2-column label/value; "stacked" = label above value. */
|
|
94
94
|
mode: "inline" | "stacked";
|
|
95
|
-
/**
|
|
95
|
+
/**
|
|
96
|
+
* Inline only: the label column shrinks to fit its widest label and is capped
|
|
97
|
+
* at this width, truncating longer labels with an ellipsis. Default "40ch".
|
|
98
|
+
*/
|
|
96
99
|
labelMaxWidth?: string;
|
|
97
|
-
/** Inline only: max width of the value column (CSS length). Default "
|
|
100
|
+
/** Inline only: max width of the value column (CSS length). Default "600px". */
|
|
98
101
|
valueMaxWidth?: string;
|
|
99
102
|
}
|
|
100
103
|
export interface JsonSchemaFormProps {
|
|
@@ -108,8 +111,9 @@ export interface JsonSchemaFormProps {
|
|
|
108
111
|
*/
|
|
109
112
|
inline?: boolean;
|
|
110
113
|
/**
|
|
111
|
-
* Form-level layout. Takes precedence over `inline`. Inline mode
|
|
112
|
-
* label column (
|
|
114
|
+
* Form-level layout. Takes precedence over `inline`. Inline mode shrinks the
|
|
115
|
+
* label column to fit (capped/truncated at 40ch) and caps the value column at
|
|
116
|
+
* 600px.
|
|
113
117
|
*/
|
|
114
118
|
layout?: FormLayout;
|
|
115
119
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json-schema-form-types.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB,oBAAoB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAKpD,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAKhC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,EAAE,CAAC,EAAE,kBAAkB,CAAC;IACxB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,cAAc,GACtB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAKX,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,kBAAkB,CAAC;IACxB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAKD,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IACpD,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;CACjC;AAED,MAAM,MAAM,gBAAgB,GACxB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,MAAM,GACN,YAAY,GACZ,OAAO,GACP,QAAQ,CAAC;AAIb,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAM/C,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAMlC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAG1B,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAGxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAG3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAIjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAGlC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAIjC,mBAAmB,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,kBAAkB,CAAA;KAAE,EAAE,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IAIzB,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAM3B,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IAGtC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAGhC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAID,MAAM,MAAM,YAAY,GAAG,CACzB,KAAK,EAAE,YAAY,EACnB,GAAG,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,KAC3D,YAAY,GAAG,IAAI,CAAC;AAIzB,MAAM,MAAM,aAAa,GAAG,CAC1B,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,KAC1C;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC;AAK5C,MAAM,WAAW,UAAU;IACzB,sEAAsE;IACtE,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B
|
|
1
|
+
{"version":3,"file":"json-schema-form-types.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-types.ts"],"names":[],"mappings":"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"}
|
package/dist/data/LogDetails.cjs
CHANGED
|
@@ -8,6 +8,8 @@ const TagList = require("./cells/TagList.cjs");
|
|
|
8
8
|
const propertiesUtils = require("./properties-utils.cjs");
|
|
9
9
|
const logUtils = require("./log-utils.cjs");
|
|
10
10
|
const UiCopy = require("../icons/components/UiCopy.cjs");
|
|
11
|
+
const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
|
|
12
|
+
const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
|
|
11
13
|
const UiZoomIn = require("../icons/components/UiZoomIn.cjs");
|
|
12
14
|
const UiZoomOut = require("../icons/components/UiZoomOut.cjs");
|
|
13
15
|
const TAGS_PATH = "details.tags";
|
|
@@ -54,7 +56,7 @@ function LogDetails({
|
|
|
54
56
|
const prefixActions = [
|
|
55
57
|
{
|
|
56
58
|
id: "expand",
|
|
57
|
-
icon:
|
|
59
|
+
icon: UiChevronRight.UiChevronRight,
|
|
58
60
|
label: (key) => `Expand ${labelForPath(key)}`,
|
|
59
61
|
visible: (_k, _v, item) => !!item.expandable,
|
|
60
62
|
disabled: (_k, _v, item) => !!item.expanded,
|
|
@@ -65,7 +67,7 @@ function LogDetails({
|
|
|
65
67
|
},
|
|
66
68
|
{
|
|
67
69
|
id: "collapse",
|
|
68
|
-
icon:
|
|
70
|
+
icon: UiChevronDown.UiChevronDown,
|
|
69
71
|
label: (key) => `Collapse ${labelForPath(key)}`,
|
|
70
72
|
visible: (_k, _v, item) => !!item.expandable,
|
|
71
73
|
disabled: (_k, _v, item) => !item.expanded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LogDetails.cjs","sources":["../../src/data/LogDetails.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n getFilterTokens,\n type DataTableColumn,\n type DataTableRowDetailContext,\n} from \"./DataTable\";\nimport { Properties, type PropertiesAction, type PropertiesItem } from \"./Properties\";\nimport {\n TagActionsProvider,\n TagPropertiesList,\n type TagActionsContextValue,\n normalizeTags,\n} from \"./cells/TagList\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport type { LogsTableRow } from \"./LogsTable\";\nimport { asRecord } from \"./log-utils\";\nimport { UiCopy, UiZoomIn, UiZoomOut } from \"../icons\";\n\nconst TAGS_PATH = \"details.tags\";\n\n// Key column shrinks to its content (no min/fixed width), never wider than 30ch.\nconst DETAIL_ROW_CLASS = \"grid-cols-[fit-content(30ch)_minmax(0,1fr)]\";\n\nexport function renderLogDetails(\n row: LogsTableRow,\n context: DataTableRowDetailContext<LogsTableRow>,\n): ReactNode {\n return (\n <LogDetails\n row={row}\n filterActions={context.filterActionsByColumn}\n columns={context.columns}\n />\n );\n}\n\n/**\n * Maps a top-level detail field path (`details.<columnKey>`) to its column key.\n * Returns undefined for nested paths and the tags array, which have their own\n * filter affordances.\n */\nfunction fieldColumnKey(path: string): string | undefined {\n if (!path.startsWith(\"details.\") || path === TAGS_PATH) return undefined;\n const rest = path.slice(\"details.\".length);\n return rest && !rest.includes(\".\") ? rest : undefined;\n}\n\nfunction LogDetails({\n row,\n filterActions,\n columns,\n}: {\n row: LogsTableRow;\n filterActions: Record<string, TagActionsContextValue>;\n columns: DataTableColumn<LogsTableRow>[];\n}) {\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 columnByKey = useMemo(\n () => new Map(columns.map((column) => [column.key, column])),\n [columns],\n );\n\n // Include/exclude is wired only for fields whose column is a multi/nested-multi\n // (tristate) filter; other columns (high-cardinality text, number, timestamp)\n // don't honor multiFilters, so they get no filter actions. The toggle token\n // must match the column's filter token (e.g. a status column maps \"INFO\" to a\n // normalized status), so it is derived via getFilterTokens rather than the\n // displayed value.\n const fieldFilter = (\n path: string,\n ): { actions: TagActionsContextValue; token: string } | undefined => {\n const key = fieldColumnKey(path);\n if (!key) return undefined;\n const actions = filterActions[key];\n const column = columnByKey.get(key);\n if (!actions || !column) return undefined;\n const token = getFilterTokens(row, column)[0];\n return token ? { actions, token } : undefined;\n };\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 id: \"include\",\n icon: UiZoomIn,\n label: (key) => `Include ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleInclude(filter.token);\n },\n },\n {\n id: \"exclude\",\n icon: UiZoomOut,\n label: (key) => `Exclude ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleExclude(filter.token);\n },\n },\n ];\n\n // Copy sits immediately after the value (suffix), separate from the leading\n // expand/collapse/include/exclude controls.\n const suffixActions: PropertiesAction<unknown>[] = [\n {\n id: \"copy\",\n icon: UiCopy,\n label: (key) => `Copy ${labelForPath(key)}`,\n visible: (key) => key !== TAGS_PATH,\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 if (key === TAGS_PATH) {\n const count = Array.isArray(value) ? value.length : 0;\n return <span className=\"font-mono text-muted-foreground\">[{count} tags]</span>;\n }\n return item.expandable ? <LogValueSummary value={value} /> : <LogScalarValue value={value} />;\n };\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 isTags = entryPath === TAGS_PATH;\n const expandable = isTags || 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 isTags ? (\n <TagPropertiesList\n tags={normalizeTags(entryValue as string[])}\n rowClassName={DETAIL_ROW_CLASS}\n />\n ) : (\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 rowClassName={DETAIL_ROW_CLASS}\n className=\"mt-density-1\"\n />\n ),\n };\n });\n\n const properties = (\n <Properties\n density=\"compact\"\n items={toItems(details, \"details\", 0)}\n renderLabel={renderLabel}\n renderValue={renderValue}\n prefixActions={prefixActions}\n suffixActions={suffixActions}\n rowClassName={DETAIL_ROW_CLASS}\n />\n );\n\n const tagActions = filterActions[\"tags\"];\n return (\n <div className=\"space-y-density-3 text-xs\">\n {tagActions ? (\n <TagActionsProvider value={tagActions}>{properties}</TagActionsProvider>\n ) : (\n properties\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"],"names":["jsx","useState","useMemo","formatPropertyLabel","getFilterTokens","UiZoomIn","UiZoomOut","UiCopy","jsxs","TagPropertiesList","normalizeTags","Properties","TagActionsProvider","asRecord"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LogDetails.cjs","sources":["../../src/data/LogDetails.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n getFilterTokens,\n type DataTableColumn,\n type DataTableRowDetailContext,\n} from \"./DataTable\";\nimport { Properties, type PropertiesAction, type PropertiesItem } from \"./Properties\";\nimport {\n TagActionsProvider,\n TagPropertiesList,\n type TagActionsContextValue,\n normalizeTags,\n} from \"./cells/TagList\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport type { LogsTableRow } from \"./LogsTable\";\nimport { asRecord } from \"./log-utils\";\nimport { UiChevronDown, UiChevronRight, UiCopy, UiZoomIn, UiZoomOut } from \"../icons\";\n\nconst TAGS_PATH = \"details.tags\";\n\n// Key column shrinks to its content (no min/fixed width), never wider than 30ch.\nconst DETAIL_ROW_CLASS = \"grid-cols-[fit-content(30ch)_minmax(0,1fr)]\";\n\nexport function renderLogDetails(\n row: LogsTableRow,\n context: DataTableRowDetailContext<LogsTableRow>,\n): ReactNode {\n return (\n <LogDetails\n row={row}\n filterActions={context.filterActionsByColumn}\n columns={context.columns}\n />\n );\n}\n\n/**\n * Maps a top-level detail field path (`details.<columnKey>`) to its column key.\n * Returns undefined for nested paths and the tags array, which have their own\n * filter affordances.\n */\nfunction fieldColumnKey(path: string): string | undefined {\n if (!path.startsWith(\"details.\") || path === TAGS_PATH) return undefined;\n const rest = path.slice(\"details.\".length);\n return rest && !rest.includes(\".\") ? rest : undefined;\n}\n\nfunction LogDetails({\n row,\n filterActions,\n columns,\n}: {\n row: LogsTableRow;\n filterActions: Record<string, TagActionsContextValue>;\n columns: DataTableColumn<LogsTableRow>[];\n}) {\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 columnByKey = useMemo(\n () => new Map(columns.map((column) => [column.key, column])),\n [columns],\n );\n\n // Include/exclude is wired only for fields whose column is a multi/nested-multi\n // (tristate) filter; other columns (high-cardinality text, number, timestamp)\n // don't honor multiFilters, so they get no filter actions. The toggle token\n // must match the column's filter token (e.g. a status column maps \"INFO\" to a\n // normalized status), so it is derived via getFilterTokens rather than the\n // displayed value.\n const fieldFilter = (\n path: string,\n ): { actions: TagActionsContextValue; token: string } | undefined => {\n const key = fieldColumnKey(path);\n if (!key) return undefined;\n const actions = filterActions[key];\n const column = columnByKey.get(key);\n if (!actions || !column) return undefined;\n const token = getFilterTokens(row, column)[0];\n return token ? { actions, token } : undefined;\n };\n\n const prefixActions: PropertiesAction<unknown>[] = [\n {\n id: \"expand\",\n icon: UiChevronRight,\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: UiChevronDown,\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 id: \"include\",\n icon: UiZoomIn,\n label: (key) => `Include ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleInclude(filter.token);\n },\n },\n {\n id: \"exclude\",\n icon: UiZoomOut,\n label: (key) => `Exclude ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleExclude(filter.token);\n },\n },\n ];\n\n // Copy sits immediately after the value (suffix), separate from the leading\n // expand/collapse/include/exclude controls.\n const suffixActions: PropertiesAction<unknown>[] = [\n {\n id: \"copy\",\n icon: UiCopy,\n label: (key) => `Copy ${labelForPath(key)}`,\n visible: (key) => key !== TAGS_PATH,\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 if (key === TAGS_PATH) {\n const count = Array.isArray(value) ? value.length : 0;\n return <span className=\"font-mono text-muted-foreground\">[{count} tags]</span>;\n }\n return item.expandable ? <LogValueSummary value={value} /> : <LogScalarValue value={value} />;\n };\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 isTags = entryPath === TAGS_PATH;\n const expandable = isTags || 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 isTags ? (\n <TagPropertiesList\n tags={normalizeTags(entryValue as string[])}\n rowClassName={DETAIL_ROW_CLASS}\n />\n ) : (\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 rowClassName={DETAIL_ROW_CLASS}\n className=\"mt-density-1\"\n />\n ),\n };\n });\n\n const properties = (\n <Properties\n density=\"compact\"\n items={toItems(details, \"details\", 0)}\n renderLabel={renderLabel}\n renderValue={renderValue}\n prefixActions={prefixActions}\n suffixActions={suffixActions}\n rowClassName={DETAIL_ROW_CLASS}\n />\n );\n\n const tagActions = filterActions[\"tags\"];\n return (\n <div className=\"space-y-density-3 text-xs\">\n {tagActions ? (\n <TagActionsProvider value={tagActions}>{properties}</TagActionsProvider>\n ) : (\n properties\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"],"names":["jsx","useState","useMemo","formatPropertyLabel","getFilterTokens","UiChevronRight","UiChevronDown","UiZoomIn","UiZoomOut","UiCopy","jsxs","TagPropertiesList","normalizeTags","Properties","TagActionsProvider","asRecord"],"mappings":"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"}
|
package/dist/data/LogDetails.js
CHANGED
|
@@ -6,6 +6,8 @@ import { TagActionsProvider, TagPropertiesList, normalizeTags } from "./cells/Ta
|
|
|
6
6
|
import { formatPropertyLabel } from "./properties-utils.js";
|
|
7
7
|
import { asRecord } from "./log-utils.js";
|
|
8
8
|
import { UiCopy } from "../icons/components/UiCopy.js";
|
|
9
|
+
import { UiChevronRight } from "../icons/components/UiChevronRight.js";
|
|
10
|
+
import { UiChevronDown } from "../icons/components/UiChevronDown.js";
|
|
9
11
|
import { UiZoomIn } from "../icons/components/UiZoomIn.js";
|
|
10
12
|
import { UiZoomOut } from "../icons/components/UiZoomOut.js";
|
|
11
13
|
const TAGS_PATH = "details.tags";
|
|
@@ -52,7 +54,7 @@ function LogDetails({
|
|
|
52
54
|
const prefixActions = [
|
|
53
55
|
{
|
|
54
56
|
id: "expand",
|
|
55
|
-
icon:
|
|
57
|
+
icon: UiChevronRight,
|
|
56
58
|
label: (key) => `Expand ${labelForPath(key)}`,
|
|
57
59
|
visible: (_k, _v, item) => !!item.expandable,
|
|
58
60
|
disabled: (_k, _v, item) => !!item.expanded,
|
|
@@ -63,7 +65,7 @@ function LogDetails({
|
|
|
63
65
|
},
|
|
64
66
|
{
|
|
65
67
|
id: "collapse",
|
|
66
|
-
icon:
|
|
68
|
+
icon: UiChevronDown,
|
|
67
69
|
label: (key) => `Collapse ${labelForPath(key)}`,
|
|
68
70
|
visible: (_k, _v, item) => !!item.expandable,
|
|
69
71
|
disabled: (_k, _v, item) => !item.expanded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LogDetails.js","sources":["../../src/data/LogDetails.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n getFilterTokens,\n type DataTableColumn,\n type DataTableRowDetailContext,\n} from \"./DataTable\";\nimport { Properties, type PropertiesAction, type PropertiesItem } from \"./Properties\";\nimport {\n TagActionsProvider,\n TagPropertiesList,\n type TagActionsContextValue,\n normalizeTags,\n} from \"./cells/TagList\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport type { LogsTableRow } from \"./LogsTable\";\nimport { asRecord } from \"./log-utils\";\nimport { UiCopy, UiZoomIn, UiZoomOut } from \"../icons\";\n\nconst TAGS_PATH = \"details.tags\";\n\n// Key column shrinks to its content (no min/fixed width), never wider than 30ch.\nconst DETAIL_ROW_CLASS = \"grid-cols-[fit-content(30ch)_minmax(0,1fr)]\";\n\nexport function renderLogDetails(\n row: LogsTableRow,\n context: DataTableRowDetailContext<LogsTableRow>,\n): ReactNode {\n return (\n <LogDetails\n row={row}\n filterActions={context.filterActionsByColumn}\n columns={context.columns}\n />\n );\n}\n\n/**\n * Maps a top-level detail field path (`details.<columnKey>`) to its column key.\n * Returns undefined for nested paths and the tags array, which have their own\n * filter affordances.\n */\nfunction fieldColumnKey(path: string): string | undefined {\n if (!path.startsWith(\"details.\") || path === TAGS_PATH) return undefined;\n const rest = path.slice(\"details.\".length);\n return rest && !rest.includes(\".\") ? rest : undefined;\n}\n\nfunction LogDetails({\n row,\n filterActions,\n columns,\n}: {\n row: LogsTableRow;\n filterActions: Record<string, TagActionsContextValue>;\n columns: DataTableColumn<LogsTableRow>[];\n}) {\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 columnByKey = useMemo(\n () => new Map(columns.map((column) => [column.key, column])),\n [columns],\n );\n\n // Include/exclude is wired only for fields whose column is a multi/nested-multi\n // (tristate) filter; other columns (high-cardinality text, number, timestamp)\n // don't honor multiFilters, so they get no filter actions. The toggle token\n // must match the column's filter token (e.g. a status column maps \"INFO\" to a\n // normalized status), so it is derived via getFilterTokens rather than the\n // displayed value.\n const fieldFilter = (\n path: string,\n ): { actions: TagActionsContextValue; token: string } | undefined => {\n const key = fieldColumnKey(path);\n if (!key) return undefined;\n const actions = filterActions[key];\n const column = columnByKey.get(key);\n if (!actions || !column) return undefined;\n const token = getFilterTokens(row, column)[0];\n return token ? { actions, token } : undefined;\n };\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 id: \"include\",\n icon: UiZoomIn,\n label: (key) => `Include ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleInclude(filter.token);\n },\n },\n {\n id: \"exclude\",\n icon: UiZoomOut,\n label: (key) => `Exclude ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleExclude(filter.token);\n },\n },\n ];\n\n // Copy sits immediately after the value (suffix), separate from the leading\n // expand/collapse/include/exclude controls.\n const suffixActions: PropertiesAction<unknown>[] = [\n {\n id: \"copy\",\n icon: UiCopy,\n label: (key) => `Copy ${labelForPath(key)}`,\n visible: (key) => key !== TAGS_PATH,\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 if (key === TAGS_PATH) {\n const count = Array.isArray(value) ? value.length : 0;\n return <span className=\"font-mono text-muted-foreground\">[{count} tags]</span>;\n }\n return item.expandable ? <LogValueSummary value={value} /> : <LogScalarValue value={value} />;\n };\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 isTags = entryPath === TAGS_PATH;\n const expandable = isTags || 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 isTags ? (\n <TagPropertiesList\n tags={normalizeTags(entryValue as string[])}\n rowClassName={DETAIL_ROW_CLASS}\n />\n ) : (\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 rowClassName={DETAIL_ROW_CLASS}\n className=\"mt-density-1\"\n />\n ),\n };\n });\n\n const properties = (\n <Properties\n density=\"compact\"\n items={toItems(details, \"details\", 0)}\n renderLabel={renderLabel}\n renderValue={renderValue}\n prefixActions={prefixActions}\n suffixActions={suffixActions}\n rowClassName={DETAIL_ROW_CLASS}\n />\n );\n\n const tagActions = filterActions[\"tags\"];\n return (\n <div className=\"space-y-density-3 text-xs\">\n {tagActions ? (\n <TagActionsProvider value={tagActions}>{properties}</TagActionsProvider>\n ) : (\n properties\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"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LogDetails.js","sources":["../../src/data/LogDetails.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n getFilterTokens,\n type DataTableColumn,\n type DataTableRowDetailContext,\n} from \"./DataTable\";\nimport { Properties, type PropertiesAction, type PropertiesItem } from \"./Properties\";\nimport {\n TagActionsProvider,\n TagPropertiesList,\n type TagActionsContextValue,\n normalizeTags,\n} from \"./cells/TagList\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport type { LogsTableRow } from \"./LogsTable\";\nimport { asRecord } from \"./log-utils\";\nimport { UiChevronDown, UiChevronRight, UiCopy, UiZoomIn, UiZoomOut } from \"../icons\";\n\nconst TAGS_PATH = \"details.tags\";\n\n// Key column shrinks to its content (no min/fixed width), never wider than 30ch.\nconst DETAIL_ROW_CLASS = \"grid-cols-[fit-content(30ch)_minmax(0,1fr)]\";\n\nexport function renderLogDetails(\n row: LogsTableRow,\n context: DataTableRowDetailContext<LogsTableRow>,\n): ReactNode {\n return (\n <LogDetails\n row={row}\n filterActions={context.filterActionsByColumn}\n columns={context.columns}\n />\n );\n}\n\n/**\n * Maps a top-level detail field path (`details.<columnKey>`) to its column key.\n * Returns undefined for nested paths and the tags array, which have their own\n * filter affordances.\n */\nfunction fieldColumnKey(path: string): string | undefined {\n if (!path.startsWith(\"details.\") || path === TAGS_PATH) return undefined;\n const rest = path.slice(\"details.\".length);\n return rest && !rest.includes(\".\") ? rest : undefined;\n}\n\nfunction LogDetails({\n row,\n filterActions,\n columns,\n}: {\n row: LogsTableRow;\n filterActions: Record<string, TagActionsContextValue>;\n columns: DataTableColumn<LogsTableRow>[];\n}) {\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 columnByKey = useMemo(\n () => new Map(columns.map((column) => [column.key, column])),\n [columns],\n );\n\n // Include/exclude is wired only for fields whose column is a multi/nested-multi\n // (tristate) filter; other columns (high-cardinality text, number, timestamp)\n // don't honor multiFilters, so they get no filter actions. The toggle token\n // must match the column's filter token (e.g. a status column maps \"INFO\" to a\n // normalized status), so it is derived via getFilterTokens rather than the\n // displayed value.\n const fieldFilter = (\n path: string,\n ): { actions: TagActionsContextValue; token: string } | undefined => {\n const key = fieldColumnKey(path);\n if (!key) return undefined;\n const actions = filterActions[key];\n const column = columnByKey.get(key);\n if (!actions || !column) return undefined;\n const token = getFilterTokens(row, column)[0];\n return token ? { actions, token } : undefined;\n };\n\n const prefixActions: PropertiesAction<unknown>[] = [\n {\n id: \"expand\",\n icon: UiChevronRight,\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: UiChevronDown,\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 id: \"include\",\n icon: UiZoomIn,\n label: (key) => `Include ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleInclude(filter.token);\n },\n },\n {\n id: \"exclude\",\n icon: UiZoomOut,\n label: (key) => `Exclude ${labelForPath(key)}`,\n visible: (key) => !!fieldFilter(key),\n onClick: (key) => {\n const filter = fieldFilter(key);\n filter?.actions.toggleExclude(filter.token);\n },\n },\n ];\n\n // Copy sits immediately after the value (suffix), separate from the leading\n // expand/collapse/include/exclude controls.\n const suffixActions: PropertiesAction<unknown>[] = [\n {\n id: \"copy\",\n icon: UiCopy,\n label: (key) => `Copy ${labelForPath(key)}`,\n visible: (key) => key !== TAGS_PATH,\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 if (key === TAGS_PATH) {\n const count = Array.isArray(value) ? value.length : 0;\n return <span className=\"font-mono text-muted-foreground\">[{count} tags]</span>;\n }\n return item.expandable ? <LogValueSummary value={value} /> : <LogScalarValue value={value} />;\n };\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 isTags = entryPath === TAGS_PATH;\n const expandable = isTags || 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 isTags ? (\n <TagPropertiesList\n tags={normalizeTags(entryValue as string[])}\n rowClassName={DETAIL_ROW_CLASS}\n />\n ) : (\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 rowClassName={DETAIL_ROW_CLASS}\n className=\"mt-density-1\"\n />\n ),\n };\n });\n\n const properties = (\n <Properties\n density=\"compact\"\n items={toItems(details, \"details\", 0)}\n renderLabel={renderLabel}\n renderValue={renderValue}\n prefixActions={prefixActions}\n suffixActions={suffixActions}\n rowClassName={DETAIL_ROW_CLASS}\n />\n );\n\n const tagActions = filterActions[\"tags\"];\n return (\n <div className=\"space-y-density-3 text-xs\">\n {tagActions ? (\n <TagActionsProvider value={tagActions}>{properties}</TagActionsProvider>\n ) : (\n properties\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"],"names":[],"mappings":"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"}
|
|
@@ -40,33 +40,40 @@ function SplitPane({
|
|
|
40
40
|
},
|
|
41
41
|
[minLeft, minRight]
|
|
42
42
|
);
|
|
43
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
43
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
ref: container,
|
|
47
|
+
className: utils.cn("flex flex-1 overflow-hidden h-full", className),
|
|
48
|
+
children: [
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
style: { width: `${split}%` },
|
|
53
|
+
className: utils.cn("overflow-y-auto bg-background min-h-0", leftClass),
|
|
54
|
+
children: left
|
|
55
|
+
}
|
|
56
|
+
),
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
58
|
+
"div",
|
|
59
|
+
{
|
|
60
|
+
role: "separator",
|
|
61
|
+
"aria-orientation": "vertical",
|
|
62
|
+
className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
|
|
63
|
+
onMouseDown
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
style: { width: `${100 - split}%` },
|
|
70
|
+
className: utils.cn("overflow-hidden bg-background min-h-0", rightClass),
|
|
71
|
+
children: right
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
);
|
|
70
77
|
}
|
|
71
78
|
exports.SplitPane = SplitPane;
|
|
72
79
|
//# sourceMappingURL=SplitPane.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n /** Content rendered in the left pane. */\n left: ReactNode;\n /** Content rendered in the right pane. */\n right: ReactNode;\n /** Initial left-pane width as a percentage. */\n defaultSplit?: number;\n /** Minimum left-pane width as a percentage. */\n minLeft?: number;\n /** Minimum right-pane width as a percentage. */\n minRight?: number;\n /** Classes applied to the left pane. */\n leftClass?: string;\n /** Classes applied to the right pane. */\n rightClass?: string;\n /** Classes applied to the root split container. */\n className?: string;\n};\n\nexport function SplitPane({\n left,\n right,\n defaultSplit = 50,\n minLeft = 20,\n minRight = 20,\n leftClass,\n rightClass,\n className,\n}: SplitPaneProps) {\n const [split, setSplit] = useState(defaultSplit);\n const dragging = useRef(false);\n const container = useRef<HTMLDivElement>(null);\n\n const onMouseDown = useCallback(\n (e: React.MouseEvent) => {\n e.preventDefault();\n dragging.current = true;\n\n const onMove = (ev: MouseEvent) => {\n if (!dragging.current || !container.current) return;\n const rect = container.current.getBoundingClientRect();\n const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n };\n\n const onUp = () => {\n dragging.current = false;\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"\";\n document.body.style.userSelect = \"\";\n };\n\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n },\n [minLeft, minRight],\n );\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n /** Content rendered in the left pane. */\n left: ReactNode;\n /** Content rendered in the right pane. */\n right: ReactNode;\n /** Initial left-pane width as a percentage. */\n defaultSplit?: number;\n /** Minimum left-pane width as a percentage. */\n minLeft?: number;\n /** Minimum right-pane width as a percentage. */\n minRight?: number;\n /** Classes applied to the left pane. */\n leftClass?: string;\n /** Classes applied to the right pane. */\n rightClass?: string;\n /** Classes applied to the root split container. */\n className?: string;\n};\n\nexport function SplitPane({\n left,\n right,\n defaultSplit = 50,\n minLeft = 20,\n minRight = 20,\n leftClass,\n rightClass,\n className,\n}: SplitPaneProps) {\n const [split, setSplit] = useState(defaultSplit);\n const dragging = useRef(false);\n const container = useRef<HTMLDivElement>(null);\n\n const onMouseDown = useCallback(\n (e: React.MouseEvent) => {\n e.preventDefault();\n dragging.current = true;\n\n const onMove = (ev: MouseEvent) => {\n if (!dragging.current || !container.current) return;\n const rect = container.current.getBoundingClientRect();\n const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n };\n\n const onUp = () => {\n dragging.current = false;\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"\";\n document.body.style.userSelect = \"\";\n };\n\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n },\n [minLeft, minRight],\n );\n\n return (\n <div\n ref={container}\n className={cn(\"flex flex-1 overflow-hidden h-full\", className)}\n >\n <div\n style={{ width: `${split}%` }}\n className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n >\n {left}\n </div>\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n onMouseDown={onMouseDown}\n />\n <div\n style={{ width: `${100 - split}%` }}\n className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n >\n {right}\n </div>\n </div>\n );\n}\n"],"names":["useState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;AAsBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,YAAY;AAC/C,QAAM,WAAWC,MAAAA,OAAO,KAAK;AAC7B,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAE7C,QAAM,cAAcC,MAAAA;AAAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,sCAAsC,SAAS;AAAA,MAE7D,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YACxB,WAAWD,MAAAA,GAAG,yCAAyC,SAAS;AAAA,YAE/D,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEHC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAU;AAAA,YACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAC9B,WAAWD,MAAAA,GAAG,yCAAyC,UAAU;AAAA,YAEhE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,cAAc,2CA0DhB"}
|
package/dist/layout/SplitPane.js
CHANGED
|
@@ -38,33 +38,40 @@ function SplitPane({
|
|
|
38
38
|
},
|
|
39
39
|
[minLeft, minRight]
|
|
40
40
|
);
|
|
41
|
-
return /* @__PURE__ */ jsxs(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
41
|
+
return /* @__PURE__ */ jsxs(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
ref: container,
|
|
45
|
+
className: cn("flex flex-1 overflow-hidden h-full", className),
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ jsx(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
style: { width: `${split}%` },
|
|
51
|
+
className: cn("overflow-y-auto bg-background min-h-0", leftClass),
|
|
52
|
+
children: left
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
/* @__PURE__ */ jsx(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
role: "separator",
|
|
59
|
+
"aria-orientation": "vertical",
|
|
60
|
+
className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
|
|
61
|
+
onMouseDown
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
"div",
|
|
66
|
+
{
|
|
67
|
+
style: { width: `${100 - split}%` },
|
|
68
|
+
className: cn("overflow-hidden bg-background min-h-0", rightClass),
|
|
69
|
+
children: right
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
);
|
|
68
75
|
}
|
|
69
76
|
export {
|
|
70
77
|
SplitPane
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitPane.js","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n /** Content rendered in the left pane. */\n left: ReactNode;\n /** Content rendered in the right pane. */\n right: ReactNode;\n /** Initial left-pane width as a percentage. */\n defaultSplit?: number;\n /** Minimum left-pane width as a percentage. */\n minLeft?: number;\n /** Minimum right-pane width as a percentage. */\n minRight?: number;\n /** Classes applied to the left pane. */\n leftClass?: string;\n /** Classes applied to the right pane. */\n rightClass?: string;\n /** Classes applied to the root split container. */\n className?: string;\n};\n\nexport function SplitPane({\n left,\n right,\n defaultSplit = 50,\n minLeft = 20,\n minRight = 20,\n leftClass,\n rightClass,\n className,\n}: SplitPaneProps) {\n const [split, setSplit] = useState(defaultSplit);\n const dragging = useRef(false);\n const container = useRef<HTMLDivElement>(null);\n\n const onMouseDown = useCallback(\n (e: React.MouseEvent) => {\n e.preventDefault();\n dragging.current = true;\n\n const onMove = (ev: MouseEvent) => {\n if (!dragging.current || !container.current) return;\n const rect = container.current.getBoundingClientRect();\n const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n };\n\n const onUp = () => {\n dragging.current = false;\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"\";\n document.body.style.userSelect = \"\";\n };\n\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n },\n [minLeft, minRight],\n );\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"SplitPane.js","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n /** Content rendered in the left pane. */\n left: ReactNode;\n /** Content rendered in the right pane. */\n right: ReactNode;\n /** Initial left-pane width as a percentage. */\n defaultSplit?: number;\n /** Minimum left-pane width as a percentage. */\n minLeft?: number;\n /** Minimum right-pane width as a percentage. */\n minRight?: number;\n /** Classes applied to the left pane. */\n leftClass?: string;\n /** Classes applied to the right pane. */\n rightClass?: string;\n /** Classes applied to the root split container. */\n className?: string;\n};\n\nexport function SplitPane({\n left,\n right,\n defaultSplit = 50,\n minLeft = 20,\n minRight = 20,\n leftClass,\n rightClass,\n className,\n}: SplitPaneProps) {\n const [split, setSplit] = useState(defaultSplit);\n const dragging = useRef(false);\n const container = useRef<HTMLDivElement>(null);\n\n const onMouseDown = useCallback(\n (e: React.MouseEvent) => {\n e.preventDefault();\n dragging.current = true;\n\n const onMove = (ev: MouseEvent) => {\n if (!dragging.current || !container.current) return;\n const rect = container.current.getBoundingClientRect();\n const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n };\n\n const onUp = () => {\n dragging.current = false;\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"\";\n document.body.style.userSelect = \"\";\n };\n\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n },\n [minLeft, minRight],\n );\n\n return (\n <div\n ref={container}\n className={cn(\"flex flex-1 overflow-hidden h-full\", className)}\n >\n <div\n style={{ width: `${split}%` }}\n className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n >\n {left}\n </div>\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n onMouseDown={onMouseDown}\n />\n <div\n style={{ width: `${100 - split}%` }}\n className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n >\n {right}\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;AAsBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAE7D,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YACxB,WAAW,GAAG,yCAAyC,SAAS;AAAA,YAE/D,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAU;AAAA,YACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAC9B,WAAW,GAAG,yCAAyC,UAAU;AAAA,YAEhE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flanksource/clicky-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.12",
|
|
4
4
|
"description": "Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.",
|
|
5
5
|
"homepage": "https://github.com/flanksource/clicky-ui#readme",
|
|
6
6
|
"bugs": "https://github.com/flanksource/clicky-ui/issues",
|