@parallelworks/ui 0.41.0 → 0.43.0

package/dist/form/FormLayout.js

@@ -1,8 +1,8 @@
 import { layoutBreakpoints, responsiveLayoutValues } from "./layout.js";
 import { resolveLayoutCSS } from "./layoutCSS.js";
-import cx from "classnames";
-import { createContext, useContext, useId, useMemo } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo } from "react";
 //#region src/form/FormLayout.tsx
 var LayoutCSSContext = createContext(false);
 var gaps = {
@@ -20,7 +20,7 @@ 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"),
+		className: clsx("min-w-0 max-w-full", allowCSS && "isolate [contain:paint] p-0.5"),
 		children: /* @__PURE__ */ jsx(LayoutNode, {
 			node: layout,
 			renderField
@@ -47,7 +47,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 		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)"),
+			className: clsx("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,
@@ -75,9 +75,9 @@ function LayoutNode({ node, renderField, sharedRows }) {
 		};
 		return /* @__PURE__ */ jsx("div", {
 			"data-layout-grid": true,
-			className: cx("@container/layout min-w-0 max-w-full", visible),
+			className: clsx("@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"),
+				className: clsx("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
 			})
@@ -88,7 +88,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 		"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),
+		className: clsx("min-w-0 max-w-full text-sm gap-(--layout-gap)", sharedRowsClass, visible),
 		style: customStyle,
 		children: [/* @__PURE__ */ jsxs("div", {
 			"data-layout-header": true,
@@ -118,7 +118,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 	});
 	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),
+		className: clsx("min-w-0 max-w-full border-0 p-0", visible),
 		"aria-describedby": node.description ? descriptionId : void 0,
 		style: customStyle,
 		children: [/* @__PURE__ */ jsx("legend", {
@@ -136,7 +136,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-layout-stack": true,
-		className: cx("min-w-0 max-w-full", visible),
+		className: clsx("min-w-0 max-w-full", visible),
 		children: body
 	});
 }

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

@@ -1,5 +1,2 @@
 import type { WizardContainerProps } from './types.js';
-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;
+export declare function WizardContainer({ wizardConfig, onSubmit, className, labelPosition, spaceCompact, nested, fieldNamePrefix, }: WizardContainerProps): import("react").JSX.Element;

package/dist/form/Wizard/WizardContainer.js

@@ -1,25 +1,40 @@
 import { useStrings, useWorkflowEngine } from "../../components/Provider.js";
 import { copyBounds, stepText } from "./utils.js";
 import { initializeValues } from "../lib.js";
-import { getValueUsingPath } from "../utils/getValueUsingPath.js";
 import { useFormEditing } from "../formEditing.js";
+import { fieldPath } from "../utils/fieldPath.js";
+import { getValueUsingPath } from "../utils/getValueUsingPath.js";
 import { useWizardState } from "./useWizardState.js";
 import { WizardNavigation } from "./WizardNavigation.js";
 import { WizardStepContent } from "./WizardStepContent.js";
 import { WizardStepIndicator } from "./WizardStepIndicator.js";
 import { WizardPagesContext } from "./wizardPages.js";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useFormikContext } from "formik";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 //#region src/form/Wizard/WizardContainer.tsx
-function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, nested = false, fieldNamePrefix = "", setFieldValue, setFieldTouched }) {
-	const { validateForm, setTouched, touched, initialValues } = useFormikContext();
+function WizardContainer({ wizardConfig, onSubmit, className = "", labelPosition = "left", spaceCompact = false, nested = false, fieldNamePrefix = "" }) {
+	const form = useFormContext();
+	const { control, getValues, getFieldState, subscribe } = form;
 	const editing = useFormEditing();
 	const pages = useContext(WizardPagesContext);
 	const [ownPage, setOwnPage] = useState(0);
 	const { form: strings } = useStrings();
 	const engine = useWorkflowEngine();
 	const { config, steps, stepOrder } = wizardConfig;
+	const titleReads = useMemo(() => {
+		const texts = Object.values(steps).flatMap((step) => [step.title, step.description].flat().filter((text) => text?.includes("${{")));
+		return [...new Set(texts.flatMap((text) => [...engine.inputDependencies(text).inputDeps]))];
+	}, [steps, engine]);
+	useWatch({
+		control,
+		compute: (values) => JSON.stringify([stepOrder.map((step) => {
+			const rows = getValueUsingPath(values, `${fieldNamePrefix}${step}`);
+			return Array.isArray(rows) ? rows.length : -1;
+		}), titleReads.map((dep) => getValueUsingPath(values, dep))])
+	});
+	const values = getValues();
+	const setFieldValue = useCallback((name, value) => form.setValue(fieldPath(name), value, { shouldDirty: true }), [form]);
 	const reads = useRef(/* @__PURE__ */ new Map());
 	const perCopy = useCallback((value, copy, numbered) => {
 		if (Array.isArray(value)) return value[copy] ?? (numbered ? strings.copyTitle(value[0] ?? "", copy + 1) : "");
@@ -113,8 +128,15 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 	]);
 	const setAside = useRef({});
 	useEffect(() => {
-		setAside.current = {};
-	}, [initialValues]);
+		let loaded;
+		return subscribe({
+			formState: { values: true },
+			callback: ({ defaultValues }) => {
+				if (loaded !== void 0 && defaultValues !== loaded) setAside.current = {};
+				loaded = defaultValues;
+			}
+		});
+	}, [subscribe]);
 	useEffect(() => {
 		for (const step of stepOrder) {
 			const stepConfig = steps[step];
@@ -144,28 +166,12 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		const page = shown.byKey[pageKey];
 		if (!page?.config.options) return true;
 		const stepPrefix = page.copy !== void 0 ? `${fieldNamePrefix}${page.step}[${page.copy}].` : config.flatten !== false ? fieldNamePrefix : `${fieldNamePrefix}${page.step}.`;
-		const stepFieldPaths = Object.keys(page.config.options).map((name) => `${stepPrefix}${name}`);
-		const errors = await validateForm();
-		const hasStepErrors = stepFieldPaths.some((path) => getValueUsingPath(errors, path));
-		if (hasStepErrors) {
-			if (stepPrefix) for (const path of stepFieldPaths) setFieldTouched(path, true, false);
-			else {
-				const touchedFields = Object.fromEntries(stepFieldPaths.map((path) => [path, true]));
-				setTouched({
-					...touched,
-					...touchedFields
-				}, false);
-			}
-		}
-		return !hasStepErrors;
+		return !Object.keys(page.config.options).map((name) => `${stepPrefix}${name}`).some((path) => getFieldState(fieldPath(path)).invalid);
 	}, [
 		shown,
 		config,
 		fieldNamePrefix,
-		validateForm,
-		setTouched,
-		setFieldTouched,
-		touched
+		getFieldState
 	]);
 	const { currentStep, visitedSteps, invalidSteps, isLastStep, canGoBack, goToNext, goToPrevious, jumpToStep, showStep } = useWizardState({
 		stepOrder: shown.order,
@@ -173,33 +179,17 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		validateStep: validateCurrentStep
 	});
 	const navigation = config.navigation ?? {};
-	const handleGoToNext = useCallback(async () => {
-		const success = await goToNext();
-		if (success) onChange?.(values);
-		return success;
-	}, [
-		goToNext,
-		values,
-		onChange
-	]);
 	const handleSubmit = useCallback(async () => {
 		if (!isLastStep) return;
-		const errors = await validateForm();
-		if (Object.keys(errors).length > 0) {
-			const touchedFields = Object.fromEntries(Object.keys(values).map((name) => [name, true]));
-			setTouched({
-				...touched,
-				...touchedFields
-			}, false);
-			throw new Error("Please fix errors before submitting");
-		}
-		await onSubmit?.(values);
+		let submitted = false;
+		await form.handleSubmit(async (values) => {
+			submitted = true;
+			await onSubmit?.(values);
+		})();
+		if (!submitted) throw new Error("Please fix errors before submitting");
 	}, [
 		isLastStep,
-		validateForm,
-		values,
-		setTouched,
-		touched,
+		form,
 		onSubmit
 	]);
 	const last = Math.max(shown.order.length - 1, 0);
@@ -279,16 +269,10 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 			currentStep: page.step,
 			stepConfig: page.config,
 			flatten: config.flatten,
-			values,
 			labelPosition,
-			missingFields,
 			spaceCompact,
-			setFormDirty: () => onChange?.(values),
-			workflowForm,
 			fieldNamePrefix,
-			copy: page.copy,
-			setFieldValue,
-			setFieldTouched
+			copy: page.copy
 		}), copies]
 	}) : null;
 	if (editing) return /* @__PURE__ */ jsxs("div", {
@@ -345,7 +329,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 				nextLabel: page?.config.nextLabel,
 				prevLabel: page?.config.prevLabel,
 				submitLabel: config.submitLabel || "Execute",
-				onNext: handleGoToNext,
+				onNext: goToNext,
 				onPrevious: goToPrevious,
 				onSubmit: nested ? void 0 : handleSubmit
 			})

