@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/form/components/fields/builder.js

@@ -0,0 +1,124 @@
+import { useT } from "../../../i18n/instance.js";
+import { useFormContext } from "../context.js";
+import "./repeater-rows.js";
+import { appendPath, toHtmlName } from "../form-path.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { BlockAddMenu } from "./block-add-menu.js";
+import { buildRowActions } from "./row-action-menu.js";
+import { RowActions } from "./row-actions.js";
+import { RowItem } from "./row-item.js";
+import { TableRows, columnsFromSchema } from "./table-rows.js";
+import { useFlipReorder } from "./use-flip-reorder.js";
+import { useRowCollection } from "./use-row-collection.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/builder.tsx
+var EMPTY_TEMPLATE = [];
+var BuilderComponent = ({ node }) => {
+	const props = node.props;
+	const name = props.name;
+	const blocks = node.blocks ?? [];
+	const { errors } = useFormContext();
+	const { hidden, required } = useDependentField(node);
+	const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(name, props.defaultItems ?? 0);
+	const { t } = useT("lattice");
+	const registerRow = useFlipReorder(rows.map((r) => String(r["__rowId"] ?? "")).join(","));
+	const atMax = props.maxItems != null && rows.length >= props.maxItems;
+	const atMin = props.minItems != null && rows.length <= props.minItems;
+	const isTable = props.layout === "table";
+	const blockFor = (type) => blocks.find((b) => b.type === type);
+	const options = blocks.map((b) => ({
+		type: b.type,
+		label: b.label
+	}));
+	if (hidden) return null;
+	const hiddenTypeInputs = rows.map((row, index) => /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: toHtmlName(appendPath(path, index, "type")),
+		value: String(row.type ?? "")
+	}, String(row["__rowId"] ?? index)));
+	const primary = blocks[0];
+	const tableRows = rows.map((row, index) => {
+		const block = blockFor(row.type);
+		const isPrimary = !!block && !!primary && block.type === primary.type;
+		return {
+			key: String(row["__rowId"] ?? index),
+			index,
+			row,
+			template: block?.schema ?? EMPTY_TEMPLATE,
+			span: !isPrimary,
+			heading: block?.label ?? `Unknown block: ${String(row.type)}`
+		};
+	});
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: errors[path],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name: path,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [isTable ? /* @__PURE__ */ jsxs(Fragment, { children: [hiddenTypeInputs, /* @__PURE__ */ jsx(TableRows, {
+				base: path,
+				columns: columnsFromSchema(primary?.schema ?? []),
+				rows: tableRows,
+				reorderable: props.reorderable ?? false,
+				removable: () => !atMin,
+				rowActions: props.rowActions,
+				onField,
+				onMove,
+				onRemove,
+				onDuplicate,
+				registerRow,
+				resizableColumns: props.resizableColumns === true,
+				resizeIndicator: props.resizeIndicator === true
+			})] }) : rows.map((row, index) => {
+				const block = blockFor(row.type);
+				const key = String(row["__rowId"] ?? index);
+				return /* @__PURE__ */ jsxs("div", {
+					ref: (el) => registerRow(key, el),
+					"data-flip-key": key,
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name: toHtmlName(appendPath(path, index, "type")),
+						value: String(row.type ?? "")
+					}), block ? /* @__PURE__ */ jsx(RowItem, {
+						base: path,
+						index,
+						row,
+						template: block.schema ?? EMPTY_TEMPLATE,
+						heading: block.label,
+						reorderable: props.reorderable ?? false,
+						isFirst: index === 0,
+						isLast: index === rows.length - 1,
+						removable: !atMin,
+						rowActions: props.rowActions,
+						onField,
+						onRemove,
+						onMove,
+						onDuplicate
+					}) : /* @__PURE__ */ jsxs("div", {
+						"data-test": `repeater-${name}-row-${index}`,
+						className: "flex items-center justify-between rounded-lt border border-dashed border-lt-border p-4 text-sm text-lt-muted-fg",
+						children: [/* @__PURE__ */ jsxs("span", { children: ["Unknown block: ", String(row.type)] }), /* @__PURE__ */ jsx(RowActions, { actions: buildRowActions(props.rowActions, {
+							index,
+							removable: !atMin,
+							onRemove,
+							onDuplicate,
+							t
+						}) })]
+					})]
+				}, key);
+			}), !atMax && /* @__PURE__ */ jsx(BlockAddMenu, {
+				addLabel: props.addLabel ?? "Add",
+				blocks: options,
+				onSelect: (type) => append({ type })
+			})]
+		})
+	});
+};
+//#endregion
+export { BuilderComponent };
+
+//# sourceMappingURL=builder.js.map

