@parallelworks/ui 0.20.0 → 0.21.1

package/dist/form/Fields/ObjectField.js

@@ -1,14 +1,32 @@
 import { ControlledCollapsiblePanel } from "../../components/CollapsiblePanel.js";
 import { FieldsFromOptions, GroupHeader, resolveMetaOverrides } from "../Form.js";
-import React, { useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
 //#region src/form/Fields/ObjectField.tsx
 function ObjectField({ field, label, tooltipComponent, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact }) {
+	const fieldName = field.name ?? "";
 	const [open, setOpen] = useState(field.collapsed !== void 0 ? !field.collapsed : true);
 	const { values, setFieldValue, setFieldTouched } = useFormikContext();
 	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
-	const HeaderElement = field.noCollapse ? React.Fragment : ControlledCollapsiblePanel;
+	const body = /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+			options: field.options,
+			values,
+			setFormDirty,
+			setFieldValue,
+			setFieldTouched,
+			missingFields,
+			workflowForm,
+			labelPosition: meta.labelPosition,
+			spaceCompact: meta.spaceCompact,
+			parentInfo: {
+				parentName: fieldName,
+				fieldNamePrefix: `${fieldName}.`
+			}
+		})
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col w-full",
 		children: [field.noCollapse && /* @__PURE__ */ jsx("div", {
@@ -21,7 +39,7 @@ function ObjectField({ field, label, tooltipComponent, missingFields, setFormDir
 					tooltipComponent
 				]
 			})
-		}), /* @__PURE__ */ jsx(HeaderElement, {
+		}), field.noCollapse ? body : /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
 			open,
 			setOpen,
 			title: /* @__PURE__ */ jsx(GroupHeader, {
@@ -29,24 +47,7 @@ function ObjectField({ field, label, tooltipComponent, missingFields, setFormDir
 				setOpen,
 				title: field.label || label
 			}),
-			children: /* @__PURE__ */ jsx("div", {
-				className: "w-full",
-				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
-					options: field.options,
-					values,
-					setFormDirty,
-					setFieldValue,
-					setFieldTouched,
-					missingFields,
-					workflowForm,
-					labelPosition: meta.labelPosition,
-					spaceCompact: meta.spaceCompact,
-					parentInfo: {
-						parentName: field.name,
-						fieldNamePrefix: `${field.name}.`
-					}
-				})
-			})
+			children: body
 		})]
 	});
 }

package/dist/form/Fields/RadioField.js

