@parallelworks/ui 0.41.0 → 0.42.0

package/dist/form/Form.js

@@ -1,29 +1,24 @@
-import { useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
-import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
-import { TooltipInfo } from "../components/Tooltip.js";
-import { UncontrolledCollapsiblePanel } from "../components/CollapsiblePanel.js";
-import CustomListbox from "../components/Listbox.js";
+import { useWorkflowEngine } from "../components/Provider.js";
+import { InfoTip } from "../components/InfoTip.js";
 import Loader from "../components/Loader.js";
-import SectionHeader from "../components/SectionHeader.js";
-import { Table } from "../components/Table.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { inputWidth, resolvedFlag } from "./lib.js";
+import { FieldGroup } from "./FieldGroup.js";
 import { resolveFormLayout } from "./layout.js";
 import { FormLayout, LayoutCSSContext } from "./FormLayout.js";
-import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
-import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { EditingScope, useFormEditing } from "./formEditing.js";
+import { shareEqual } from "./utils/shareEqual.js";
 import { useParsedOpts } from "./useParsedOpts.js";
-import { usePrevious } from "./usePrevious.js";
+import { atIndex, fieldPath, rowIndexOf } from "./utils/fieldPath.js";
+import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { getParentValue } from "./utils/getParentValue.js";
 import { WizardContainer } from "./Wizard/WizardContainer.js";
-import cx from "classnames";
-import React, { createContext, useCallback, useContext, 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";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, memo, useContext, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { dequal } from "dequal";
+import { FormProvider, get, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 //#region src/form/Form.tsx
 function asSchemaField(value) {
 	return value && typeof value === "object" ? value : null;
@@ -62,7 +57,7 @@ function listLengthsSignature(options, values = {}, prefix = "") {
 			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}].`));
+			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));
@@ -76,7 +71,8 @@ function listLengthsSignature(options, values = {}, prefix = "") {
 	}
 	return parts.join("|");
 }
-/** Collects every field with a `default` for the form-level sync to track. */
+/** Collects every field with a `default` for the form-level sync to track, named as the form store
+* names it: a row's fields by `list.0.field`. */
 function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 	const result = [];
 	if (!options || typeof options !== "object") return result;
@@ -102,7 +98,7 @@ function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 			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}].`));
+				result.push(...collectFieldsWithDefaults(listTemplate, itemValues, `${fullName}.${i}.`));
 			}
 			continue;
 		}
