@parallelworks/ui 0.18.0 → 0.19.1

package/dist/form/Form.js

@@ -0,0 +1,643 @@
+import { useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { AngleRightIcon, TrashIcon } from "../icons.js";
+import { TooltipInfo } from "../components/Tooltip.js";
+import { UncontrolledCollapsiblePanel } from "../components/CollapsiblePanel.js";
+import CustomListbox from "../components/Listbox.js";
+import Loader from "../components/Loader.js";
+import SectionHeader from "../components/SectionHeader.js";
+import { Table } from "../components/Table.js";
+import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
+import { resolvedFlag } from "./lib.js";
+import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
+import { useParsedOpts } from "./useParsedOpts.js";
+import { usePrevious } from "./usePrevious.js";
+import { getValueUsingPath } from "./utils/getValueUsingPath.js";
+import { getParentValue } from "./utils/getParentValue.js";
+import { parseWizardConfig } from "./Wizard/utils.js";
+import { WizardContainer } from "./Wizard/WizardContainer.js";
+import cx from "classnames";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import deepEqual from "fast-deep-equal";
+import { Form, Formik, useField, useFormikContext } from "formik";
+//#region src/form/Form.tsx
+function asSchemaField(value) {
+	return value && typeof value === "object" ? value : null;
+}
+function asRecord(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function flagValue(value, fallback) {
+	return value && (typeof value === "string" || typeof value === "boolean") ? value : fallback;
+}
+/** Applies `$meta` overrides for `labelPosition` / `spaceCompact`. */
+function resolveMetaOverrides(options, labelPosition, spaceCompact) {
+	const meta = options?.["$meta"];
+	return {
+		labelPosition: meta?.labelPosition ?? labelPosition,
+		spaceCompact: meta?.spaceCompact ?? spaceCompact
+	};
+}
+/** Cheap signature of every list's length; gates the expensive collect walk. */
+function listLengthsSignature(options, values = {}, prefix = "") {
+	if (!options || typeof options !== "object") return "";
+	const parts = [];
+	for (const [fieldName, rawField] of Object.entries(options)) {
+		const field = asSchemaField(rawField);
+		if (fieldName === "$meta" || !field) continue;
+		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
+		if (field.type === "list") {
+			const items = values?.[fieldName];
+			const len = Array.isArray(items) ? items.length : 0;
+			parts.push(`${fullName}:${len}`);
+			const template = field.template || field.options;
+			if (template && Array.isArray(items)) for (let i = 0; i < items.length; i++) parts.push(listLengthsSignature(template, asRecord(items[i]), `${fullName}[${i}].`));
+		} else if (field.type === "group") {
+			const groupItems = field.items || field.options;
+			if (groupItems) parts.push(listLengthsSignature(groupItems, values, prefix));
+		} else if (field.type === "object") {
+			const groupItems = field.items || field.options;
+			if (groupItems) {
+				const nestedValues = asRecord(values?.[fieldName]);
+				parts.push(listLengthsSignature(groupItems, nestedValues, `${fullName}.`));
+			}
+		}
+	}
+	return parts.join("|");
+}
+/** Collects every field with a `default` for the form-level sync to track. */
+function collectFieldsWithDefaults(options, values = {}, prefix = "") {
+	const result = [];
+	if (!options || typeof options !== "object") return result;
+	for (const [fieldName, rawField] of Object.entries(options)) {
+		const field = asSchemaField(rawField);
+		if (!field) continue;
+		if (fieldName === "$meta") continue;
+		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
+		if (field.type === "group") {
+			const groupItems = field.items || field.options;
+			if (groupItems) result.push(...collectFieldsWithDefaults(groupItems, values, prefix));
+			continue;
+		}
+		if (field.type === "object") {
+			const groupItems = field.items || field.options;
+			if (groupItems) {
+				const nestedValues = asRecord(values?.[fieldName]);
+				result.push(...collectFieldsWithDefaults(groupItems, nestedValues, `${fullName}.`));
+			}
+			continue;
+		}
+		if (field.type === "list") {
+			const listTemplate = field.template || field.options;
+			const listValues = values?.[fieldName];
+			if (listTemplate && Array.isArray(listValues)) for (let i = 0; i < listValues.length; i++) {
+				const itemValues = asRecord(listValues[i]);
+				result.push(...collectFieldsWithDefaults(listTemplate, itemValues, `${fullName}[${i}].`));
+			}
+			continue;
+		}
+		if (resolvedFlag(field.hidden) === true && field.ignore !== void 0 && resolvedFlag(field.ignore) !== false) continue;
+		if (field.default !== void 0) result.push({
+			name: fullName,
+			defaultValue: field.default,
+			...field.secondaryField ? { hasSecondary: true } : {}
+		});
+	}
+	return result;
+}
+function defaultReferencesField(defaultValue, fieldPath) {
+	if (typeof defaultValue !== "string" || !defaultValue.includes("${{")) return false;
+	const escaped = fieldPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return new RegExp(`\\binputs\\.${escaped}(?![\\w.[-])`).test(defaultValue);
+}
+function findSelfReferencingFieldNames(schema, values = {}) {
+	return collectFieldsWithDefaults(schema, values).filter(({ name, defaultValue }) => defaultReferencesField(defaultValue, name)).map(({ name }) => name);
+}
+/** Resolves schema defaults into form values as dependencies change. Store-agnostic so the Formik
+* form and hosts with their own store share one implementation. */
+function useDynamicDefaultsSync({ options, values, setValue, isTouched }) {
+	const engine = useWorkflowEngine();
+	const listSig = useMemo(() => listLengthsSignature(options, values), [options, values]);
+	const fieldsWithDefaults = useMemo(() => collectFieldsWithDefaults(options, values).map((f) => {
+		if (typeof f.defaultValue !== "string" || !f.defaultValue.includes("${{")) return f;
+		const lastRowIndex = [...f.name.matchAll(/\[(\d+)\]/g)].at(-1)?.[1];
+		const index = lastRowIndex === void 0 ? -1 : Number(lastRowIndex);
+		const parsed = engine.evaluate({
+			inputs: values,
+			obj: { v: f.defaultValue },
+			orgVars: {},
+			index
+		});
+		const resolved = parsed && typeof parsed === "object" && "v" in parsed ? parsed.v : f.defaultValue;
+		return {
+			...f,
+			defaultValue: resolved
+		};
+	}), [options, listSig]);
+	const prevDefaultsRef = useRef(/* @__PURE__ */ new Map());
+	const synthTouchedRef = useRef(/* @__PURE__ */ new Set());
+	const prevListLensRef = useRef(/* @__PURE__ */ new Map());
+	const fieldsWithDefaultsRef = useRef(null);
+	if (!deepEqual(fieldsWithDefaultsRef.current, fieldsWithDefaults)) {
+		fieldsWithDefaultsRef.current = fieldsWithDefaults;
+		const currentNames = new Set(fieldsWithDefaults.map((f) => f.name));
+		for (const name of prevDefaultsRef.current.keys()) if (!currentNames.has(name)) {
+			prevDefaultsRef.current.delete(name);
+			synthTouchedRef.current.delete(name);
+		}
+		const listLens = /* @__PURE__ */ new Map();
+		for (const part of listSig.split("|")) {
+			const sep = part.lastIndexOf(":");
+			if (sep > 0) listLens.set(part.slice(0, sep), Number(part.slice(sep + 1)));
+		}
+		for (const [list, prevLen] of prevListLensRef.current) {
+			const nowLen = listLens.get(list);
+			if (nowLen !== void 0 && nowLen < prevLen) {
+				for (const name of [...prevDefaultsRef.current.keys()]) if (name.startsWith(`${list}[`)) prevDefaultsRef.current.delete(name);
+				for (const name of [...synthTouchedRef.current]) if (name.startsWith(`${list}[`)) synthTouchedRef.current.delete(name);
+			}
+		}
+		prevListLensRef.current = listLens;
+		for (const { name, defaultValue, hasSecondary } of fieldsWithDefaults) {
+			if (hasSecondary) continue;
+			if (synthTouchedRef.current.has(name)) continue;
+			if (isTouched(name)) continue;
+			if (typeof defaultValue === "string" && defaultValue.includes("${{")) continue;
+			const wasSeen = prevDefaultsRef.current.has(name);
+			const serializedDefault = JSON.stringify(defaultValue ?? null);
+			const prevDefault = prevDefaultsRef.current.get(name);
+			prevDefaultsRef.current.set(name, serializedDefault);
+			if (!wasSeen) {
+				const rawValue = getValueUsingPath(values, name);
+				const currVal = JSON.stringify(rawValue);
+				const trimmedValue = typeof rawValue === "string" ? rawValue.trim() : "";
+				const unresolvedValue = trimmedValue.startsWith("${{") && trimmedValue.endsWith("}}");
+				if (!unresolvedValue && currVal !== void 0 && currVal !== serializedDefault) {
+					synthTouchedRef.current.add(name);
+					continue;
+				}
+				if (!unresolvedValue) continue;
+			}
+			if (prevDefault === serializedDefault) continue;
+			if (defaultValue === null || defaultValue === void 0) continue;
+			if (JSON.stringify(getValueUsingPath(values, name)) !== serializedDefault) setValue(name, defaultValue);
+		}
+	}
+}
+function DynamicDefaultsSync({ options }) {
+	const { setFieldValue, getFieldMeta, values } = useFormikContext();
+	useDynamicDefaultsSync({
+		options,
+		values,
+		setValue: setFieldValue,
+		isTouched: (name) => getFieldMeta(name).touched
+	});
+	return null;
+}
+function GroupHeader({ children, open, setOpen, title }) {
+	return /* @__PURE__ */ jsxs(SectionHeader, {
+		className: "flex items-center justify-between pb-1 mb-2 border-b",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			className: cx("w-full flex items-center text-left transform ease-in transition cursor-pointer"),
+			onClick: () => setOpen((open) => !open),
+			children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90 ", "px-1 text-[1.25rem]  transition ease-in ") }), /* @__PURE__ */ jsx("span", { children: title })]
+		}), children]
+	});
+}
+function deleteFieldByPath(obj, path) {
+	if (!path) return;
+	const parts = path.replaceAll("[", ".").replaceAll("]", "").split(".");
+	const fieldToRemove = parts.pop();
+	if (!fieldToRemove) {
+		console.error("Invalid path");
+		return;
+	}
+	const parent = parts.reduce((acc, curr) => {
+		if (acc && typeof acc === "object") return acc[curr];
+		return {};
+	}, obj);
+	if (parent && typeof parent === "object" && Object.hasOwn(parent, fieldToRemove)) delete parent[fieldToRemove];
+}
+function getClosestParentIndex(parentPath) {
+	for (let i = parentPath.length - 1; i >= 0; i--) if (parentPath[i] === "]") {
+		let j = i - 1;
+		while (j >= 0 && parentPath[j] !== "[") j--;
+		return parseInt(parentPath.slice(j + 1, i));
+	}
+}
+function MultiSelectionDropdown({ name, label = "", invalid = false, options: initialOptions = [], setFormDirty, onChange, parentValue }) {
+	const [field] = useField(name);
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
+	const { setFieldValue } = useFormikContext();
+	const options = useMemo(() => {
+		return initialOptions.map((option) => {
+			const op = typeof option === "string" ? {
+				label: option,
+				value: option,
+				selected: false
+			} : { ...option };
+			if (field.value?.includes(op.value)) op.selected = true;
+			return op;
+		});
+	}, [initialOptions, field.value]);
+	const handleOptionSelected = (selectedValue) => {
+		let selected = [];
+		if (field.value) selected = [...field.value];
+		selected.push(selectedValue);
+		setFieldValue(name, selected);
+		if (onChange) onChange(options);
+		setFormDirty(true);
+	};
+	const t = useStrings().common;
+	const handleRemoveOption = (key) => {
+		const selected = [...field.value.filter((item) => item !== key)];
+		setFieldValue(name, selected);
+		if (onChange) onChange(options);
+		setFormDirty(true);
+	};
+	const prevParent = usePrevious(parentValue);
+	useEffect(() => {
+		if (prevParent && parentValue && prevParent !== parentValue) setFieldValue(name, []);
+	}, [
+		parentValue,
+		prevParent,
+		name,
+		setFieldValue
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CustomListbox, {
+		...controlProps,
+		options,
+		required,
+		type: label.toLowerCase(),
+		handleOptionSelected,
+		className: "mb-3",
+		invalid,
+		closeOnSelect: false
+	}), /* @__PURE__ */ jsx(Table, { children: field.value && field.value.length > 0 ? options.filter((option) => option.selected).map((option) => {
+		return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx(Table.Item, {
+			className: "w-full",
+			children: option?.label
+		}), /* @__PURE__ */ jsx(Table.Item, { children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t.remove,
+			className: "inline-flex bg-transparent p-0 cursor-pointer",
+			onClick: () => handleRemoveOption(option.value),
+			children: /* @__PURE__ */ jsx(TrashIcon, { className: "link mr-4" })
+		}) })] }, String(option.value));
+	}) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(Table.Item, { children: [
+		"No ",
+		label !== "" ? label.toLowerCase() : "options",
+		" selected"
+	] }) }) })] });
+}
+var InputField = React.memo(function InputField({ label, field, setFormDirty, onChange, disabled = false, labelPosition = "left", missingFields = [], computeOn, spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched, values, currentValue }) {
+	const prevField = useRef(field);
+	const fieldObj = useMemo(() => {
+		if (deepEqual(prevField.current, field)) return prevField.current;
+		prevField.current = field;
+		return { ...field };
+	}, [field]);
+	const tooltipComponent = useMemo(() => {
+		if (!fieldObj.tooltip) return null;
+		return /* @__PURE__ */ jsx(TooltipInfo, {
+			className: "pr-2",
+			place: "top",
+			text: typeof fieldObj.tooltip === "string" ? fieldObj.tooltip.replace(/\r/g, "") : fieldObj.tooltip.filter(Boolean).join("\n")
+		});
+	}, [fieldObj.tooltip]);
+	const missing = missingFields.includes(fieldObj.name ?? "");
+	return /* @__PURE__ */ jsx(Registry, {
+		field: fieldObj,
+		label,
+		labelPosition,
+		missing,
+		missingFields,
+		values,
+		setFormDirty,
+		onChange,
+		disabled,
+		computeOn,
+		spaceCompact,
+		tooltipComponent,
+		workflowForm,
+		setFieldTouched,
+		setFieldValue,
+		currentValue
+	});
+}, (prev, next) => {
+	if (!deepEqual(prev.field, next.field)) return false;
+	for (const key of Object.keys(prev)) {
+		if (key === "field" || key === "values") continue;
+		if (prev[key] !== next[key]) return false;
+	}
+	return true;
+});
+function FormikStateBridge({ onChange }) {
+	const { values } = useFormikContext();
+	const prevEmitted = useRef(null);
+	useEffect(() => {
+		const { editorKeyPostfix: _, ...next } = values;
+		if (prevEmitted.current !== null && prevEmitted.current !== void 0 && deepEqual(prevEmitted.current, next)) return;
+		prevEmitted.current = next;
+		onChange(next);
+	}, [values, onChange]);
+	return null;
+}
+function DirtyStateBridge({ setFormDirty }) {
+	const { dirty } = useFormikContext();
+	useEffect(() => {
+		setFormDirty(dirty);
+	}, [dirty, setFormDirty]);
+	return null;
+}
+/** Three-tier cache: no expressions → raw pass-through; input-dep expressions → re-parse on dep change; org-var/path expressions → parse once. */
+function useFieldParse(optionsField, values, arrayIndex) {
+	const engine = useWorkflowEngine();
+	const c = useRef({
+		lastOptField: null,
+		convertedField: null,
+		inputDeps: /* @__PURE__ */ new Set(),
+		hasExpressions: false,
+		lastRelevant: {},
+		lastIndex: void 0,
+		result: null
+	}).current;
+	if (optionsField !== c.lastOptField) {
+		c.lastOptField = optionsField;
+		c.convertedField = engine.convertInputs(asRecord(optionsField));
+		const { inputDeps, hasExpressions } = engine.inputDependencies(c.convertedField);
+		c.inputDeps = inputDeps;
+		c.hasExpressions = hasExpressions;
+		c.result = null;
+	}
+	if (!c.hasExpressions) return optionsField;
+	if (c.inputDeps.size === 0) {
+		if (c.result !== null) return c.result;
+	}
+	if (c.result !== null) {
+		let changed = arrayIndex !== c.lastIndex;
+		if (!changed) {
+			for (const key of c.inputDeps) if (!deepEqual(values[key], c.lastRelevant[key])) {
+				changed = true;
+				break;
+			}
+		}
+		if (!changed) return c.result;
+	}
+	c.result = engine.evaluate({
+		inputs: values,
+		obj: c.convertedField,
+		orgVars: {},
+		index: arrayIndex
+	});
+	c.lastIndex = arrayIndex;
+	c.lastRelevant = {};
+	for (const key of c.inputDeps) c.lastRelevant[key] = values[key];
+	return c.result;
+}
+var FormField = React.memo(function FormField({ id, optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
+	const parsedField = useFieldParse(optionsField, values, parentInfo?.arrayIndex);
+	const field = asSchemaField(parentInfo ? parsedField : optionsField);
+	if (field === null) return null;
+	const fieldNamePrefix = parentInfo?.fieldNamePrefix || "";
+	const fieldObj = {
+		...field,
+		label: field.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
+		name: fieldNamePrefix + fieldName,
+		optional: resolvedFlag(field.optional) ?? field.default !== void 0
+	};
+	if (!fieldObj["name"] || fieldName === "v3") return null;
+	if (field.hidden === true || !field.type) {
+		if (resolvedFlag(field.ignore) && !workflowForm) deleteFieldByPath(values, fieldObj["name"]);
+		return null;
+	}
+	if (!field.type && field.options) fieldObj["type"] = "dropdown";
+	let onChange;
+	if (field.one_must_be_true && parentInfo?.onChange) {
+		const parentOnChange = parentInfo.onChange;
+		const parentArrayIndex = parentInfo.arrayIndex ?? 0;
+		const fieldOptions = fieldObj["options"];
+		onChange = (val) => parentOnChange(fieldName, parentArrayIndex, flagValue(fieldOptions?.["offOption"], false), flagValue(fieldOptions?.["onOption"], true), val);
+	}
+	if (field.show_if !== void 0 || field.show_if_not !== void 0) {
+		let index;
+		if (parentInfo) {
+			if (!parentInfo?.arrayIndex) index = getClosestParentIndex(parentInfo.fieldNamePrefix);
+			else index = parentInfo.arrayIndex;
+		}
+		let shouldShowField = true;
+		if (field.show_if !== void 0) shouldShowField = !!getParentValue(index, field.show_if, values, "", field);
+		if (shouldShowField && field.show_if_not !== void 0) shouldShowField = !getParentValue(index, field.show_if_not, values, "", field);
+		if (!shouldShowField) {
+			if (!workflowForm) deleteFieldByPath(values, fieldObj["name"]);
+			return null;
+		}
+	}
+	if (field.depends_on) {
+		if (parentInfo?.arrayIndex !== void 0) fieldObj["depends_on"] = field.depends_on.replace("[index]", `[${parentInfo.arrayIndex}]`);
+	}
+	if (field.enable_if && field.disabled === false) {
+		if (typeof field.enable_if === "string") {
+			let path = field.enable_if;
+			if (parentInfo?.arrayIndex !== void 0) path = field.enable_if.replace("[index]", `[${parentInfo.arrayIndex}]`);
+			if (getValueUsingPath(values, path) === false) fieldObj["disabled"] = true;
+		}
+	}
+	if (field.type === "group") {
+		const hideHeader = field.noCollapse;
+		const HeaderElement = hideHeader ? React.Fragment : UncontrolledCollapsiblePanel;
+		const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact);
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col w-full",
+			children: /* @__PURE__ */ jsx(HeaderElement, {
+				...!hideHeader && {
+					title: (open, setOpen) => /* @__PURE__ */ jsx(GroupHeader, {
+						open,
+						setOpen,
+						title: field.label
+					}),
+					initialState: field.collapsed !== void 0 ? !field.collapsed : true
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+						options: field.options ?? {},
+						setFormDirty,
+						setFieldValue,
+						setFieldTouched,
+						values,
+						parentInfo,
+						workflowForm,
+						labelPosition: meta.labelPosition,
+						spaceCompact: meta.spaceCompact,
+						missingFields
+					})
+				})
+			})
+		}, fieldObj["name"]);
+	}
+	if (typeof field.type === "object" && field.depends_on) {
+		const parentValue = getValueUsingPath(values, field.depends_on);
+		const resolvedType = field.type[String(parentValue)];
+		if (!resolvedType) return null;
+		fieldObj["type"] = resolvedType;
+	}
+	if (field.type === "range" && field.depends_on) {
+		const parentValue = getValueUsingPath(values, field.depends_on);
+		const { min, max } = field;
+		if (typeof min === "object" && typeof max === "object") {
+			fieldObj["min"] = min[String(parentValue)];
+			fieldObj["max"] = max[String(parentValue)];
+		}
+	}
+	if (field.resetOnChange) {
+		const parentValue = getValueUsingPath(values, field.resetOnChange);
+		const prevParentValue = field.prevParentValue;
+		if (prevParentValue !== void 0 && prevParentValue !== parentValue) deleteFieldByPath(values, fieldObj["name"]);
+		field.prevParentValue = parentValue;
+	}
+	if (field.secondaryField) {
+		if (Array.isArray(field.secondaryField)) fieldObj["secondaryField"] = field.secondaryField.map((secondaryField) => fieldNamePrefix + secondaryField);
+		else fieldObj["secondaryField"] = fieldNamePrefix + field.secondaryField;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
+		children: /* @__PURE__ */ jsx(InputField, {
+			field: fieldObj,
+			label: fieldObj["label"],
+			setFormDirty,
+			setFieldValue,
+			setFieldTouched,
+			values,
+			currentValue: getValueUsingPath(values, fieldObj["name"]),
+			onChange,
+			disabled: Boolean(fieldObj["disabled"]),
+			computeOn: parentInfo?.computeOn || fieldObj["computeOn"],
+			labelPosition,
+			missingFields,
+			spaceCompact,
+			workflowForm
+		})
+	}, `field-${id}`);
+}, (prev, next) => {
+	if (!deepEqual(prev.optionsField, next.optionsField)) return false;
+	if (prev.values !== next.values) return false;
+	if (!deepEqual(prev.parentInfo, next.parentInfo)) return false;
+	if (!deepEqual(prev.missingFields, next.missingFields)) return false;
+	if (prev.labelPosition !== next.labelPosition) return false;
+	if (prev.spaceCompact !== next.spaceCompact) return false;
+	if (prev.workflowForm !== next.workflowForm) return false;
+	return true;
+});
+function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
+	return Object.keys(options).map((fieldName, idx) => /* @__PURE__ */ jsx(FormField, {
+		id: idx,
+		optionsField: options[fieldName],
+		fieldName,
+		values,
+		setFormDirty,
+		setFieldValue,
+		setFieldTouched,
+		parentInfo,
+		labelPosition,
+		missingFields,
+		spaceCompact,
+		workflowForm
+	}, fieldName));
+}
+var noop = () => {};
+function DynamicFormContent({ options, setValues, setFormDirty, labelPosition, missingFields, spaceCompact, organizationVariables, remoteVars, workflowForm, onSubmit, submitLabel, values, contextKey }) {
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const opts = useParsedOpts(options, values, organizationVariables, void 0, void 0, remoteVars);
+	const handleChange = useCallback((state) => {
+		if (setValues) setValues(state);
+	}, [setValues]);
+	const wizardConfig = parseWizardConfig(opts);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(DirtyStateBridge, { setFormDirty }),
+		/* @__PURE__ */ jsx(FormikStateBridge, { onChange: handleChange }),
+		/* @__PURE__ */ jsx(DynamicDefaultsSync, { options: opts }, contextKey ?? ""),
+		wizardConfig !== null && wizardConfig ? /* @__PURE__ */ jsx(WizardContainer, {
+			wizardConfig,
+			values,
+			onChange: handleChange,
+			onSubmit,
+			className: "w-full",
+			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			missingFields,
+			workflowForm,
+			setFieldValue,
+			setFieldTouched
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldsFromOptions, {
+			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			options: opts,
+			values,
+			setFormDirty,
+			setFieldValue,
+			setFieldTouched,
+			missingFields,
+			workflowForm
+		}), onSubmit !== void 0 && !workflowForm && /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: /* @__PURE__ */ jsx("input", {
+				type: "submit",
+				className: "btn btn-info",
+				value: submitLabel
+			})
+		})] })
+	] });
+}
+var NO_FIELDS = {};
+function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialValues, setValues, setFormDirty = noop, formikRef, labelPosition = "left", missingFields = [], spaceCompact = false, organizationVariables, remoteVars, needsOrganizationVariables = false, onSubmit = void 0, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS }) {
+	const engine = useWorkflowEngine();
+	const [parseReady, setParseReady] = useState(() => engine.isReady());
+	useEffect(() => {
+		engine.init();
+		return engine.onReady(setParseReady);
+	}, [engine]);
+	if (!parseReady) return /* @__PURE__ */ jsx(Loader, {});
+	const parsedInitVals = skipValueParse ? initialValues : initialValues && engine.evaluate({
+		inputs: initialValues,
+		obj: initialValues,
+		orgVars: organizationVariables,
+		remoteVars
+	});
+	return /* @__PURE__ */ jsx(FieldRegistryContext.Provider, {
+		value: fields,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children: (!needsOrganizationVariables || organizationVariables) && initialValues && /* @__PURE__ */ jsx(Formik, {
+				enableReinitialize: reinitialize,
+				initialValues: parsedInitVals,
+				onSubmit: onSubmit ?? (() => {}),
+				onReset: () => {
+					setFormDirty(false);
+				},
+				...formikRef ? { innerRef: formikRef } : {},
+				children: ({ values }) => /* @__PURE__ */ jsx(Form, {
+					className: "w-full text-[13px]",
+					children: /* @__PURE__ */ jsx(DynamicFormContent, {
+						values,
+						options,
+						setValues,
+						setFormDirty,
+						labelPosition,
+						missingFields,
+						spaceCompact,
+						organizationVariables,
+						remoteVars,
+						workflowForm,
+						onSubmit,
+						submitLabel,
+						contextKey
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, GroupHeader, MultiSelectionDropdown, collectFieldsWithDefaults, defaultReferencesField, findSelfReferencingFieldNames, listLengthsSignature, resolveMetaOverrides, useDynamicDefaultsSync };

package/dist/form/SpecialTypes/DropdownWrapper.js

@@ -0,0 +1,30 @@
+import FormikCustomDropdown_default from "./FormikCustomDropdown.js";
+import { getPlaceholder } from "../utils/getPlaceholder.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/SpecialTypes/DropdownWrapper.tsx
+function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid = false, loading = false, disabled = void 0, allowCustomValue = void 0, currentValue, setFieldValue, setFieldTouched }) {
+	return /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
+		invalid,
+		className: "w-full",
+		onChange,
+		loading,
+		setFormDirty,
+		options,
+		disabled: disabled ?? Boolean(fieldObj.disabled),
+		placeholder: getPlaceholder(fieldObj.placeholder, typeof fieldObj.default === "string" ? fieldObj.default : void 0),
+		name: fieldObj.name ?? "",
+		ariaLabel: fieldObj.label,
+		parentValue: fieldObj.parentValue,
+		secondaryField: fieldObj.secondaryField,
+		resetOnChange: fieldObj.resetOnChange,
+		value: fieldObj.value,
+		autoselect: fieldObj.autoselect === void 0 ? void 0 : Boolean(fieldObj.autoselect),
+		allowCustomValue: allowCustomValue ?? fieldObj.allowCustomValue,
+		customValueLabel: fieldObj.customValueLabel,
+		currentValue,
+		setFieldValue,
+		setFieldTouched
+	});
+}
+//#endregion
+export { DropdownWrapper as default };