package/dist/form/components/fields/builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.js","names":[],"sources":["../../../../resources/js/form/components/fields/builder.tsx"],"sourcesContent":["import type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { appendPath, toHtmlName } from \"../form-path\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { BlockAddMenu, type BlockOption } from \"./block-add-menu\";\nimport { ROW_ID_KEY } from \"./repeater-rows\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport { RowItem } from \"./row-item\";\nimport { columnsFromSchema, TableRows } from \"./table-rows\";\nimport { useFlipReorder } from \"./use-flip-reorder\";\nimport { useRowCollection } from \"./use-row-collection\";\n\ntype Block = { type: string; label: string; schema: Node[] };\n\nconst EMPTY_TEMPLATE: Node[] = [];\n\nexport const BuilderComponent: RendererComponent<\"field.builder\"> = ({ node }) => {\n  const props = node.props;\n  const name = props.name;\n  const blocks = ((node as unknown as { blocks?: Block[] }).blocks ?? []) as Block[];\n  const { errors } = useFormContext();\n  const { hidden, required } = useDependentField(node);\n  const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(\n    name,\n    props.defaultItems ?? 0,\n  );\n  const { t } = useT(\"lattice\");\n  const orderSignature = rows.map((r) => String(r[ROW_ID_KEY] ?? \"\")).join(\",\");\n  const registerRow = useFlipReorder(orderSignature);\n  const atMax = props.maxItems != null && rows.length >= props.maxItems;\n  const atMin = props.minItems != null && rows.length <= props.minItems;\n  const isTable = props.layout === \"table\";\n\n  const blockFor = (type: unknown): Block | undefined => blocks.find((b) => b.type === type);\n  const options: BlockOption[] = blocks.map((b) => ({\n    type: b.type,\n    label: b.label,\n  }));\n\n  if (hidden) {\n    return null;\n  }\n\n  const hiddenTypeInputs = rows.map((row, index) => (\n    <input\n      key={String(row[ROW_ID_KEY] ?? index)}\n      type=\"hidden\"\n      name={toHtmlName(appendPath(path, index, \"type\"))}\n      value={String(row.type ?? \"\")}\n    />\n  ));\n\n  const primary = blocks[0];\n  const tableRows = rows.map((row, index) => {\n    const block = blockFor(row.type);\n    const isPrimary = !!block && !!primary && block.type === primary.type;\n    return {\n      key: String(row[ROW_ID_KEY] ?? index),\n      index,\n      row,\n      template: block?.schema ?? EMPTY_TEMPLATE,\n      span: !isPrimary,\n      heading: block?.label ?? `Unknown block: ${String(row.type)}`,\n    };\n  });\n\n  return (\n    <FormFieldFrame\n      error={errors[path]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={path}\n      required={required}\n    >\n      <div className=\"flex flex-col gap-3\">\n        {isTable ? (\n          <>\n            {hiddenTypeInputs}\n            <TableRows\n              base={path}\n              columns={columnsFromSchema(primary?.schema ?? [])}\n              rows={tableRows}\n              reorderable={props.reorderable ?? false}\n              removable={() => !atMin}\n              rowActions={props.rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n              resizableColumns={props.resizableColumns === true}\n              resizeIndicator={props.resizeIndicator === true}\n            />\n          </>\n        ) : (\n          rows.map((row, index) => {\n            const block = blockFor(row.type);\n            const key = String(row[ROW_ID_KEY] ?? index);\n\n            return (\n              <div key={key} ref={(el) => registerRow(key, el)} data-flip-key={key}>\n                <input\n                  type=\"hidden\"\n                  name={toHtmlName(appendPath(path, index, \"type\"))}\n                  value={String(row.type ?? \"\")}\n                />\n                {block ? (\n                  <RowItem\n                    base={path}\n                    index={index}\n                    row={row}\n                    template={block.schema ?? EMPTY_TEMPLATE}\n                    heading={block.label}\n                    reorderable={props.reorderable ?? false}\n                    isFirst={index === 0}\n                    isLast={index === rows.length - 1}\n                    removable={!atMin}\n                    rowActions={props.rowActions}\n                    onField={onField}\n                    onRemove={onRemove}\n                    onMove={onMove}\n                    onDuplicate={onDuplicate}\n                  />\n                ) : (\n                  <div\n                    data-test={`repeater-${name}-row-${index}`}\n                    className=\"flex items-center justify-between rounded-lt border border-dashed border-lt-border p-4 text-sm text-lt-muted-fg\"\n                  >\n                    <span>Unknown block: {String(row.type)}</span>\n                    <RowActions\n                      actions={buildRowActions(props.rowActions, {\n                        index,\n                        removable: !atMin,\n                        onRemove,\n                        onDuplicate,\n                        t,\n                      })}\n                    />\n                  </div>\n                )}\n              </div>\n            );\n          })\n        )}\n\n        {!atMax && (\n          <BlockAddMenu\n            addLabel={props.addLabel ?? \"Add\"}\n            blocks={options}\n            onSelect={(type) => append({ type })}\n          />\n        )}\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/checkbox.d.ts