package/dist/form/Wizard/WizardNavigation.js

@@ -1,6 +1,6 @@
 import Loader from "../../components/Loader.js";
-import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/form/Wizard/WizardNavigation.tsx
 function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
 	const [isLoading, setIsLoading] = useState(false);

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

@@ -1,8 +1,4 @@
-import type { TSetFormDirty } from '../Form.js';
 import type { WizardStepContentProps } from './types.js';
-export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, setFormDirty, setFieldValue, setFieldTouched, fieldNamePrefix, copy, ...fieldsProps }: WizardStepContentProps & {
-    setFormDirty: TSetFormDirty;
-    setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
-    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;
+export declare function WizardStepContent({ currentStep, stepConfig, flatten, fieldNamePrefix, copy, ...fieldsProps }: WizardStepContentProps & {
     flatten?: boolean | undefined;
 }): import("react").JSX.Element | null;

package/dist/form/Wizard/WizardStepContent.js

@@ -2,22 +2,21 @@ import { stepText } from "./utils.js";
 import { EditingScope, useFormEditing } from "../formEditing.js";
 import { FieldsFromOptions } from "../Form.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/form/Wizard/WizardStepContent.tsx
-function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, fieldNamePrefix = "", copy, ...fieldsProps }) {
+function WizardStepContent({ currentStep, stepConfig, flatten = true, fieldNamePrefix = "", copy, ...fieldsProps }) {
 	const editing = useFormEditing();
-	if (!stepConfig.options) return null;
-	const path = editing ? [...editing.parent, currentStep] : null;
-	const parentInfo = copy !== void 0 ? {
-		parentName: currentStep,
+	const parentInfo = useMemo(() => copy !== void 0 ? {
 		fieldNamePrefix: `${fieldNamePrefix}${currentStep}[${copy}].`,
 		arrayIndex: copy
-	} : flatten === false ? {
-		parentName: currentStep,
-		fieldNamePrefix: `${fieldNamePrefix}${currentStep}.`
-	} : fieldNamePrefix ? {
-		parentName: fieldNamePrefix.slice(0, -1),
-		fieldNamePrefix
-	} : void 0;
+	} : flatten === false ? { fieldNamePrefix: `${fieldNamePrefix}${currentStep}.` } : fieldNamePrefix ? { fieldNamePrefix } : void 0, [
+		copy,
+		flatten,
+		fieldNamePrefix,
+		currentStep
+	]);
+	if (!stepConfig.options) return null;
+	const path = editing ? [...editing.parent, currentStep] : null;
 	const content = /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 w-full",
 		children: [
@@ -36,10 +35,6 @@ function WizardStepContent({ currentStep, stepConfig, flatten = true, values, se
 				path,
 				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
 					options: stepConfig.options,
-					values,
-					setFormDirty,
-					setFieldValue,
-					setFieldTouched,
 					...parentInfo ? { parentInfo } : {},
 					...fieldsProps
 				}, copy === void 0 ? currentStep : `${currentStep}[${copy}]`)

package/dist/form/Wizard/WizardStepIndicator.js

@@ -1,8 +1,8 @@
 import { useStrings } from "../../components/Provider.js";
 import { stepText } from "./utils.js";
-import cx from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 //#region src/form/Wizard/WizardStepIndicator.tsx
 function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, invalidSteps, onStepClick, allowJump = false, hideStepNumbers = false }) {
 	const { form: strings } = useStrings();
@@ -52,7 +52,7 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 						onClick: () => onStepClick(stepKey),
 						disabled: !isClickable,
 						"aria-current": isDotActive ? "step" : void 0,
-						className: cx("w-12 h-12 rounded-full border-3 flex items-center justify-center font-bold text-base transition-all duration-300 flex-shrink-0 relative", {
+						className: clsx("w-12 h-12 rounded-full border-3 flex items-center justify-center font-bold text-base transition-all duration-300 flex-shrink-0 relative", {
 							"cursor-pointer": isClickable,
 							"cursor-not-allowed": !isClickable
 						}, {
@@ -71,7 +71,7 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 						"aria-label": `Step ${index + 1}: ${stepText(stepConfig?.title)}`,
 						title: stepText(stepConfig?.title),
 						children: [!hideStepNumbers && /* @__PURE__ */ jsx("span", {
-							className: cx({ hidden: status === "completed" }),
+							className: clsx({ hidden: status === "completed" }),
 							children: index + 1
 						}), status === "completed" && /* @__PURE__ */ jsx("svg", {
 							"aria-hidden": "true",
@@ -88,7 +88,7 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 						})]
 					}),
 					index < stepOrder.length - 1 && /* @__PURE__ */ jsx("div", {
-						className: cx("absolute h-1 transition-all duration-300", {
+						className: clsx("absolute h-1 transition-all duration-300", {
 							"bg-green-500": index < currentIndex,
 							"bg-(--theme-border)": index >= currentIndex,
 							"opacity-25": index >= currentIndex
@@ -104,7 +104,7 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 					/* @__PURE__ */ jsxs("div", {
 						className: "mt-2 text-center",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: cx("text-sm text-center transition-colors duration-300 max-w-30", {
+							className: clsx("text-sm text-center transition-colors duration-300 max-w-30", {
 								"font-bold text-green-600": isDotCompleted && !isInvalid,
 								"font-bold text-red-600": isInvalid && status !== "active",
 								"font-semibold theme-muted-text": !isDotActive && !isDotCompleted && !isInvalid,

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

@@ -58,22 +58,14 @@ export interface ParsedWizardConfig {
 export interface WizardContainerProps {
     /** Parsed wizard configuration and steps */
     wizardConfig: ParsedWizardConfig;
-    /** Current form values */
-    values: Record<string, unknown>;
-    /** Callback when values change */
-    onChange?: (values: Record<string, unknown>) => void;
     /** Callback when wizard is submitted */
     onSubmit?: ((values: Record<string, unknown>) => void) | undefined;
     /** Additional CSS classes */
     className?: string;
     /** Label position for fields */
     labelPosition?: 'left' | 'top' | undefined;
-    /** Missing fields list */
-    missingFields?: string[];
     /** Space compact mode */
     spaceCompact?: boolean;
-    /** Workflow form mode */
-    workflowForm?: boolean;
     /** A wizard inside a group submits with the form around it, so its last step has no submit. */
     nested?: boolean;
     /** Where the fields' values sit when the wizard is inside a group that keeps its own values. */
@@ -131,16 +123,10 @@ export interface WizardStepContentProps {
     currentStep: string;
     /** Current step configuration */
     stepConfig: StepFieldConfig;
-    /** Form values */
-    values: Record<string, unknown>;
     /** Label position for fields */
     labelPosition?: LabelPosition | undefined;
-    /** Missing fields list */
-    missingFields?: string[];
     /** Space compact mode */
     spaceCompact?: boolean;
-    /** Workflow form mode */
-    workflowForm?: boolean;
     /** Where the fields' values sit when the wizard is inside a group that keeps its own values. */
     fieldNamePrefix?: string | undefined;
     /** Which copy of a repeated page this is; its fields' values sit in that row of the page's list. */

package/dist/form/fieldRegistry.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { FieldComponentProps } from './types/fieldComponentTypes.js';
-export type FieldComponent = React.ComponentType<FieldComponentProps<any, any>>;
+export type FieldComponent = React.ComponentType<FieldComponentProps<any>>;
 export declare const FieldRegistryContext: React.Context<Record<string, FieldComponent>>;
 /** Returns null for field types no registry knows. Per-form `fields` win over
  * the provider's `slots.formFields`, which win over the core registry. */

package/dist/form/fieldRegistry.js

@@ -3,7 +3,7 @@ import BooleanField from "./Fields/BooleanField.js";
 import CheckboxGroupField from "./Fields/CheckboxGroupField.js";
 import ColorField from "./Fields/ColorField.js";
 import DropdownField from "./Fields/DropdownField.js";
-import DurationField_default from "./Fields/DurationField.js";
+import DurationField from "./Fields/DurationField.js";
 import LabelField from "./Fields/LabelField.js";
 import MultiDropdownField from "./Fields/MultiDropdownField.js";
 import NumberField from "./Fields/NumberField.js";
@@ -11,20 +11,20 @@ import ObjectField from "./Fields/ObjectField.js";
 import RadioField from "./Fields/RadioField.js";
 import RangeField from "./Fields/RangeField.js";
 import StepField from "./Fields/StepField.js";
-import StringField_default from "./Fields/StringField.js";
+import StringField from "./Fields/StringField.js";
 import TextAreaField from "./Fields/TextAreaField.js";
-import { Suspense, createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, createContext, useContext } from "react";
 //#region src/form/fieldRegistry.tsx
 var CORE_FIELD_COMPONENTS = {
-	string: StringField_default,
-	password: StringField_default,
+	string: StringField,
+	password: StringField,
 	number: NumberField,
 	boolean: BooleanField,
 	dropdown: DropdownField,
 	textarea: TextAreaField,
 	range: RangeField,
-	duration: DurationField_default,
+	duration: DurationField,
 	radio: RadioField,
 	label: LabelField,
 	color: ColorField,

package/dist/form/formEditing.js

@@ -1,5 +1,5 @@
-import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 //#region src/form/formEditing.tsx
 var FormEditingContext = createContext(null);
 function useFormEditing() {

package/dist/form/index.d.ts

@@ -1,19 +1,20 @@
+export { FieldGroup } from './FieldGroup.js';
 export { getInvalidDurationPaths, setDurationValidity, } from './Fields/durationValidity.js';
 export { default as NumberField, type INumberField, } from './Fields/NumberField.js';
 export { ResourceOptionIcon } from './Fields/ResourceOptionIcon.js';
 export { type FieldLabelBinding, FieldWrapper } from './FieldWrapper.js';
-export { collectFieldsWithDefaults, DynamicDefaultsSync, DynamicForm, type DynamicFormProps, FieldsFromOptions, findSelfReferencingFieldNames, GroupHeader, MultiSelectionDropdown, resolveMetaOverrides, type TSetFormDirty, useDynamicDefaultsSync, } from './Form.js';
+export { collectFieldsWithDefaults, DynamicDefaultsSync, DynamicForm, type DynamicFormProps, FieldsFromOptions, type FormValues, findSelfReferencingFieldNames, type ParentInfo, resolveMetaOverrides, useDynamicDefaultsSync, } from './Form.js';
 export { type FieldContextValue, FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, } from './fieldContext.js';
 export { type FieldComponent, FieldRegistryContext, Registry, } from './fieldRegistry.js';
 export { type FormLayoutIssue, type FormLayoutNode, type LayoutBreakpoint, type LayoutGap, type LayoutTracks, type ResponsiveLayout, resolveFormLayout, } from './layout.js';
 export { type LayoutCSSIssue, resolveLayoutCSS, } from './layoutCSS.js';
 export { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag, } from './lib.js';
-export { default as DropdownWrapper } from './SpecialTypes/DropdownWrapper.js';
-export { default as FormikMultiSelectDropdown } from './SpecialTypes/FormikMultiSelectDropdown.js';
-export { FormikCustomDropdown, FormikCustomInput, FormikNumericInput, } from './SpecialTypes/index.js';
 export * from './types/fieldComponentTypes.js';
 export * from './types/fieldTypes.js';
+export { type ChoiceItem, useChoiceField } from './useChoiceField.js';
+export { useFieldValue } from './useFieldValue.js';
 export { useParsedOpts } from './useParsedOpts.js';
+export { useDependentOptions, useFieldAt } from './utils/dependentOptions.js';
 export { collectPartitionDurationIssues, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, formatDuration, parseDuration, STANDARD_MAX_DURATION_RANGE, } from './utils/duration.js';
 export { getPlaceholder } from './utils/getPlaceholder.js';
 export { applySecondaryField, findSecondaryOption, } from './utils/secondaryField.js';

package/dist/form/index.js

@@ -1,20 +1,19 @@
 import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
 import { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag } from "./lib.js";
+import { FieldGroup } from "./FieldGroup.js";
 import { resolveFormLayout } from "./layout.js";
 import { resolveLayoutCSS } from "./layoutCSS.js";
 import { FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired } from "./fieldContext.js";
 import { FieldWrapper } from "./FieldWrapper.js";
-import FormikCustomDropdown_default from "./SpecialTypes/FormikCustomDropdown.js";
-import FormikCustomInput from "./SpecialTypes/FormikCustomInput.js";
-import FormikNumericInput from "./SpecialTypes/FormikNumericInput.js";
+import { useFieldValue } from "./useFieldValue.js";
+import { useChoiceField } from "./useChoiceField.js";
+import { useDependentOptions, useFieldAt } from "./utils/dependentOptions.js";
 import { getPlaceholder } from "./utils/getPlaceholder.js";
 import { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration } from "./utils/duration.js";
 import { getInvalidDurationPaths, setDurationValidity } from "./Fields/durationValidity.js";
 import NumberField from "./Fields/NumberField.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { useParsedOpts } from "./useParsedOpts.js";
-import { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, GroupHeader, MultiSelectionDropdown, collectFieldsWithDefaults, findSelfReferencingFieldNames, resolveMetaOverrides, useDynamicDefaultsSync } from "./Form.js";
+import { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, collectFieldsWithDefaults, findSelfReferencingFieldNames, resolveMetaOverrides, useDynamicDefaultsSync } from "./Form.js";
 import { ResourceOptionIcon } from "./Fields/ResourceOptionIcon.js";
-import DropdownWrapper from "./SpecialTypes/DropdownWrapper.js";
-import FormikMultiSelectDropdown from "./SpecialTypes/FormikMultiSelectDropdown.js";
-export { DropdownWrapper, DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldProvider, FieldRegistryContext, FieldWrapper, FieldsFromOptions, FormikCustomDropdown_default as FormikCustomDropdown, FormikCustomInput, FormikMultiSelectDropdown, FormikNumericInput, GroupHeader, MultiSelectionDropdown, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatDuration, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDuration, resolveFormLayout, resolveLayoutCSS, resolveMetaOverrides, resolvedFlag, setDurationValidity, useDynamicDefaultsSync, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useParsedOpts };
+export { DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldGroup, FieldProvider, FieldRegistryContext, FieldWrapper, FieldsFromOptions, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatDuration, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDuration, resolveFormLayout, resolveLayoutCSS, resolveMetaOverrides, resolvedFlag, setDurationValidity, useChoiceField, useDependentOptions, useDynamicDefaultsSync, useFieldAt, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useFieldValue, useParsedOpts };

package/dist/form/lib.js

@@ -1,4 +1,5 @@
-import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
+import { findChoice, toFieldItems } from "./utils/fieldItems.js";
+import { applySecondaryField } from "./utils/secondaryField.js";
 import { copyBounds } from "./Wizard/utils.js";
 //#region src/form/lib.ts
 var EMPTY_ENTRY = {};
@@ -107,7 +108,7 @@ function initializeValues(options, srcData = {}, blankDefault) {
 		if (data[field] !== void 0) {
 			acc[field] = data[field];
 			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && Array.isArray(fieldSchema.options)) {
-				const option = findSecondaryOption(fieldSchema.options, data[field]);
+				const option = findChoice(toFieldItems(fieldSchema.options), data[field]);
 				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
 					if (!(fieldSchema.type === "storage" && Object.hasOwn(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
 				});

package/dist/form/types/fieldComponentTypes.d.ts

@@ -1,4 +1,3 @@
-import type { TSetFormDirty } from '../Form.js';
 import type { BaseField, LabelPosition, RuntimeFieldExtensions } from './fieldTypes.js';
 /** Intentionally loose to allow both manual types and schema-generated types. */
 interface FieldBase {
@@ -11,24 +10,23 @@ interface FieldBase {
     tooltip?: string | string[];
     default?: unknown;
 }
-export interface FieldComponentProps<TField extends FieldBase = FieldBase, TValue = unknown> {
+/**
+ * What the form hands a field component. The field binds to its own value by `field.name`, with
+ * `useFieldValue` or react-hook-form's `useController`, and reads any other with `useWatch`, so it
+ * renders again only when what it reads changes.
+ */
+export interface FieldComponentProps<TField extends FieldBase = FieldBase> {
     field: TField;
     label: string;
     labelPosition: LabelPosition;
+    /** The form marks the field as missing a value. */
     missing: boolean;
-    missingFields: string[];
-    values: Record<string, unknown>;
-    setFormDirty: TSetFormDirty;
     onChange?: ((val: unknown) => void) | undefined;
     disabled: boolean;
     computeOn?: boolean | undefined;
     spaceCompact?: boolean;
     tooltipComponent?: React.ReactNode;
-    workflowForm?: boolean;
-    currentValue: TValue;
-    setFieldValue?: (field: string, value: unknown, shouldValidate?: boolean) => void;
-    setFieldTouched?: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void;
 }
 /** Props for a field component, given the field definition it renders. */
-export type FieldProps<TField extends FieldBase = BaseField, TValue = unknown> = FieldComponentProps<TField & RuntimeFieldExtensions, TValue>;
+export type FieldProps<TField extends FieldBase = BaseField> = FieldComponentProps<TField & RuntimeFieldExtensions>;
 export {};

package/dist/form/useChoiceField.d.ts

@@ -0,0 +1,18 @@
+import type { ComboboxItems } from '../components/Combobox.js';
+import { type ChoiceItem } from './utils/fieldItems.js';
+export type { ChoiceItem };
+/**
+ * A field that picks one of `items`: its value, and the choice the person makes, which also sets the
+ * fields its `secondaryField` names from the item's `secondaryValue`.
+ *
+ * With `autoselect`, the first enabled item is picked whenever the items change; unset, an only item
+ * is. A value the form already holds stays on the first pass. The items change when their values or
+ * which are enabled do, so a field may rebuild them every render.
+ */
+export declare function useChoiceField({ name, items, autoselect, secondaryField, onChange, }: {
+    name: string;
+    items: ComboboxItems<unknown>;
+    autoselect?: boolean | undefined;
+    secondaryField?: string | string[] | undefined;
+    onChange?: ((value: unknown) => void) | undefined;
+}): [unknown, (value: unknown) => void];

package/dist/form/useChoiceField.js

@@ -0,0 +1,46 @@
+import { itemValue, leaves } from "./utils/fieldItems.js";
+import { applySecondaryField } from "./utils/secondaryField.js";
+import { useFieldValue } from "./useFieldValue.js";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { dequal } from "dequal";
+import { useFormContext } from "react-hook-form";
+//#region src/form/useChoiceField.ts
+/**
+* A field that picks one of `items`: its value, and the choice the person makes, which also sets the
+* fields its `secondaryField` names from the item's `secondaryValue`.
+*
+* With `autoselect`, the first enabled item is picked whenever the items change; unset, an only item
+* is. A value the form already holds stays on the first pass. The items change when their values or
+* which are enabled do, so a field may rebuild them every render.
+*/
+function useChoiceField({ name, items, autoselect, secondaryField, onChange }) {
+	const [value, change] = useFieldValue(name);
+	const { setValue } = useFormContext();
+	const choose = (next) => {
+		const chosen = leaves(items).find((item) => typeof item === "object" && dequal(item.value, next));
+		applySecondaryField(secondaryField, chosen?.secondaryValue, (field, secondary) => setValue(field, secondary, { shouldDirty: true }));
+		onChange?.(next);
+		change(next);
+	};
+	const first = useRef(true);
+	const select = useEffectEvent((items, autoselect) => {
+		const preset = first.current && value != null;
+		first.current = false;
+		if (preset || autoselect === false) return;
+		const all = leaves(items);
+		if (all.length === 0 || autoselect === void 0 && all.length !== 1) return;
+		if (!autoselect && all.some((item) => dequal(itemValue(item), value))) return;
+		const pick = all.find((item) => typeof item === "string" || !item.disabled);
+		if (pick !== void 0) choose(itemValue(pick));
+	});
+	const shape = [autoselect, leaves(items).map((item) => typeof item === "string" ? item : [item.value, Boolean(item.disabled)])];
+	const lastShape = useRef(void 0);
+	useEffect(() => {
+		if (dequal(lastShape.current, shape)) return;
+		lastShape.current = shape;
+		select(items, autoselect);
+	});
+	return [value, choose];
+}
+//#endregion
+export { useChoiceField };

package/dist/form/useFieldValue.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A field's value in the form, and how the person changes it. The field renders again when its own
+ * value changes, not when another field's does. A change marks the field touched as well as dirty: the
+ * form stops writing a computed default into a field once the person has set it, and a pick from a list
+ * sets a value without the blur that would otherwise mark it.
+ */
+export declare function useFieldValue<T>(name: string): [T, (value: T) => void];