@parallelworks/ui 0.34.0 → 0.35.0

package/dist/form/Form.js

@@ -7,17 +7,19 @@ 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 { parseWizardConfig } from "./Wizard/utils.js";
+import { inputWidth, resolvedFlag } from "./lib.js";
 import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
-import { resolvedFlag } from "./lib.js";
+import { resolveFormLayout } from "./layout.js";
+import { FormLayout, LayoutCSSContext } from "./FormLayout.js";
 import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { useParsedOpts } from "./useParsedOpts.js";
 import { usePrevious } from "./usePrevious.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 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";
@@ -31,6 +33,13 @@ function asRecord(value) {
 function flagValue(value, fallback) {
 	return value && (typeof value === "string" || typeof value === "boolean") ? value : fallback;
 }
+/** The `$meta.labelPosition` a workflow set, which nested lists inherit; undefined when none did. */
+var ChosenLabelPosition = createContext(void 0);
+function useChosenLabelPosition(options) {
+	const inherited = useContext(ChosenLabelPosition);
+	const position = asRecord(options["$meta"])["labelPosition"];
+	return position === "left" || position === "top" ? position : inherited;
+}
 /** Applies `$meta` overrides for `labelPosition` / `spaceCompact`. */
 function resolveMetaOverrides(options, labelPosition, spaceCompact) {
 	const meta = options?.["$meta"];
@@ -47,7 +56,7 @@ function listLengthsSignature(options, values = {}, prefix = "") {
 		const field = asSchemaField(rawField);
 		if (fieldName === "$meta" || !field) continue;
 		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
-		if (field.type === "list") {
+		if (field.type === "list" || repeatsPage(field)) {
 			const items = values?.[fieldName];
 			const len = Array.isArray(items) ? items.length : 0;
 			parts.push(`${fullName}:${len}`);
@@ -87,7 +96,7 @@ function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 			}
 			continue;
 		}
-		if (field.type === "list") {
+		if (field.type === "list" || repeatsPage(field)) {
 			const listTemplate = field.template || field.options;
 			const listValues = values?.[fieldName];
 			if (listTemplate && Array.isArray(listValues)) for (let i = 0; i < listValues.length; i++) {
@@ -510,7 +519,31 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 	return true;
 });
 function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
-	return Object.keys(options).map((fieldName) => /* @__PURE__ */ jsx(FormField, {
+	const chosen = useChosenLabelPosition(options);
+	const wizard = parseWizardConfig(options);
+	if (wizard) return /* @__PURE__ */ jsx(ChosenLabelPosition.Provider, {
+		value: chosen,
+		children: /* @__PURE__ */ jsx(WizardContainer, {
+			wizardConfig: wizard,
+			values,
+			className: "w-full",
+			labelPosition,
+			missingFields,
+			spaceCompact,
+			workflowForm,
+			nested: true,
+			fieldNamePrefix: parentInfo?.fieldNamePrefix,
+			setFieldValue,
+			setFieldTouched
+		})
+	});
+	const names = Object.keys(options);
+	const flows = names.some((name) => {
+		const field = asRecord(options[name]);
+		return inputWidth(field["width"]) !== void 0 || field["anchor-below"] === true;
+	});
+	const columns = flows ? columnsOf(options, names) : [];
+	const fieldOf = (fieldName, compactLabels = false) => /* @__PURE__ */ jsx(FormField, {
 		optionsField: options[fieldName],
 		fieldName,
 		values,
@@ -518,55 +551,121 @@ function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue,
 		setFieldValue,
 		setFieldTouched,
 		parentInfo,
-		labelPosition,
+		labelPosition: compactLabels ? chosen ?? "top" : labelPosition,
 		missingFields,
 		spaceCompact,
 		workflowForm
-	}, fieldName));
+	}, fieldName);
+	const layout = resolveFormLayout(asRecord(options["$meta"])["layout"], names.filter((name) => !name.startsWith("$") && asSchemaField(options[name])));
+	if (layout.layout) return /* @__PURE__ */ jsx(ChosenLabelPosition.Provider, {
+		value: chosen,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-4",
+			children: [/* @__PURE__ */ jsx(FormLayout, {
+				layout: layout.layout,
+				renderField: (name) => fieldOf(name, true)
+			}), layout.remaining.map((name) => fieldOf(name, true))]
+		})
+	});
+	return /* @__PURE__ */ jsx(ChosenLabelPosition.Provider, {
+		value: chosen,
+		children: flows ? /* @__PURE__ */ jsx("div", {
+			className: "@container/inputs -mx-2 flex flex-wrap items-start",
+			children: columns.map((column) => {
+				const width = inputWidth(asRecord(options[column.head])["width"]);
+				return /* @__PURE__ */ jsx("div", {
+					"data-input-cell": true,
+					className: "flex w-(--input-narrow) max-w-full flex-col px-2 empty:hidden @min-[24rem]/inputs:w-(--input-width) [&:not(:has(>:not([data-input-hidden])))]:order-1 [&:not(:has(>:not([data-input-hidden])))]:w-full",
+					style: widthVars(width, width),
+					children: column.names.map((name) => {
+						const own = name === column.head ? void 0 : inputWidth(asRecord(options[name])["width"]);
+						return own === void 0 ? fieldOf(name, width !== void 0 && width !== "100%") : /* @__PURE__ */ jsx("div", {
+							"data-input-member": true,
+							className: "w-(--input-narrow) max-w-full @min-[24rem]/inputs:w-(--input-width)",
+							style: widthVars(own, own.endsWith("%") ? `calc(${parseFloat(own)}cqw - 1rem)` : own),
+							children: fieldOf(name, width !== void 0 && width !== "100%")
+						}, name);
+					})
+				}, column.head);
+			})
+		}) : names.map((name) => fieldOf(name))
+	});
 }
 var noop = () => {};
+function repeatsPage(field) {
+	return field.type === "step" && field.multi === true;
+}
+function columnsOf(options, names) {
+	const columns = [];
+	let shown;
+	for (const name of names) {
+		const field = asRecord(options[name]);
+		const hidden = name.startsWith("$") || field["hidden"] === true;
+		if (shown && !hidden && field["anchor-below"] === true) {
+			shown.names.push(name);
+			continue;
+		}
+		const column = {
+			head: name,
+			names: [name]
+		};
+		columns.push(column);
+		if (!hidden) shown = column;
+	}
+	return columns;
+}
+function widthVars(width, wide) {
+	return {
+		"--input-width": wide ?? "100%",
+		"--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]);
 	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 ? /* @__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
-			})
-		})] })
-	] });
+	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
+				})
+			})] })
+		]
+	});
 }
 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 }) {
+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 }) {
 	const engine = useWorkflowEngine();
 	const [parseReady, setParseReady] = useState(() => engine.isReady());
 	useEffect(() => {
@@ -582,32 +681,35 @@ function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialVal
 	});
 	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
+		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
+						})
 					})
 				})
 			})

package/dist/form/FormLayout.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { type FormLayoutNode } from './layout.js';
+export declare const LayoutCSSContext: import("react").Context<boolean>;
+export declare function FormLayout({ layout, renderField, }: {
+    layout: FormLayoutNode;
+    renderField: (name: string) => ReactNode;
+}): import("react").JSX.Element;

package/dist/form/FormLayout.js

@@ -0,0 +1,144 @@
+import { layoutBreakpoints, responsiveLayoutValues } from "./layout.js";
+import { resolveLayoutCSS } from "./layoutCSS.js";
+import cx from "classnames";
+import { createContext, useContext, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/FormLayout.tsx
+var LayoutCSSContext = createContext(false);
+var gaps = {
+	none: "0px",
+	sm: "0.5rem",
+	md: "1rem",
+	lg: "1.5rem"
+};
+var visible = "[&:not(:has([data-layout-field]:not(:empty)))]:hidden";
+var sharedRowsClass = "grid grid-rows-(--layout-shared-base) row-(--layout-row-span-base) @min-[24rem]/layout:grid-rows-(--layout-shared-sm) @min-[24rem]/layout:row-(--layout-row-span-sm) @min-[40rem]/layout:grid-rows-(--layout-shared-md) @min-[40rem]/layout:row-(--layout-row-span-md) @min-[64rem]/layout:grid-rows-(--layout-shared-lg) @min-[64rem]/layout:row-(--layout-row-span-lg)";
+var slotClass = "row-start-(--layout-slot-base) @min-[24rem]/layout:row-start-(--layout-slot-sm) @min-[40rem]/layout:row-start-(--layout-slot-md) @min-[64rem]/layout:row-start-(--layout-slot-lg)";
+var trackCount = (tracks) => Array.isArray(tracks) ? tracks.length : tracks;
+var trackStyle = (tracks) => Array.isArray(tracks) ? tracks.map((weight) => `minmax(0, ${weight}fr)`).join(" ") : `repeat(${tracks}, minmax(0, 1fr))`;
+function FormLayout({ layout, renderField }) {
+	const allowCSS = useContext(LayoutCSSContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-layout-boundary": true,
+		className: cx("min-w-0 max-w-full", allowCSS && "isolate [contain:paint] p-0.5"),
+		children: /* @__PURE__ */ jsx(LayoutNode, {
+			node: layout,
+			renderField
+		})
+	});
+}
+function LayoutNode({ node, renderField, sharedRows }) {
+	const labelId = useId();
+	const descriptionId = useId();
+	const allowCSS = useContext(LayoutCSSContext);
+	const customStyle = useMemo(() => allowCSS ? resolveLayoutCSS(node.css).style : {}, [allowCSS, node.css]);
+	if (node.type === "field") return /* @__PURE__ */ jsx("div", {
+		"data-layout-field": node.field,
+		className: "min-w-0 max-w-full empty:hidden [&>div]:mb-0",
+		style: customStyle,
+		children: renderField(node.field)
+	});
+	const columns = responsiveLayoutValues(node.type === "grid" ? node.columns : 1, 1);
+	const alignRows = node.type === "grid" && node.align === "rows";
+	const childSharedRows = alignRows ? Object.fromEntries(layoutBreakpoints.map((key) => [key, trackCount(columns[key]) > 1])) : void 0;
+	const rowCount = alignRows ? Math.max(0, ...node.children.map((child) => child.type === "section" ? child.children.length : 0)) + 1 : 1;
+	const children = node.children.map((child, index) => {
+		const spans = responsiveLayoutValues(child.span, 1);
+		const style = Object.fromEntries(layoutBreakpoints.flatMap((key) => [[`--layout-span-${key}`, Math.min(spans[key], trackCount(columns[key]))], [`--layout-slot-${key}`, sharedRows?.[key] ? index + 2 : "auto"]]));
+		return /* @__PURE__ */ jsx("div", {
+			"data-layout-item": true,
+			className: cx("min-w-0 text-sm", visible, sharedRows && slotClass, alignRows && sharedRowsClass, node.type === "grid" && "col-span-(--layout-span-base) @min-[24rem]/layout:col-span-(--layout-span-sm) @min-[40rem]/layout:col-span-(--layout-span-md) @min-[64rem]/layout:col-span-(--layout-span-lg)"),
+			style,
+			children: /* @__PURE__ */ jsx(LayoutNode, {
+				node: child,
+				renderField,
+				sharedRows: childSharedRows
+			})
+		}, child.type === "field" ? `field:${child.field}` : `container:${index}`);
+	});
+	const gap = { "--layout-gap": gaps[node.gap ?? "md"] };
+	const headingStyle = {
+		color: customStyle.color,
+		fontSize: customStyle.fontSize,
+		fontWeight: customStyle.fontWeight,
+		lineHeight: customStyle.lineHeight
+	};
+	if (node.type === "grid") {
+		const style = {
+			...gap,
+			...Object.fromEntries(layoutBreakpoints.flatMap((key) => [
+				[`--layout-columns-${key}`, trackStyle(columns[key])],
+				[`--layout-shared-${key}`, childSharedRows?.[key] ? "subgrid" : "none"],
+				[`--layout-row-span-${key}`, childSharedRows?.[key] ? `span ${rowCount}` : "auto"]
+			])),
+			...customStyle
+		};
+		return /* @__PURE__ */ jsx("div", {
+			"data-layout-grid": true,
+			className: cx("@container/layout min-w-0 max-w-full", visible),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cx("grid gap-(--layout-gap) grid-cols-(--layout-columns-base) @min-[24rem]/layout:grid-cols-(--layout-columns-sm) @min-[40rem]/layout:grid-cols-(--layout-columns-md) @min-[64rem]/layout:grid-cols-(--layout-columns-lg)", !alignRows && "items-start"),
+				style,
+				children
+			})
+		});
+	}
+	if (node.type === "section" && sharedRows) return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-labelledby": labelId,
+		"aria-describedby": node.description ? descriptionId : void 0,
+		"data-layout-section": true,
+		className: cx("min-w-0 max-w-full text-sm gap-(--layout-gap)", sharedRowsClass, visible),
+		style: customStyle,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-layout-header": true,
+			className: "self-start",
+			children: [/* @__PURE__ */ jsx("div", {
+				id: labelId,
+				className: "text-sm font-semibold theme-text",
+				style: headingStyle,
+				children: node.label
+			}), node.description && /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "mt-2 text-sm theme-muted-text",
+				children: node.description
+			})]
+		}), children]
+	});
+	const body = /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 flex-col text-sm gap-(--layout-gap)",
+		style: {
+			...gap,
+			...node.type === "stack" ? customStyle : {
+				gap: customStyle.gap,
+				rowGap: customStyle.rowGap
+			}
+		},
+		children
+	});
+	if (node.type === "section") return /* @__PURE__ */ jsxs("fieldset", {
+		"data-layout-section": true,
+		className: cx("min-w-0 max-w-full border-0 p-0", visible),
+		"aria-describedby": node.description ? descriptionId : void 0,
+		style: customStyle,
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "float-left mb-2 w-full p-0 text-sm font-semibold theme-text",
+			style: headingStyle,
+			children: node.label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "clear-both",
+			children: [node.description && /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "mb-4 text-sm theme-muted-text",
+				children: node.description
+			}), body]
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-layout-stack": true,
+		className: cx("min-w-0 max-w-full", visible),
+		children: body
+	});
+}
+//#endregion
+export { FormLayout, LayoutCSSContext };