@@ -123,15 +119,14 @@ function defaultReferencesField(defaultValue, fieldPath) {
 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. */
+/** Resolves schema defaults into form values as dependencies change. Store-agnostic so the 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 index = rowIndexOf(f.name) ?? -1;
 		const parsed = engine.evaluate({
 			inputs: values,
 			obj: { v: f.defaultValue },
@@ -144,11 +139,16 @@ function useDynamicDefaultsSync({ options, values, setValue, isTouched }) {
 			defaultValue: resolved
 		};
 	}), [options, listSig]);
+	const pendingRef = useRef([]);
+	useEffect(() => {
+		const pending = pendingRef.current.splice(0);
+		for (const [name, value] of pending) setValue(name, value);
+	});
 	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)) {
+	if (!dequal(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)) {
@@ -163,8 +163,8 @@ function useDynamicDefaultsSync({ options, values, setValue, isTouched }) {
 		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);
+				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;
@@ -190,367 +190,227 @@ function useDynamicDefaultsSync({ options, values, setValue, isTouched }) {
 			}
 			if (prevDefault === serializedDefault) continue;
 			if (defaultValue === null || defaultValue === void 0) continue;
-			if (JSON.stringify(getValueUsingPath(values, name)) !== serializedDefault) setValue(name, defaultValue);
+			if (JSON.stringify(getValueUsingPath(values, name)) !== serializedDefault) pendingRef.current.push([name, defaultValue]);
 		}
 	}
 }
 function DynamicDefaultsSync({ options }) {
-	const { setFieldValue, getFieldMeta, values } = useFormikContext();
+	const { control, setValue, getFieldState } = useFormContext();
 	useDynamicDefaultsSync({
 		options,
-		values,
-		setValue: setFieldValue,
-		isTouched: (name) => getFieldMeta(name).touched
+		values: useWatch({ control }),
+		setValue: (name, value) => setValue(name, value, { shouldDirty: true }),
+		isTouched: (name) => getFieldState(name).isTouched
 	});
 	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,
-			"data-field-label": true,
-			className: "w-full flex items-center text-left transform ease-in transition cursor-pointer",
-			onClick: () => setOpen((open) => !open),
-			children: [/* @__PURE__ */ jsx(FaAngleRight, { 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;
+var FormOptionsContext = createContext({ workflowForm: false });
+/** Parses a field's schema against the form's values, again only when an input it reads changes.
+* Without expressions the schema is its own parse; with only org-var or path expressions it parses once. */
+function useFieldParse(optionsField, arrayIndex) {
+	const engine = useWorkflowEngine();
+	const cache = useRef(null);
+	let c = cache.current;
+	if (c === null || c.optionsField !== optionsField) {
+		const converted = engine.convertInputs(asRecord(optionsField));
+		const { inputDeps, hasExpressions } = engine.inputDependencies(converted);
+		c = {
+			optionsField,
+			converted,
+			inputDeps: [...inputDeps],
+			hasExpressions,
+			key: null,
+			result: null
+		};
+		cache.current = c;
 	}
-	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];
+	const parse = c;
+	return (values) => {
+		if (!parse.hasExpressions) return optionsField;
+		const key = JSON.stringify([arrayIndex, ...parse.inputDeps.map((dep) => values[dep])]);
+		if (key !== parse.key) {
+			parse.key = key;
+			parse.result = shareEqual(parse.result, engine.evaluate({
+				inputs: values,
+				obj: parse.converted,
+				orgVars: {},
+				index: arrayIndex
+			}));
+		}
+		return parse.result;
+	};
 }
-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), 10);
-	}
+/** Whether a field's `show_if` and `show_if_not` let it show. */
+function shows(field, values, index) {
+	if (field.show_if !== void 0 && !getParentValue(index, field.show_if, values, field)) return false;
+	return field.show_if_not === void 0 || !getParentValue(index, field.show_if_not, values, field);
 }