@@ -6,13 +6,14 @@ import { Field, useFormikContext } from "formik";
 //#region src/form/Fields/RadioField.tsx
 function RadioField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const fieldName = field.name ?? "";
 	const uid = useId();
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (val) => {
 		if (disabled) return;
-		if (onChange) onChange(val);
-		setFieldTouched(field.name, true);
-		setFieldValue(field.name, val);
+		onChange?.(val);
+		setFieldTouched(fieldName, true);
+		setFieldValue(fieldName, val);
 		setFormDirty(true);
 	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {

package/dist/form/Fields/RangeField.js

@@ -5,20 +5,21 @@ import { Field, useField, useFormikContext } from "formik";
 //#region src/form/Fields/RangeField.tsx
 function RangeField(props) {
 	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
-	const [fieldState] = useField(field.name);
+	const fieldName = field.name ?? "";
+	const [fieldState] = useField(fieldName);
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (e) => {
 		let val = e.target.valueAsNumber;
-		if (!isNaN(val)) {
+		if (!Number.isNaN(val)) {
 			val = Math.max(field.min, Math.min(field.max, val));
-			setFieldValue(field.name, val);
-			if (onChange) onChange(val);
-			setFieldTouched(field.name, true);
+			setFieldValue(fieldName, val);
+			onChange?.(val);
+			setFieldTouched(fieldName, true);
 			setFormDirty(true);
 		}
 	};
 	const seedValue = field.default ?? field.min;
-	if ((fieldState.value === void 0 || fieldState.value === null) && seedValue !== void 0) setFieldValue(field.name, seedValue);
+	if ((fieldState.value === void 0 || fieldState.value === null) && seedValue !== void 0) setFieldValue(fieldName, seedValue);
 	const currentValue = fieldState.value !== void 0 ? fieldState.value : seedValue;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,

package/dist/form/Fields/StringField.js

@@ -6,6 +6,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/StringField.tsx
 var StringField_default = memo(function StringField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, currentValue } = props;
+	const fieldName = field.name ?? "";
 	const value = field.prefillDefault ? currentValue : void 0;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
@@ -16,7 +17,7 @@ var StringField_default = memo(function StringField(props) {
 		spaceCompact,
 		children: /* @__PURE__ */ jsx(FormikCustomInput, {
 			invalid: missing,
-			name: field.name,
+			name: fieldName,
 			type: field.type,
 			lowercase: field.lowercase,
 			placeholder: field.type === "password" && field.placeholder === void 0 ? "•".repeat((field.default ?? "").toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),

package/dist/form/Fields/TextAreaField.js

@@ -6,6 +6,7 @@ import { Field } from "formik";
 //#region src/form/Fields/TextAreaField.tsx
 function TextAreaField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const fieldName = field.name ?? "";
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -19,7 +20,7 @@ function TextAreaField(props) {
 			id,
 			"aria-describedby": describedBy,
 			"aria-required": field.optional ? void 0 : true,
-			name: field.name,
+			name: fieldName,
 			type: "search",
 			placeholder: getPlaceholder(field.placeholder, field.default),
 			disabled,

package/dist/form/Form.d.ts

@@ -41,21 +41,20 @@ export declare function GroupHeader({ children, open, setOpen, title, }: {
     title: React.ReactNode;
 }): React.JSX.Element;
 export type TSetFormDirty = (dirty: boolean) => void;
+interface MultiSelectOption {
+    label: string;
+    secondaryLabel?: string;
+    value: string | boolean | number;
+    selected?: boolean;
+}
 export declare function MultiSelectionDropdown({ name, label, invalid, options: initialOptions, setFormDirty, onChange, parentValue, }: {
     name: string;
     label: string;
     invalid?: boolean;
-    options?: {
-        label: string;
-        secondaryLabel?: string;
-        value: string;
-        selected: boolean;
-    }[];
+    options?: (string | MultiSelectOption)[];
     setFormDirty: TSetFormDirty;
     onChange?: ((val: unknown) => void) | undefined;
     parentValue?: unknown;
-    className?: string;
-    secondaryField?: string | undefined;
 }): React.JSX.Element;
 export declare function FieldsFromOptions({ options, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition, missingFields, spaceCompact, workflowForm, }: {
     options: Record<string, unknown>;

package/dist/form/Form.js

@@ -1,5 +1,6 @@
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { AngleRightIcon, TrashIcon } from "../icons.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";
@@ -8,10 +9,10 @@ import SectionHeader from "../components/SectionHeader.js";
 import { Table } from "../components/Table.js";
 import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
 import { resolvedFlag } from "./lib.js";
+import { getValueUsingPath } from "./utils/getValueUsingPath.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";
@@ -71,8 +72,7 @@ function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 	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;
+		if (fieldName === "$meta" || !field) continue;
 		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
 		if (field.type === "group") {
 			const groupItems = field.items || field.options;
@@ -200,9 +200,9 @@ function GroupHeader({ children, open, setOpen, title }) {
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": open,
-			className: cx("w-full flex items-center text-left transform ease-in transition cursor-pointer"),
+			className: "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: [/* @__PURE__ */ jsx(FaAngleRight, { className: cx(open && "transform rotate-90 ", "px-1 text-[1.25rem]  transition ease-in ") }), /* @__PURE__ */ jsx("span", { children: title })]
 		}), children]
 	});
 }
@@ -224,7 +224,7 @@ 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));
+		return parseInt(parentPath.slice(j + 1, i), 10);
 	}
 }
 function MultiSelectionDropdown({ name, label = "", invalid = false, options: initialOptions = [], setFormDirty, onChange, parentValue }) {
@@ -232,30 +232,25 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 	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 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) => {
-		let selected = [];
-		if (field.value) selected = [...field.value];
-		selected.push(selectedValue);
-		setFieldValue(name, selected);
-		if (onChange) onChange(options);
+		setFieldValue(name, [...field.value ?? [], selectedValue]);
+		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);
+		setFieldValue(name, field.value.filter((item) => item !== key));
+		onChange?.(options);
 		setFormDirty(true);
 	};
 	const prevParent = usePrevious(parentValue);
@@ -279,13 +274,13 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 	}), /* @__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
+			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" })
+			children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "link mr-4" })
 		}) })] }, String(option.value));
 	}) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(Table.Item, { children: [
 		"No ",
@@ -296,9 +291,8 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 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 };
+		if (!deepEqual(prevField.current, field)) prevField.current = field;
+		return prevField.current;
 	}, [field]);
 	const tooltipComponent = useMemo(() => {
 		if (!fieldObj.tooltip) return null;
@@ -340,7 +334,7 @@ function FormikStateBridge({ onChange }) {
 	const prevEmitted = useRef(null);
 	useEffect(() => {
 		const { editorKeyPostfix: _, ...next } = values;
-		if (prevEmitted.current !== null && prevEmitted.current !== void 0 && deepEqual(prevEmitted.current, next)) return;
+		if (prevEmitted.current !== null && deepEqual(prevEmitted.current, next)) return;
 		prevEmitted.current = next;
 		onChange(next);
 	}, [values, onChange]);
@@ -374,18 +368,8 @@ function useFieldParse(optionsField, values, arrayIndex) {
 		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;
+		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,
@@ -398,7 +382,7 @@ function useFieldParse(optionsField, values, arrayIndex) {
 	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 }) {
+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 field = asSchemaField(parentInfo ? parsedField : optionsField);
 	if (field === null) return null;
@@ -409,41 +393,34 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 		name: fieldNamePrefix + fieldName,
 		optional: resolvedFlag(field.optional) ?? field.default !== void 0
 	};
-	if (!fieldObj["name"] || fieldName === "v3") return null;
+	if (!fieldObj.name || fieldName === "v3") return null;
 	if (field.hidden === true || !field.type) {
-		if (resolvedFlag(field.ignore) && !workflowForm) deleteFieldByPath(values, fieldObj["name"]);
+		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"];
+		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;
-		}
+		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 (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"]);
+			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.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 (getValueUsingPath(values, path) === false) fieldObj.disabled = true;
 		}
 	}
 	if (field.type === "group") {
@@ -477,51 +454,51 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 					})
 				})
 			})
-		}, 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;
+		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(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"]);
+		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 (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"],
+			label: fieldObj.label,
 			setFormDirty,
 			setFieldValue,
 			setFieldTouched,
 			values,
-			currentValue: getValueUsingPath(values, fieldObj["name"]),
+			currentValue: getValueUsingPath(values, fieldObj.name),
 			onChange,
-			disabled: Boolean(fieldObj["disabled"]),
-			computeOn: parentInfo?.computeOn || fieldObj["computeOn"],
+			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;
@@ -533,8 +510,7 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 	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,
+	return Object.keys(options).map((fieldName) => /* @__PURE__ */ jsx(FormField, {
 		optionsField: options[fieldName],
 		fieldName,
 		values,
@@ -552,27 +528,26 @@ 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 handleChange = useCallback((state) => setValues?.(state), [setValues]);
 	const wizardConfig = parseWizardConfig(opts);
+	const meta = resolveMetaOverrides(options, labelPosition, spaceCompact);
 	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 ? /* @__PURE__ */ jsx(WizardContainer, {
 			wizardConfig,
 			values,
 			onChange: handleChange,
 			onSubmit,
 			className: "w-full",
-			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			...meta,
 			missingFields,
 			workflowForm,
 			setFieldValue,
 			setFieldTouched
 		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldsFromOptions, {
-			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			...meta,
 			options: opts,
 			values,
 			setFormDirty,
@@ -591,7 +566,7 @@ function DynamicFormContent({ options, setValues, setFormDirty, labelPosition, m
 	] });
 }
 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 }) {
+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 }) {
 	const engine = useWorkflowEngine();
 	const [parseReady, setParseReady] = useState(() => engine.isReady());
 	useEffect(() => {

package/dist/form/SpecialTypes/DropdownWrapper.d.ts

@@ -8,9 +8,7 @@ export default function DropdownWrapper({ options, onChange, fieldObj, setFormDi
         disabled?: boolean | string | undefined;
         placeholder?: string | undefined;
         default?: unknown;
-        parentValue?: unknown;
         secondaryField?: string | string[] | undefined;
-        resetOnChange?: string | boolean | undefined;
         value?: string | undefined;
         autoselect?: boolean | string | Record<string, unknown> | undefined;
         allowCustomValue?: boolean | undefined;

package/dist/form/SpecialTypes/DropdownWrapper.js

@@ -2,7 +2,7 @@ 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 }) {
+function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid = false, loading = false, disabled, allowCustomValue, currentValue, setFieldValue, setFieldTouched }) {
 	return /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
 		invalid,
 		className: "w-full",
@@ -14,9 +14,7 @@ function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid =
 		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,

package/dist/form/SpecialTypes/FormikCustomDropdown.d.ts

@@ -30,11 +30,9 @@ type FormikCustomDropdownProps = {
     options: React.ComponentProps<typeof Dropdown>['options'];
     setFormDirty: TSetFormDirty;
     onChange?: ((val: string) => void) | undefined;
-    parentValue?: unknown;
     className?: string;
     secondaryField?: string | string[] | undefined;
     disabled?: boolean;
-    resetOnChange?: string | boolean | undefined;
     loading?: boolean;
     invalid?: boolean;
     autoselect?: boolean | undefined;
@@ -46,7 +44,7 @@ type FormikCustomDropdownProps = {
     setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void;
 };
-declare const _default: import("react").MemoExoticComponent<({ name, ariaLabel, options, setFormDirty, onChange, parentValue, className, secondaryField, disabled, loading, invalid, autoselect, value, allowCustomValue, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched, }: FormikCustomDropdownProps) => import("react").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ name, ariaLabel, options, setFormDirty, onChange, className, secondaryField, disabled, loading, invalid, autoselect, value, allowCustomValue, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched, }: FormikCustomDropdownProps) => import("react").JSX.Element>;
 export default _default;
 export declare const Testables: {
     toComparableOptions: typeof toComparableOptions;

package/dist/form/SpecialTypes/FormikCustomDropdown.js

@@ -41,23 +41,19 @@ function arePropsEqual(prev, next) {
 	} else if (prev[key] !== next[key]) return false;
 	return true;
 }
-var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ariaLabel, options, setFormDirty, onChange, parentValue, className, secondaryField, disabled = false, loading = false, invalid = false, autoselect, value, allowCustomValue = false, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched }) {
+var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ariaLabel, options, setFormDirty, onChange, className, secondaryField, disabled = false, loading = false, invalid = false, autoselect, value, allowCustomValue = false, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched }) {
 	const required = useFieldRequired();
 	const controlProps = useFieldControlProps();
-	const prevParentRef = useRef(parentValue);
 	const handleChange = (val) => {
 		if (secondaryField && typeof options[0] !== "string") {
 			const option = findSecondaryOption(options, val);
 			if (option) applySecondaryField(secondaryField, option.secondaryValue, setFieldValue);
 		}
-		if (onChange) onChange(val);
+		onChange?.(val);
 		setFieldValue(name, val);
 		setFieldTouched(name, true);
 		setFormDirty(true);
 	};
-	useEffect(() => {
-		prevParentRef.current = parentValue;
-	});
 	const prevOptions = useRef(null);
 	const syncAutoselect = useEffectEvent((options, autoselect) => {
 		if (deepEqual(prevOptions.current, toComparableOptions(options))) return;
@@ -68,7 +64,8 @@ var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ar
 		prevOptions.current = toComparableOptions(options);
 		if (autoselect === false || !options?.length) return;
 		if (autoselect === void 0) {
-			if (options.length && isCategory(options[0])) {
+			const [first] = options;
+			if (first && isCategory(first)) {
 				let optionCount = 0;
 				for (const category of options) {
 					if (isCategory(category)) optionCount += category.options.length;