package/dist/form/SpecialTypes/FormikCustomDropdown.js

@@ -1,7 +1,7 @@
 import { isCategory } from "../../components/dropdownUtils.js";
 import Dropdown from "../../components/Dropdown.js";
-import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
 import { applySecondaryField, findSecondaryOption } from "../utils/secondaryField.js";
+import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
 import cx from "classnames";
 import { memo, useEffect, useEffectEvent, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/form/SpecialTypes/FormikCustomInput.js

@@ -17,6 +17,7 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 	const [localValue, setLocalValue] = useState(value ?? field.value);
 	const isFocused = useRef(false);
 	const debounceRef = useRef(null);
+	const pendingRef = useRef(null);
 	useEffect(() => {
 		if (!isFocused.current) setLocalValue(value ?? field.value);
 	}, [field.value, value]);
@@ -34,6 +35,7 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		return sanitizeRegexp ? cased.replace(sanitizeRegexp, "") : cased;
 	}, [sanitizeRegexp, lowercase]);
 	const flushToFormik = useCallback((val) => {
+		pendingRef.current = null;
 		onChange?.(val);
 		setFieldTouched(name, true);
 		setFieldValue(name, val);
@@ -43,6 +45,10 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		setFieldTouched,
 		setFieldValue
 	]);
+	useEffect(() => () => {
+		clearTimeout(debounceRef.current ?? void 0);
+		if (pendingRef.current) flushToFormik(pendingRef.current.value);
+	}, [flushToFormik]);
 	const handleChange = (e) => {
 		const text = sanitizeName(e.target.value);
 		let val = text;
@@ -53,6 +59,7 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		if (type === "password" && val === "") val = defaultValue;
 		setLocalValue(val);
 		clearTimeout(debounceRef.current ?? void 0);
+		pendingRef.current = { value: val };
 		debounceRef.current = setTimeout(() => flushToFormik(val), DEBOUNCE_MS);
 	};
 	const handleFocus = () => {

package/dist/form/Wizard/WizardContainer.d.ts

@@ -1,5 +1,5 @@
 import type { WizardContainerProps } from './types.js';
-export declare function WizardContainer({ wizardConfig, values, onChange, onSubmit, className, labelPosition, missingFields, spaceCompact, workflowForm, setFieldValue, setFieldTouched, }: WizardContainerProps & {
+export declare function WizardContainer({ wizardConfig, values, onChange, onSubmit, className, labelPosition, missingFields, spaceCompact, workflowForm, nested, fieldNamePrefix, setFieldValue, setFieldTouched, }: WizardContainerProps & {
     setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;
 }): import("react").JSX.Element;