-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(() => initialOptions.map((option) => {
-		const op = typeof option === "string" ? {
-			label: option,
-			value: option
-		} : option;
-		return {
-			...op,
-			selected: !!field.value?.includes(op.value) || !!op.selected
-		};
-	}), [initialOptions, field.value]);
-	const handleOptionSelected = (selectedValue) => {
-		setFieldValue(name, [...field.value ?? [], selectedValue]);
-		onChange?.(options);
-		setFormDirty(true);
+function readField(field, values, index, workflowForm) {
+	if (field === null) return {
+		hidden: true,
+		clears: false,
+		disabledByInput: false,
+		parentValue: void 0,
+		resetBy: void 0
 	};
-	const t = useStrings().common;
-	const handleRemoveOption = (key) => {
-		setFieldValue(name, field.value.filter((item) => item !== key));
-		onChange?.(options);
-		setFormDirty(true);
+	const markedHidden = field.hidden === true || !field.type;
+	const hidden = markedHidden || !shows(field, values, index);
+	const clears = hidden && !workflowForm && (!markedHidden || Boolean(resolvedFlag(field.ignore)));
+	const enableIf = typeof field.enable_if === "string" && field.disabled === false ? getValueUsingPath(values, atIndex(field.enable_if, index)) : void 0;
+	const typedByParent = field.depends_on !== void 0 && (typeof field.type === "object" || field.type === "range");
+	return {
+		hidden,
+		clears,
+		disabledByInput: enableIf === false,
+		parentValue: typedByParent ? getValueUsingPath(values, atIndex(field.depends_on ?? "", index)) : void 0,
+		resetBy: field.resetOnChange ? JSON.stringify(getValueUsingPath(values, field.resetOnChange)) : void 0
 	};
-	const prevParent = usePrevious(parentValue);
+}
+/**
+* One field of the schema. It renders again only when what it reads changes: an input its expressions
+* or conditions read, or whether the form marks it missing. Its own value is its input's business.
+*/
+var FormField = memo(function FormField({ fieldName, optionsField, nested, fieldNamePrefix, arrayIndex, computeOn, onRowChange, labelPosition, spaceCompact }) {
+	const { control, getValues, setValue, unregister } = useFormContext();
+	const { workflowForm } = useContext(FormOptionsContext);
+	const editing = useFormEditing();
+	const parse = useFieldParse(optionsField, nested ? arrayIndex : void 0);
+	const index = nested ? arrayIndex ?? rowIndexOf(fieldNamePrefix) : void 0;
+	const instance = fieldNamePrefix + fieldName;
+	const name = fieldPath(instance);
+	const schemaOf = (values) => asSchemaField(nested ? parse(values) : optionsField);
+	useWatch({
+		control,
+		compute: (values) => {
+			const field = schemaOf(values);
+			const reads = readField(field, values, index, workflowForm);
+			return [
+				field,
+				JSON.stringify(reads),
+				reads.clears && getValueUsingPath(values, name) !== void 0
+			];
+		}
+	});
+	const { errors } = useFormState({
+		control,
+		name,
+		exact: true
+	});
+	const values = getValues();
+	const field = schemaOf(values);
+	const reads = readField(field, values, index, workflowForm);
+	const holdsValue = reads.clears && getValueUsingPath(values, name) !== void 0;
 	useEffect(() => {
-		if (prevParent && parentValue && prevParent !== parentValue) setFieldValue(name, []);
+		if (holdsValue) unregister(name);
 	}, [
-		parentValue,
-		prevParent,
+		holdsValue,
 		name,
-		setFieldValue
+		unregister
 	]);
-	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(BiSolidTrashAlt, { 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)) prevField.current = field;
-		return prevField.current;
-	}, [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 && deepEqual(prevEmitted.current, next)) return;
-		prevEmitted.current = next;
-		onChange(next);
-	}, [values, onChange]);
-	return null;
-}
-function DirtyStateBridge({ setFormDirty }) {
-	const { dirty } = useFormikContext();
+	const resetFrom = useRef(reads.resetBy);
 	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.result !== null) {
-		if (c.inputDeps.size === 0 || arrayIndex === c.lastIndex && [...c.inputDeps].every((key) => deepEqual(values[key], c.lastRelevant[key]))) 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({ optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
-	const parsedField = useFieldParse(optionsField, values, parentInfo?.arrayIndex);
-	const editing = useFormEditing();
+		if (resetFrom.current !== void 0 && resetFrom.current !== reads.resetBy) setValue(name, void 0);
+		resetFrom.current = reads.resetBy;
+	}, [
+		reads.resetBy,
+		name,
+		setValue
+	]);
+	const tooltip = field?.tooltip;
+	const tooltipComponent = useMemo(() => tooltip ? /* @__PURE__ */ jsx(InfoTip, {
+		className: "pr-2",
+		text: typeof tooltip === "string" ? tooltip.replace(/\r/g, "") : tooltip.filter(Boolean).join("\n")
+	}) : null, [tooltip]);
 	const path = editing ? [...editing.parent, fieldName] : null;
-	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 editing && path && fieldName !== "$meta" ? /* @__PURE__ */ jsx(editing.Row, {
-			path,
-			instance: fieldObj.name,
-			hidden: true
-		}) : null;
-	}
-	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) {
-		const index = parentInfo ? parentInfo.arrayIndex || getClosestParentIndex(parentInfo.fieldNamePrefix) : void 0;
-		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 editing && path ? /* @__PURE__ */ jsx(editing.Row, {
-				path,
-				instance: fieldObj.name,
-				hidden: true
-			}) : null;
-		}
-	}
-	if (field.depends_on && 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 === null || fieldName === "v3") return null;
+	if (reads.hidden) return editing && path && fieldName !== "$meta" ? /* @__PURE__ */ jsx(editing.Row, {
+		path,
+		instance,
+		hidden: true
+	}) : null;
+	const parentInfo = nested ? {
+		fieldNamePrefix,
+		arrayIndex,
+		computeOn,
+		onChange: onRowChange
+	} : void 0;
 	if (field.type === "group") {
-		const hideHeader = field.noCollapse;
-		const HeaderElement = hideHeader ? React.Fragment : UncontrolledCollapsiblePanel;
 		const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact);