@@ -1,2 +1,2 @@
 import { RendererComponent } from '../../../core/types';
-export declare const CheckboxComponent: RendererComponent<"form.checkbox">;
+export declare const CheckboxComponent: RendererComponent<"field.checkbox">;

package/dist/form/components/fields/checkbox.js

@@ -1,34 +1,37 @@
-import { useFormContext } from "../context.js";
-import { useFormValue, useSetFormValue } from "../values.js";
+import { testIdentity } from "../../../core/test-id.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValue } from "../values.js";
+import { Checkbox } from "../../../core/components/checkbox.js";
 import { toBoolean } from "../conditions.js";
-import { Checkbox } from "../base/checkbox.js";
 import { Label } from "../base/label.js";
 import { useDependentField } from "../use-dependent-field.js";
+import { useFieldCommit } from "../use-field-commit.js";
 import { useSeedDefault } from "../use-seed-default.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/checkbox.tsx
 var CheckboxComponent = ({ node }) => {
-	const { clearErrors, precognitive, validate } = useFormContext();
 	const { hidden, readOnly, disabled } = useDependentField(node);
-	const name = node.props.name;
-	const setValue = useSetFormValue();
-	const storedValue = useFormValue(name);
+	const localName = node.props.name;
+	const scope = useFieldScope();
+	const name = scope ? scope.scopedName(localName) : localName;
+	const globalValue = useFormValue(localName);
+	const storedValue = scope ? scope.getValue(localName) : globalValue;
+	const { commit } = useFieldCommit();
 	const defaultChecked = toBoolean(node.props.value);
 	const checked = storedValue !== void 0 ? toBoolean(storedValue) : defaultChecked;
-	useSeedDefault(name, defaultChecked);
+	useSeedDefault(localName, defaultChecked);
 	if (hidden) return null;
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center space-x-3",
 		children: [/* @__PURE__ */ jsx(Checkbox, {
 			autoFocus: node.props.autoFocus ?? void 0,
 			checked,
+			"data-test": testIdentity(localName),
 			disabled: readOnly || disabled,
 			id: name,
 			name,
 			onCheckedChange: (next) => {
-				setValue(name, next === true);
-				if (precognitive) window.requestAnimationFrame(() => validate(name));
-				else clearErrors(name);
+				commit(localName, next === true);
 			},
 			tabIndex: node.props.tabIndex ?? void 0
 		}), /* @__PURE__ */ jsx(Label, {

package/dist/form/components/fields/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/fields/checkbox.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Checkbox } from \"../base/checkbox\";\nimport { Label } from \"../base/label\";\nimport { toBoolean } from \"../conditions\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useSeedDefault } from \"../use-seed-default\";\nimport { useFormValue, useSetFormValue } from \"../values\";\n\nexport const CheckboxComponent: RendererComponent<\"form.checkbox\"> = ({ node }) => {\n  const { clearErrors, precognitive, validate } = useFormContext();\n  const { hidden, readOnly, disabled } = useDependentField(node);\n  const name = node.props.name;\n  const setValue = useSetFormValue();\n  const storedValue = useFormValue(name);\n  const defaultChecked = toBoolean(node.props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n\n  useSeedDefault(name, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <div>\n      <div className=\"flex items-center space-x-3\">\n        <Checkbox\n          autoFocus={node.props.autoFocus ?? undefined}\n          checked={checked}\n          disabled={readOnly || disabled}\n          id={name}\n          name={name}\n          onCheckedChange={(next) => {\n            const value = next === true;\n            setValue(name, value);\n            if (precognitive) {\n              window.requestAnimationFrame(() => validate(name));\n            } else {\n              clearErrors(name);\n            }\n          }}\n          tabIndex={node.props.tabIndex ?? undefined}\n        />\n        <Label htmlFor={name}>{node.props.label}</Label>\n      </div>\n      {node.props.helperText && (\n        <p className=\"mt-1 pl-7 text-sm text-lt-muted-fg\">{node.props.helperText}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,EAAE,aAAa,cAAc,aAAa,eAAe;CAC/D,MAAM,EAAE,QAAQ,UAAU,aAAa,kBAAkB,IAAI;CAC7D,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,WAAW,gBAAgB;CACjC,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,iBAAiB,UAAU,KAAK,MAAM,KAAK;CACjD,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CAErE,eAAe,MAAM,cAAc;CAEnC,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,OAAD,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACE,WAAW,KAAK,MAAM,aAAa,KAAA;GAC1B;GACT,UAAU,YAAY;GACtB,IAAI;GACE;GACN,kBAAkB,SAAS;IAEzB,SAAS,MADK,SAAS,IACH;IACpB,IAAI,cACF,OAAO,4BAA4B,SAAS,IAAI,CAAC;SAEjD,YAAY,IAAI;GAEpB;GACA,UAAU,KAAK,MAAM,YAAY,KAAA;EAClC,CAAA,GACD,oBAAC,OAAD;GAAO,SAAS;aAAO,KAAK,MAAM;EAAa,CAAA,CAC5C;KACJ,KAAK,MAAM,cACV,oBAAC,KAAD;EAAG,WAAU;YAAsC,KAAK,MAAM;CAAc,CAAA,CAE3E,EAAA,CAAA;AAET"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/fields/checkbox.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Label } from \"../base/label\";\nimport { toBoolean } from \"../conditions\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useSeedDefault } from \"../use-seed-default\";\nimport { useFormValue } from \"../values\";\n\nexport const CheckboxComponent: RendererComponent<\"field.checkbox\"> = ({ node }) => {\n  const { hidden, readOnly, disabled } = useDependentField(node);\n  const localName = node.props.name;\n  const scope = useFieldScope();\n  const name = scope ? scope.scopedName(localName) : localName;\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const { commit } = useFieldCommit();\n  const defaultChecked = toBoolean(node.props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n\n  useSeedDefault(localName, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <div>\n      <div className=\"flex items-center space-x-3\">\n        <Checkbox\n          autoFocus={node.props.autoFocus ?? undefined}\n          checked={checked}\n          data-test={testIdentity(localName)}\n          disabled={readOnly || disabled}\n          id={name}\n          name={name}\n          onCheckedChange={(next) => {\n            commit(localName, next === true);\n          }}\n          tabIndex={node.props.tabIndex ?? undefined}\n        />\n        <Label htmlFor={name}>{node.props.label}</Label>\n      </div>\n      {node.props.helperText && (\n        <p className=\"mt-1 pl-7 text-sm text-lt-muted-fg\">{node.props.helperText}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,EAAE,QAAQ,UAAU,aAAa,kBAAkB,IAAI;CAC7D,MAAM,YAAY,KAAK,MAAM;CAC7B,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,MAAM,WAAW,SAAS,IAAI;CACnD,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,iBAAiB,UAAU,KAAK,MAAM,KAAK;CACjD,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CAErE,eAAe,WAAW,cAAc;CAExC,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,OAAD,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACE,WAAW,KAAK,MAAM,aAAa,KAAA;GAC1B;GACT,aAAW,aAAa,SAAS;GACjC,UAAU,YAAY;GACtB,IAAI;GACE;GACN,kBAAkB,SAAS;IACzB,OAAO,WAAW,SAAS,IAAI;GACjC;GACA,UAAU,KAAK,MAAM,YAAY,KAAA;EAClC,CAAA,GACD,oBAAC,OAAD;GAAO,SAAS;aAAO,KAAK,MAAM;EAAa,CAAA,CAC5C;KACJ,KAAK,MAAM,cACV,oBAAC,KAAD;EAAG,WAAU;YAAsC,KAAK,MAAM;CAAc,CAAA,CAE3E,EAAA,CAAA;AAET"}

package/dist/form/components/fields/choice.d.ts

@@ -1,2 +1,2 @@
 import { RendererComponent } from '../../../core/types';
-export declare const ChoiceComponent: RendererComponent<"form.choice">;
+export declare const ChoiceComponent: RendererComponent<"field.choice">;

package/dist/form/components/fields/choice.js

@@ -1,22 +1,23 @@
 import { useResolvedNode } from "../resolved-nodes.js";
 import { SegmentedPills } from "../../../core/components/segmented-pills.js";
-import { useSeedDefault } from "../use-seed-default.js";
 import { FormFieldFrame } from "../base/field.js";
+import { useSeedDefault } from "../use-seed-default.js";
 import { useControlledField } from "../use-controlled-field.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/choice.tsx
 var ChoiceComponent = ({ node }) => {
 	const resolvedNode = useResolvedNode(node);
-	const { name, value, error, hidden, required, readOnly, disabled, commit } = useControlledField(node);
+	const { localName, name, testId, value, error, hidden, required, readOnly, disabled, commit } = useControlledField(node);
 	const options = useMemo(() => resolvedNode.props.options ?? [], [resolvedNode.props]);
 	const fallbackValue = options[0]?.value ?? "";
 	const selected = value || fallbackValue;
-	useSeedDefault(name, selected || void 0);
+	useSeedDefault(localName, selected || void 0);
 	if (hidden || options.length === 0) return null;
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
 		error,
 		helperText: node.props.helperText ?? void 0,
+		tooltip: node.props.tooltip ?? void 0,
 		label: node.props.label ?? "",
 		name,
 		required,
@@ -28,7 +29,7 @@ var ChoiceComponent = ({ node }) => {
 			ariaLabel: node.props.label ?? void 0,
 			autoFocus: node.props.autoFocus ?? void 0,
 			disabled: readOnly || disabled,
-			name,
+			name: testId,
 			onSelect: commit,
 			options,
 			tabIndex: node.props.tabIndex ?? void 0,

package/dist/form/components/fields/choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"choice.js","names":[],"sources":["../../../../resources/js/form/components/fields/choice.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { Option, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { SegmentedPills } from \"@lattice/lattice/core/components/segmented-pills\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useSeedDefault } from \"../use-seed-default\";\n\nexport const ChoiceComponent: RendererComponent<\"form.choice\"> = ({ node }) => {\n  const resolvedNode = useResolvedNode(node);\n  const { name, value, error, hidden, required, readOnly, disabled, commit } =\n    useControlledField(node);\n  const options = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const fallbackValue = options[0]?.value ?? \"\";\n  const selected = value || fallbackValue;\n\n  useSeedDefault(name, selected || undefined);\n\n  if (hidden || options.length === 0) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      helperText={node.props.helperText ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <input name={name} type=\"hidden\" value={selected} />\n      <SegmentedPills\n        ariaLabel={node.props.label ?? undefined}\n        autoFocus={node.props.autoFocus ?? undefined}\n        disabled={readOnly || disabled}\n        name={name}\n        onSelect={commit}\n        options={options}\n        tabIndex={node.props.tabIndex ?? undefined}\n        value={selected}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,mBAAqD,EAAE,WAAW;CAC7E,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CACzB,MAAM,UAAU,cACP,aAAa,MAAiC,WAAW,CAAC,GACjE,CAAC,aAAa,KAAK,CACrB;CACA,MAAM,gBAAgB,QAAQ,IAAI,SAAS;CAC3C,MAAM,WAAW,SAAS;CAE1B,eAAe,MAAM,YAAY,KAAA,CAAS;CAE1C,IAAI,UAAU,QAAQ,WAAW,GAC/B,OAAO;CAGT,OACE,qBAAC,gBAAD;EACS;EACP,YAAY,KAAK,MAAM,cAAc,KAAA;EACrC,OAAO,KAAK,MAAM,SAAS;EACrB;EACI;YALZ,CAOE,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAW,CAAA,GACnD,oBAAC,gBAAD;GACE,WAAW,KAAK,MAAM,SAAS,KAAA;GAC/B,WAAW,KAAK,MAAM,aAAa,KAAA;GACnC,UAAU,YAAY;GAChB;GACN,UAAU;GACD;GACT,UAAU,KAAK,MAAM,YAAY,KAAA;GACjC,OAAO;EACR,CAAA,CACa;;AAEpB"}
+{"version":3,"file":"choice.js","names":[],"sources":["../../../../resources/js/form/components/fields/choice.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { SegmentedPills } from \"@lattice-php/lattice/core/components/segmented-pills\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useSeedDefault } from \"../use-seed-default\";\n\nexport const ChoiceComponent: RendererComponent<\"field.choice\"> = ({ node }) => {\n  const resolvedNode = useResolvedNode(node);\n  const { localName, name, testId, value, error, hidden, required, readOnly, disabled, commit } =\n    useControlledField(node);\n  const options = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const fallbackValue = options[0]?.value ?? \"\";\n  const selected = value || fallbackValue;\n\n  useSeedDefault(localName, selected || undefined);\n\n  if (hidden || options.length === 0) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <input name={name} type=\"hidden\" value={selected} />\n      <SegmentedPills\n        ariaLabel={node.props.label ?? undefined}\n        autoFocus={node.props.autoFocus ?? undefined}\n        disabled={readOnly || disabled}\n        name={testId}\n        onSelect={commit}\n        options={options}\n        tabIndex={node.props.tabIndex ?? undefined}\n        value={selected}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,mBAAsD,EAAE,WAAW;CAC9E,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,EAAE,WAAW,MAAM,QAAQ,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WACnF,mBAAmB,IAAI;CACzB,MAAM,UAAU,cACP,aAAa,MAAiC,WAAW,CAAC,GACjE,CAAC,aAAa,KAAK,CACrB;CACA,MAAM,gBAAgB,QAAQ,IAAI,SAAS;CAC3C,MAAM,WAAW,SAAS;CAE1B,eAAe,WAAW,YAAY,KAAA,CAAS;CAE/C,IAAI,UAAU,QAAQ,WAAW,GAC/B,OAAO;CAGT,OACE,qBAAC,gBAAD;EACS;EACP,YAAY,KAAK,MAAM,cAAc,KAAA;EACrC,SAAS,KAAK,MAAM,WAAW,KAAA;EAC/B,OAAO,KAAK,MAAM,SAAS;EACrB;EACI;YANZ,CAQE,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAW,CAAA,GACnD,oBAAC,gBAAD;GACE,WAAW,KAAK,MAAM,SAAS,KAAA;GAC/B,WAAW,KAAK,MAAM,aAAa,KAAA;GACnC,UAAU,YAAY;GACtB,MAAM;GACN,UAAU;GACD;GACT,UAAU,KAAK,MAAM,YAAY,KAAA;GACjC,OAAO;EACR,CAAA,CACa;;AAEpB"}

package/dist/form/components/fields/date-input.d.ts

@@ -1,2 +1,2 @@
 import { RendererComponent } from '../../../core/types';
-export declare const DateInputComponent: RendererComponent<"form.date-input">;
+export declare const DateInputComponent: RendererComponent<"field.date-input">;

package/dist/form/components/fields/date-input.js

@@ -7,8 +7,9 @@ var DateInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
 			autoFocus: props.autoFocus ?? false,
+			"data-test": testId,
 			disabled,
 			id: name,
 			max: props.max || void 0,

package/dist/form/components/fields/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateInputComponent: RendererComponent<\"form.date-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => (\n        <Input\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type=\"date\"\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aACnC,oBAAC,OAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,IAAI;GACJ,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GACZ;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GACpC;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GACE;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateInputComponent: RendererComponent<\"field.date-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Input\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type=\"date\"\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,OAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACJ,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GACZ;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GACpC;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GACE;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/file-upload.d.ts

@@ -0,0 +1,2 @@
+import { RendererComponent } from '../../../core/types';
+export declare const FileUploadComponent: RendererComponent<"field.file-upload">;

package/dist/form/components/fields/file-upload.js

@@ -0,0 +1,282 @@
+import { testIdentity } from "../../../core/test-id.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { apiFetch } from "../../../core/api.js";
+import { useFormContext } from "../context.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValues, useSetFormValue } from "../values.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/file-upload.tsx
+function uploadValueEquals(current, next) {
+	if (Array.isArray(next)) return Array.isArray(current) && current.length === next.length && current.every((value, index) => value === next[index]);
+	return current === next;
+}
+var FileUploadComponent = ({ node }) => {
+	const { t } = useT("lattice");
+	const props = node.props;
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
+	const { action, componentRef, errors } = useFormContext();
+	const name = props.name;
+	const scope = useFieldScope();
+	const domName = scope ? scope.scopedName(name) : name;
+	const errorKey = scope ? scope.errorKey(name) : name;
+	const uploadKey = errorKey;
+	const values = useFormValues();
+	const setValue = useSetFormValue();
+	const inputId = useId();
+	const fileInputRef = useRef(null);
+	const previewUrlsRef = useRef(/* @__PURE__ */ new Set());
+	const locked = readOnly || disabled;
+	const signed = props.signed;
+	const multiple = props.multiple;
+	const fieldName = multiple ? `${domName}[]` : domName;
+	const [items, setItems] = useState(useMemo(() => (props.files ?? []).map((file) => ({
+		id: crypto.randomUUID(),
+		name: file.name,
+		size: file.size,
+		status: "ready",
+		progress: 100,
+		key: file.key,
+		url: file.url,
+		token: file.token,
+		existing: true
+	})), [props.files]));
+	const [removedTokens, setRemovedTokens] = useState([]);
+	useEffect(() => {
+		if (!signed) return;
+		const keys = items.filter((item) => !item.existing && item.key && item.status === "ready").map((item) => item.key);
+		const next = multiple ? keys : keys[0] ?? "";
+		if (scope) {
+			if (!uploadValueEquals(scope.getValue(name), next)) scope.setValue(name, next);
+			return;
+		}
+		setValue(name, next);
+	}, [
+		items,
+		multiple,
+		name,
+		scope,
+		setValue,
+		signed
+	]);
+	useEffect(() => {
+		if (!signed || scope) return;
+		setValue(`${name}__removed`, removedTokens);
+	}, [
+		name,
+		removedTokens,
+		scope,
+		setValue,
+		signed
+	]);
+	useEffect(() => () => {
+		previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+		previewUrlsRef.current.clear();
+	}, []);
+	const multipartFiles = items.filter((item) => item.file && !item.existing).map((item) => item.file);
+	useEffect(() => {
+		if (signed || !fileInputRef.current) return;
+		const transfer = new DataTransfer();
+		multipartFiles.forEach((file) => transfer.items.add(file));
+		fileInputRef.current.files = transfer.files;
+	});
+	function createPreviewUrl(file) {
+		if (!props.image) return;
+		const url = URL.createObjectURL(file);
+		previewUrlsRef.current.add(url);
+		return url;
+	}
+	function revokePreviewUrl(item) {
+		if (!item.url || !previewUrlsRef.current.has(item.url)) return;
+		URL.revokeObjectURL(item.url);
+		previewUrlsRef.current.delete(item.url);
+	}
+	async function signAndUpload(item, file) {
+		const response = await apiFetch(action, {
+			method: "POST",
+			ref: componentRef,
+			body: JSON.stringify({
+				...values,
+				_upload: uploadKey,
+				filename: file.name,
+				contentType: file.type
+			}),
+			throwOnError: false
+		});
+		if (!response.ok) {
+			setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+				...entry,
+				status: "error"
+			} : entry));
+			return;
+		}
+		const sign = await response.json();
+		await new Promise((resolve) => {
+			const request = new XMLHttpRequest();
+			request.open(sign.method, sign.url, true);
+			Object.entries(sign.headers).forEach(([key, value]) => request.setRequestHeader(key, String(value)));
+			request.upload.onprogress = (event) => {
+				if (event.lengthComputable) {
+					const progress = Math.round(event.loaded / event.total * 100);
+					setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+						...entry,
+						progress
+					} : entry));
+				}
+			};
+			request.onload = () => {
+				setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+					...entry,
+					status: request.status < 300 ? "ready" : "error",
+					key: sign.key,
+					progress: 100
+				} : entry));
+				resolve();
+			};
+			request.onerror = () => {
+				setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+					...entry,
+					status: "error"
+				} : entry));
+				resolve();
+			};
+			request.send(file);
+		});
+	}
+	function addFiles(fileList) {
+		if (!fileList || locked) return;
+		const incoming = Array.from(fileList);
+		const next = incoming.map((file) => ({
+			id: crypto.randomUUID(),
+			name: file.name,
+			size: file.size,
+			status: signed ? "uploading" : "ready",
+			progress: 0,
+			file,
+			url: createPreviewUrl(file),
+			existing: false
+		}));
+		if (!multiple) {
+			items.forEach(revokePreviewUrl);
+			if (!scope) {
+				const replacedTokens = items.filter((item) => item.existing && item.token).map((item) => item.token);
+				if (replacedTokens.length > 0) setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);
+			}
+		}
+		setItems((prev) => multiple ? [...prev, ...next] : next);
+		if (signed) next.forEach((item, index) => void signAndUpload(item, incoming[index]));
+	}
+	function removeItem(id) {
+		const target = items.find((item) => item.id === id);
+		if (target) revokePreviewUrl(target);
+		setItems((prev) => {
+			if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
+			return prev.filter((i) => i.id !== id);
+		});
+	}
+	if (hidden) return null;
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: errors[errorKey],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6",
+			"data-test": testIdentity(name),
+			onDragOver: (event) => event.preventDefault(),
+			onDrop: (event) => {
+				event.preventDefault();
+				addFiles(event.dataTransfer.files);
+			},
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					className: "text-sm text-lt-muted-fg",
+					disabled: locked,
+					onClick: () => fileInputRef.current?.click(),
+					type: "button",
+					children: t("file-upload.dropzone", "Drop files here or click to browse")
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: props.image ? "grid grid-cols-1 gap-3 sm:grid-cols-2" : "flex flex-col gap-2",
+					children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: props.image ? "flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm" : "flex items-center justify-between gap-3 text-sm",
+						children: [
+							props.image && item.url ? /* @__PURE__ */ jsx("img", {
+								alt: item.name,
+								className: "size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover",
+								"data-test": testIdentity(`${name}-preview`),
+								src: item.url
+							}) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "block truncate",
+										"data-test": testIdentity(`${name}-item`),
+										children: item.name
+									}),
+									item.status === "uploading" && /* @__PURE__ */ jsxs("span", {
+										className: "text-xs text-lt-muted-fg",
+										children: [item.progress, "%"]
+									}),
+									item.status === "error" && /* @__PURE__ */ jsx("span", {
+										className: "text-xs text-lt-danger",
+										children: t("file-upload.failed", "Failed")
+									})
+								]
+							}),
+							(!item.existing || !scope) && /* @__PURE__ */ jsx("button", {
+								"aria-label": t("file-upload.remove", "Remove {{name}}", { name: item.name }),
+								className: "inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50",
+								"data-test": testIdentity(item.existing ? `${name}-remove-existing` : `${name}-remove`),
+								disabled: locked,
+								onClick: () => removeItem(item.id),
+								type: "button",
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "x",
+									"aria-hidden": "true",
+									className: "size-lt-icon-sm"
+								})
+							}),
+							signed && !item.existing && item.key && item.status === "ready" && /* @__PURE__ */ jsx("input", {
+								"data-test": testIdentity(`${name}-uploaded`),
+								name: fieldName,
+								type: "hidden",
+								value: item.key
+							})
+						]
+					}, item.id))
+				}),
+				!scope && removedTokens.map((token) => /* @__PURE__ */ jsx("input", {
+					name: `${name}__removed[]`,
+					type: "hidden",
+					value: token
+				}, token)),
+				/* @__PURE__ */ jsx("input", {
+					accept: props.accept ?? void 0,
+					"aria-label": props.label ?? name,
+					className: "sr-only",
+					"data-test": testIdentity(`${name}-input`),
+					id: inputId,
+					multiple,
+					name: signed ? void 0 : fieldName,
+					onChange: (event) => {
+						addFiles(event.target.files);
+						if (signed) event.target.value = "";
+					},
+					ref: fileInputRef,
+					type: "file"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { FileUploadComponent };
+
+//# sourceMappingURL=file-upload.js.map

package/dist/form/components/fields/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues, useSetFormValue } from \"../values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\ntype SignResponse = {\n  key: string;\n  url: string;\n  headers: Record<string, string>;\n  method: string;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n  if (Array.isArray(next)) {\n    return (\n      Array.isArray(current) &&\n      current.length === next.length &&\n      current.every((value, index) => value === next[index])\n    );\n  }\n\n  return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (!signed) {\n      return;\n    }\n\n    const keys = items\n      .filter((item) => !item.existing && item.key && item.status === \"ready\")\n      .map((item) => item.key as string);\n    const next = multiple ? keys : (keys[0] ?? \"\");\n\n    if (scope) {\n      if (!uploadValueEquals(scope.getValue(name), next)) {\n        scope.setValue(name, next);\n      }\n\n      return;\n    }\n\n    setValue(name, next);\n  }, [items, multiple, name, scope, setValue, signed]);\n\n  useEffect(() => {\n    if (!signed || scope) {\n      return;\n    }\n\n    setValue(`${name}__removed`, removedTokens);\n  }, [name, removedTokens, scope, setValue, signed]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignResponse;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method, sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <button\n                  aria-label={t(\"file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n                  data-test={testIdentity(\n                    item.existing ? `${name}-remove-existing` : `${name}-remove`,\n                  )}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                  type=\"button\"\n                >\n                  <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n                </button>\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/hidden-input.d.ts

@@ -1,2 +1,2 @@
 import { RendererComponent } from '../../../core/types';
-export declare const HiddenInputComponent: RendererComponent<"form.hidden-input">;
+export declare const HiddenInputComponent: RendererComponent<"field.hidden-input">;