-		const group = /* @__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(EditingScope, {
-						editing,
-						path,
-						children: /* @__PURE__ */ jsx(FieldsFromOptions, {
-							options: field.options ?? {},
-							setFormDirty,
-							setFieldValue,
-							setFieldTouched,
-							values,
-							parentInfo,
-							workflowForm,
-							labelPosition: meta.labelPosition,
-							spaceCompact: meta.spaceCompact,
-							missingFields
-						})
-					})
+		const group = /* @__PURE__ */ jsx(FieldGroup, {
+			title: field.label,
+			collapsible: !field.noCollapse,
+			defaultOpen: !field.collapsed,
+			children: /* @__PURE__ */ jsx(EditingScope, {
+				editing,
+				path,
+				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+					options: field.options ?? {},
+					parentInfo,
+					labelPosition: meta.labelPosition,
+					spaceCompact: meta.spaceCompact
 				})
 			})
 		});
 		return editing && path ? /* @__PURE__ */ jsx(editing.Row, {
 			path,
-			instance: fieldObj.name,
+			instance,
 			children: group
 		}) : group;
 	}
+	const fieldObj = {
+		...field,
+		label: field.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
+		name,
+		optional: resolvedFlag(field.optional) ?? field.default !== void 0
+	};
+	if (field.depends_on) fieldObj.depends_on = fieldPath(atIndex(field.depends_on, index));
+	if (reads.disabledByInput) fieldObj.disabled = true;
 	if (typeof field.type === "object" && field.depends_on) {
-		const parentValue = getValueUsingPath(values, field.depends_on);
-		const resolvedType = field.type[String(parentValue)];
+		const resolvedType = field.type[String(reads.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)];
+			fieldObj.min = min[String(reads.parentValue)];
+			fieldObj.max = max[String(reads.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;
+	if (field.secondaryField) fieldObj.secondaryField = Array.isArray(field.secondaryField) ? field.secondaryField.map((secondary) => fieldPath(fieldNamePrefix + secondary)) : fieldPath(fieldNamePrefix + field.secondaryField);
+	let onChange;
+	if (field.one_must_be_true && onRowChange) {
+		const fieldOptions = fieldObj.options;
+		onChange = (val) => onRowChange(fieldName, arrayIndex ?? 0, flagValue(fieldOptions?.["offOption"], false), flagValue(fieldOptions?.["onOption"], true), val);
 	}
 	const input = /* @__PURE__ */ jsx("div", {
-		className: cx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
-		children: /* @__PURE__ */ jsx(InputField, {
+		className: clsx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
+		children: /* @__PURE__ */ jsx(Registry, {
 			field: fieldObj,
-			label: fieldObj.label,
-			setFormDirty,
-			setFieldValue,
-			setFieldTouched,
-			values,
-			currentValue: getValueUsingPath(values, fieldObj.name),
+			label: fieldObj.label ?? "",
+			labelPosition,
+			missing: get(errors, name) !== void 0,
 			onChange,
 			disabled: Boolean(fieldObj.disabled),
-			computeOn: parentInfo?.computeOn || fieldObj.computeOn,
-			labelPosition,
-			missingFields,
+			computeOn: computeOn || fieldObj.computeOn,
 			spaceCompact,
-			workflowForm
+			tooltipComponent
 		})
 	});
 	if (!editing || !path) return input;
 	const holds = fieldObj.type === "object" || fieldObj.type === "list";
 	return /* @__PURE__ */ jsx(editing.Row, {
 		path,
-		instance: fieldObj.name,
+		instance,
 		children: /* @__PURE__ */ jsx(EditingScope, {
 			editing,
 			path: holds ? path : null,
 			children: input
 		})
 	});
-}, (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 }) {
+/** Renders a schema's fields. Inside another field, `parentInfo` says where their values sit. */
+function FieldsFromOptions({ options = {}, parentInfo, labelPosition = "left", spaceCompact = false }) {
 	const editing = useFormEditing();
 	const chosen = useChosenLabelPosition(options);
 	const wizard = parseWizardConfig(options);
@@ -558,16 +418,11 @@ function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue,
 		value: chosen,
 		children: /* @__PURE__ */ jsx(WizardContainer, {
 			wizardConfig: wizard,
-			values,
 			className: "w-full",
 			labelPosition,
-			missingFields,
 			spaceCompact,
-			workflowForm,
 			nested: true,
-			fieldNamePrefix: parentInfo?.fieldNamePrefix,
-			setFieldValue,
-			setFieldTouched
+			fieldNamePrefix: parentInfo?.fieldNamePrefix
 		})
 	});
 	const names = Object.keys(options);
@@ -579,15 +434,13 @@ function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue,
 	const fieldOf = (fieldName, compactLabels = false) => /* @__PURE__ */ jsx(FormField, {
 		optionsField: options[fieldName],
 		fieldName,
-		values,
-		setFormDirty,
-		setFieldValue,
-		setFieldTouched,
-		parentInfo,
+		nested: parentInfo !== void 0,
+		fieldNamePrefix: parentInfo?.fieldNamePrefix ?? "",
+		arrayIndex: parentInfo?.arrayIndex,
+		computeOn: parentInfo?.computeOn,
+		onRowChange: parentInfo?.onChange,
 		labelPosition: compactLabels ? chosen ?? "top" : labelPosition,
-		missingFields,
-		spaceCompact,
-		workflowForm
+		spaceCompact
 	}, fieldName);
 	const add = editing ? /* @__PURE__ */ jsx(editing.Add, { parent: editing.parent }) : null;
 	const layout = resolveFormLayout(asRecord(options["$meta"])["layout"], names.filter((name) => !name.startsWith("$") && asSchemaField(options[name])));
@@ -629,10 +482,9 @@ function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue,
 				className: "order-2 w-full px-2",
 				children: add
 			})]
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [names.map((name) => fieldOf(name, void 0)), add] })
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [names.map((name) => fieldOf(name, void 0)), add] })
 	});
 }
-var noop = () => {};
 function repeatsPage(field) {
 	return field.type === "step" && field.multi === true;
 }
@@ -661,95 +513,137 @@ function widthVars(width, wide) {
 		"--input-narrow": width?.endsWith("px") ? width : "100%"
 	};
 }
-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) => setValues?.(state), [setValues]);
+/** The form's schema parsed against its values. The form renders again only when an input the schema
+* reads changes, and a field the change leaves alone keeps its identity, so it doesn't render. */
+function useSchema(options, organizationVariables, remoteVars) {
+	const engine = useWorkflowEngine();
+	const { control, getValues } = useFormContext();
+	const reads = useMemo(() => [...engine.inputDependencies(engine.convertInputs(options)).inputDeps], [engine, options]);
+	useWatch({
+		control,
+		compute: (values) => JSON.stringify(reads.map((key) => values[key]))
+	});
+	return useParsedOpts(options, getValues(), organizationVariables, void 0, void 0, remoteVars);
+}
+function DynamicFormContent({ options, labelPosition, spaceCompact, organizationVariables, remoteVars, onSubmit, submitLabel, contextKey }) {
+	const { workflowForm } = useContext(FormOptionsContext);
+	const opts = useSchema(options, organizationVariables, remoteVars);
 	const wizardConfig = parseWizardConfig(opts);
 	const meta = resolveMetaOverrides(options, labelPosition, spaceCompact);
 	const chosen = useChosenLabelPosition(options);
 	return /* @__PURE__ */ jsxs(ChosenLabelPosition.Provider, {
 		value: chosen,
-		children: [
-			/* @__PURE__ */ jsx(DirtyStateBridge, { setFormDirty }),
-			/* @__PURE__ */ jsx(FormikStateBridge, { onChange: handleChange }),
-			/* @__PURE__ */ jsx(DynamicDefaultsSync, { options: opts }, contextKey ?? ""),
-			wizardConfig ? /* @__PURE__ */ jsx(WizardContainer, {
-				wizardConfig,
-				values,
-				onChange: handleChange,
-				onSubmit,
-				className: "w-full",
-				...meta,
-				missingFields,
-				workflowForm,
-				setFieldValue,
-				setFieldTouched
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldsFromOptions, {
-				...meta,
-				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
-				})
-			})] })
-		]
+		children: [/* @__PURE__ */ jsx(DynamicDefaultsSync, { options: opts }, contextKey ?? ""), wizardConfig ? /* @__PURE__ */ jsx(WizardContainer, {
+			wizardConfig,
+			onSubmit,
+			className: "w-full",
+			...meta
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldsFromOptions, {
+			...meta,
+			options: opts
+		}), 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, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS, allowLayoutCSS = false }) {
+var NO_MISSING = [];
+/** A form drawn from a workflow's schema. */
+function DynamicForm({ form, ...props }) {
+	return form ? /* @__PURE__ */ jsx(DynamicFormBody, {
+		...props,
+		form
+	}) : /* @__PURE__ */ jsx(OwnForm, { ...props });
+}
+function OwnForm(props) {
+	const form = useForm();
+	return /* @__PURE__ */ jsx(DynamicFormBody, {
+		...props,
+		form
+	});
+}
+function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false, initialValues, onValuesChange, labelPosition = "left", missingFields = NO_MISSING, spaceCompact = false, organizationVariables, remoteVars, needsOrganizationVariables = false, onSubmit, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS, allowLayoutCSS = false }) {
 	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({
+	const ready = parseReady && (!needsOrganizationVariables || organizationVariables !== void 0);
+	const parsed = useMemo(() => !ready || !initialValues ? void 0 : skipValueParse ? initialValues : engine.evaluate({
 		inputs: initialValues,
 		obj: initialValues,
 		orgVars: organizationVariables,
 		remoteVars
+	}), [
+		ready,
+		initialValues,
+		skipValueParse,
+		engine,
+		organizationVariables,
+		remoteVars
+	]);
+	const load = parsed === void 0 ? void 0 : reinitialize ? JSON.stringify(parsed) : "";
+	const [loaded, setLoaded] = useState();
+	useLayoutEffect(() => {
+		if (load !== void 0 && load !== loaded) {
+			form.reset(parsed);
+			setLoaded(load);
+		}
+	}, [
+		form,
+		load,
+		loaded,
+		parsed
+	]);
+	const report = useEffectEvent((values) => {
+		const { editorKeyPostfix: _, ...rest } = values;
+		onValuesChange?.(rest);
 	});
+	useEffect(() => form.subscribe({
+		formState: { values: true },
+		callback: ({ values }) => report(values)
+	}), [form]);
+	const formOptions = useMemo(() => ({ workflowForm }), [workflowForm]);
+	const missing = missingFields.join("\n");
+	useEffect(() => {
+		if (!missing || loaded === void 0) return;
+		const names = missing.split("\n").map(fieldPath);
+		for (const name of names) form.setError(name, { type: "required" });
+		return () => form.clearErrors(names);
+	}, [
+		form,
+		missing,
+		loaded
+	]);
 	return /* @__PURE__ */ jsx(FieldRegistryContext.Provider, {
 		value: fields,
 		children: /* @__PURE__ */ jsx(LayoutCSSContext.Provider, {
 			value: allowLayoutCSS,
-			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
+			children: /* @__PURE__ */ jsx(FormOptionsContext.Provider, {
+				value: formOptions,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children: !parseReady ? /* @__PURE__ */ jsx(Loader, {}) : loaded !== void 0 && /* @__PURE__ */ jsx(FormProvider, {
+						...form,
+						children: /* @__PURE__ */ jsx("form", {
+							className: "w-full text-[13px]",
+							onSubmit: form.handleSubmit((values) => onSubmit?.(values)),
+							children: /* @__PURE__ */ jsx(DynamicFormContent, {
+								options,
+								labelPosition,
+								spaceCompact,
+								organizationVariables,
+								remoteVars,
+								onSubmit,
+								submitLabel,
+								contextKey
+							})
 						})
 					})
 				})
@@ -758,4 +652,4 @@ function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialVal
 	});
 }
 //#endregion
-export { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, GroupHeader, MultiSelectionDropdown, collectFieldsWithDefaults, defaultReferencesField, findSelfReferencingFieldNames, listLengthsSignature, resolveMetaOverrides, useDynamicDefaultsSync };
+export { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, collectFieldsWithDefaults, defaultReferencesField, findSelfReferencingFieldNames, listLengthsSignature, resolveMetaOverrides, useDynamicDefaultsSync };