@parallelworks/ui 0.12.1 → 0.14.0

package/dist/form/index.js

@@ -1,14 +1,14 @@
 import { AngleRightIcon, EyeIcon, EyeOffIcon, SuccessCheckmark, TrashIcon } from "../icons.js";
-import { c as useStrings, s as useSlots } from "../chunks/Provider-CfFV-vc5.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
-import { n as StatusDot, s as isCategory } from "../chunks/StatusBadge-P6C2tv7Z.js";
-import { a as UncontrolledCollapsiblePanel, c as Dropdown, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-DcPCXkqL.js";
+import { c as useStrings, s as useSlots } from "../chunks/Provider-CbFVFB7O.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-n9w7Tkt1.js";
+import { n as StatusDot, s as isCategory } from "../chunks/StatusBadge-RRUI78iS.js";
+import { a as UncontrolledCollapsiblePanel, c as Dropdown, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-DbW0Q__L.js";
 import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { n as Table } from "../chunks/Table-ByziK93x.js";
-import { a as resolvedFlag, c as FieldWrapper, i as initializeValues, n as flattenGroups, o as applySecondaryField, r as impureSetValueFromPath, s as findSecondaryOption, t as enforceOneMustBeTrue } from "../chunks/lib-DTgL8klR.js";
+import { n as Table } from "../chunks/Table-CutP1bRt.js";
+import { a as resolvedFlag, c as FieldWrapper, d as useFieldLabelledByProps, f as useFieldRequired, i as initializeValues, l as FieldProvider, n as flattenGroups, o as applySecondaryField, r as impureSetValueFromPath, s as findSecondaryOption, t as enforceOneMustBeTrue, u as useFieldControlProps } from "../chunks/lib-DyJvmbzj.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { Suspense, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { Suspense, createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import deepEqual from "fast-deep-equal";
 import { Duration } from "luxon";
 import { callWhenParserInitialized, convertToDynamicForm, extractInputDeps, initializeParseStringsOfObj, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
@@ -21,14 +21,16 @@ function getValueUsingPath(obj, path) {
 	let current = obj;
 	for (const key of keys) {
 		if (!current || typeof current !== "object") return;
+		const container = current;
 		if (key.includes("[")) {
-			const [arrayKey, indexStr] = key.split("[");
+			const [arrayKey = "", indexStr = ""] = key.split("[");
 			const index = parseInt(indexStr.slice(0, -1), 10);
-			if (!Array.isArray(current[arrayKey]) || isNaN(index)) return;
-			current = current[arrayKey][index];
+			const list = container[arrayKey];
+			if (!Array.isArray(list) || isNaN(index)) return;
+			current = list[index];
 		} else {
-			if (!(key in current)) return;
-			current = current[key];
+			if (!(key in container)) return;
+			current = container[key];
 		}
 	}
 	return current;
@@ -40,7 +42,7 @@ function checkShowIfObject(showIfObject, formValues, index) {
 	for (let [key, value] of Object.entries(showIfObject)) {
 		if (index !== void 0) key = key.replace("[index]", `[${index}]`);
 		const dependsOnValue = getValueUsingPath(formValues, key);
-		if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") valueList.push(dependsOnValue?.toString() === value.toString());
+		if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") valueList.push(dependsOnValue !== null && dependsOnValue !== void 0 && dependsOnValue.toString() === value.toString());
 		else if (Array.isArray(value)) valueList.push(value.includes(dependsOnValue));
 	}
 	return valueList;
@@ -49,15 +51,18 @@ function checkShowIfObject(showIfObject, formValues, index) {
 //#region src/form/utils/getParentValue.ts
 function getParentValue(index, targetField, values, dependentPath, field) {
 	let parentValue;
-	if (typeof targetField === "object" && !Array.isArray(targetField)) parentValue = !checkShowIfObject(targetField, values, index).includes(false);
+	if (typeof targetField === "object" && targetField !== null && !Array.isArray(targetField)) parentValue = !checkShowIfObject(targetField, values, index).includes(false);
 	else if (field.depends_on) {
 		dependentPath = field.depends_on;
 		if (index !== void 0) dependentPath = field.depends_on.replace("[index]", `[${index}]`);
 		const dependsOnValue = getValueUsingPath(values, dependentPath);
-		parentValue = targetField.includes(dependsOnValue) || targetField.includes(dependsOnValue?.toString());
+		const dependsOnText = dependsOnValue === null || dependsOnValue === void 0 ? void 0 : String(dependsOnValue);
+		if (Array.isArray(targetField)) parentValue = targetField.includes(dependsOnValue) || targetField.includes(dependsOnText);
+		else if (typeof targetField === "string") parentValue = dependsOnText !== void 0 && targetField.includes(dependsOnText);
+		else parentValue = targetField === dependsOnValue;
 	} else {
-		dependentPath = targetField;
-		if (index !== void 0) dependentPath = targetField.replace("[index]", `[${index}]`);
+		dependentPath = typeof targetField === "string" ? targetField : "";
+		if (index !== void 0 && typeof targetField === "string") dependentPath = targetField.replace("[index]", `[${index}]`);
 		parentValue = getValueUsingPath(values, dependentPath);
 	}
 	return parentValue;
@@ -75,7 +80,7 @@ function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMP
 		orgVars: void 0,
 		userVars: null,
 		secretKeys: null,
-		converted: null,
+		converted: {},
 		inputDeps: /* @__PURE__ */ new Set(),
 		hasExpressions: false,
 		relevantSnapshot: {},
@@ -107,16 +112,17 @@ function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMP
 		}
 		if (!inputsChanged) return c.result;
 	}
-	c.result = parseStringsOfObj({
+	const parsed = parseStringsOfObj({
 		inputs: values,
 		obj: c.converted,
 		orgVars: organizationVariables,
 		userVars,
 		secretKeys
 	});
+	c.result = parsed;
 	c.relevantSnapshot = {};
 	for (const key of c.inputDeps) c.relevantSnapshot[key] = values[key];
-	return c.result;
+	return parsed;
 }
 //#endregion
 //#region src/form/usePrevious.ts
@@ -303,6 +309,7 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 							className: cx({ hidden: status === "completed" }),
 							children: index + 1
 						}), status === "completed" && /* @__PURE__ */ jsx("svg", {
+							"aria-hidden": "true",
 							className: "w-4 h-4",
 							fill: "none",
 							stroke: "currentColor",
@@ -353,7 +360,7 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 //#endregion
 //#region src/form/Wizard/useWizardState.ts
 function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
-	const firstStep = initialStep || stepOrder[0];
+	const firstStep = initialStep || stepOrder[0] || "";
 	const [currentStep, setCurrentStep] = useState(firstStep);
 	const [visitedSteps, setVisitedSteps] = useState(new Set([firstStep]));
 	const [invalidSteps, setInvalidSteps] = useState(/* @__PURE__ */ new Set());
@@ -387,8 +394,8 @@ function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
 		}
 		markStepInvalid(currentStep, false);
 		const nextStepKey = stepOrder[currentStepIndex + 1];
-		setCurrentStep(nextStepKey);
-		markStepVisited(nextStepKey);
+		setCurrentStep(nextStepKey ?? "");
+		markStepVisited(nextStepKey ?? "");
 		return true;
 	}, [
 		currentStep,
@@ -403,7 +410,7 @@ function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
 	const goToPrevious = useCallback(() => {
 		if (!canGoBack) return;
 		const prevStepKey = stepOrder[currentStepIndex - 1];
-		setCurrentStep(prevStepKey);
+		setCurrentStep(prevStepKey ?? "");
 	}, [
 		canGoBack,
 		currentStepIndex,
@@ -468,6 +475,9 @@ function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
 }
 //#endregion
 //#region src/form/Wizard/WizardContainer.tsx
+function hasNestedError(stepErrors, fieldName) {
+	return typeof stepErrors === "object" && stepErrors !== null && fieldName in stepErrors;
+}
 function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched }) {
 	const { validateForm, setTouched, touched } = useFormikContext();
 	const { config, steps, stepOrder } = wizardConfig;
@@ -480,7 +490,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 			const stepFieldNames = Object.keys(stepConfig.options);
 			const shouldFlatten = config.flatten !== false;
 			const errors = await validateForm();
-			const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => errors[stepKey]?.[fieldName]);
+			const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => hasNestedError(errors[stepKey], fieldName));
 			if (hasStepErrors) {
 				const touchedFields = stepFieldNames.reduce((acc, fieldName) => {
 					acc[fieldName] = true;
@@ -593,17 +603,23 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 }
 //#endregion
 //#region src/form/Wizard/utils.ts
+function isWizardMeta(value) {
+	return typeof value === "object" && value !== null && "wizard" in value;
+}
+function isStepField(field) {
+	return typeof field === "object" && field !== null && "type" in field && field.type === "step";
+}
 function parseWizardConfig(options) {
-	const wizardConfig = options.$meta?.wizard;
+	const meta = options["$meta"];
+	const wizardConfig = isWizardMeta(meta) ? meta.wizard : void 0;
 	if (!wizardConfig || wizardConfig.mode !== "wizard") return null;
 	const steps = {};
 	const stepOrder = [];
 	const otherFields = {};
 	Object.entries(options).forEach(([key, field]) => {
 		if (key === "$meta") return;
-		const fieldConfig = field;
-		if (fieldConfig?.type === "step") {
-			steps[key] = fieldConfig;
+		if (isStepField(field)) {
+			steps[key] = field;
 			stepOrder.push(key);
 		} else otherFields[key] = field;
 	});
@@ -655,6 +671,8 @@ function arePropsEqual(prev, next) {
 	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 }) {
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
 	const prevParentRef = useRef(parentValue);
 	const handleChange = (val) => {
 		if (secondaryField && typeof options[0] !== "string") {
@@ -716,8 +734,10 @@ var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ar
 		autoselect
 	]);
 	return /* @__PURE__ */ jsx(Dropdown, {
+		...controlProps,
 		textBoxClassName: cx(className, invalid && "invalid"),
 		ariaLabel,
+		required,
 		onChange: (val) => handleChange(val),
 		value: options?.length === 0 && !allowCustomValue ? value : currentValue,
 		options,
@@ -733,6 +753,8 @@ var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ar
 var DEBOUNCE_MS$2 = 500;
 function FormikCustomInput({ name, type, step, placeholder, onChange, disabled, min, max, sanitize, invalid = false, lowercase = false, minLength, maxLength, defaultValue = "", value }) {
 	const [field] = useField(name);
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const [showPassword, setShowPassword] = useState(false);
 	const isPassword = type === "password";
@@ -764,10 +786,10 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		setFieldValue
 	]);
 	const handleChange = (e) => {
-		let val = e.target.value;
-		if (sanitize) val = sanitizeName(val);
+		const text = sanitize ? sanitizeName(e.target.value) : e.target.value;
+		let val = text;
 		if (type === "number") {
-			const parsed = parseFloat(val);
+			const parsed = parseFloat(text);
 			val = isNaN(parsed) ? void 0 : parsed;
 		}
 		if (type === "password" && val === "") val = defaultValue;
@@ -783,9 +805,10 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		clearTimeout(debounceRef.current ?? void 0);
 		const current = localValue;
 		if (current === void 0 || current === null) return;
-		let val = current.toString();
+		const text = current.toString();
+		let val = text;
 		if (type === "number") {
-			const parsed = parseFloat(val);
+			const parsed = parseFloat(text);
 			if (Number.isNaN(parsed)) val = void 0;
 			else if (min !== void 0 && parsed < min) val = min;
 			else if (max !== void 0 && parsed > max) val = max;
@@ -797,11 +820,13 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 	const displayValue = isPassword && localValue === defaultValue ? "" : localValue ?? "";
 	const resolvedType = isPassword ? showPassword ? "text" : "password" : type === "string" ? "text" : type;
 	const input = /* @__PURE__ */ jsx("input", {
+		...controlProps,
 		"data-1p-ignore": true,
 		className: cx("w-full", disabled && "disabled", invalid && "invalid", isPassword && "pr-8"),
 		name,
 		value: displayValue,
 		type: resolvedType,
+		"aria-required": required || void 0,
 		disabled,
 		placeholder,
 		minLength,
@@ -832,6 +857,8 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 var DEBOUNCE_MS$1 = 500;
 function FormikNumericInput({ name, placeholder, onChange, disabled, min, max, invalid = false }) {
 	const [field] = useField(name);
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const [localValue, setLocalValue] = useState(field.value);
 	const isFocused = useRef(false);
@@ -856,10 +883,12 @@ function FormikNumericInput({ name, placeholder, onChange, disabled, min, max, i
 		flush(val);
 	};
 	return /* @__PURE__ */ jsx(NumericFormat, {
+		...controlProps,
 		"data-1p-ignore": true,
 		className: cx("w-full", disabled && "disabled", invalid && "invalid"),
 		name,
-		value: localValue,
+		...localValue === void 0 ? {} : { value: localValue },
+		"aria-required": required || void 0,
 		thousandSeparator: ",",
 		decimalScale: 20,
 		allowNegative: true,
@@ -984,7 +1013,9 @@ function BooleanField(props) {
 		description: field.description,
 		labelPosition,
 		spaceCompact,
-		children: options ? /* @__PURE__ */ jsx(SwitchToggle, {
+		children: ({ id, describedBy }) => options ? /* @__PURE__ */ jsx(SwitchToggle, {
+			id,
+			"aria-describedby": describedBy,
 			onChange: (on) => handleChange(on ? options.onOption : options.offOption),
 			value: value === true || value === options.onOption,
 			yesLabel: displayLabel(options.onOption),
@@ -992,6 +1023,8 @@ function BooleanField(props) {
 			disabled,
 			invalid: missing
 		}) : /* @__PURE__ */ jsx(SwitchToggle, {
+			id,
+			"aria-describedby": describedBy,
 			datatip: field.disabled_message,
 			onChange: handleChange,
 			value: value === true || value === "true",
@@ -1008,7 +1041,7 @@ function DropdownField(props) {
 	let options = Array.isArray(field.options) && field.options || [];
 	if (field.depends_on) {
 		parentValue = field.depends_on;
-		if (!Array.isArray(field.options)) options = field.options[parentValue];
+		if (!Array.isArray(field.options)) options = field.options[parentValue] ?? [];
 	}
 	const secondaryField = Array.isArray(field.secondaryField) ? field.secondaryField[0] : field.secondaryField;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
@@ -1055,9 +1088,12 @@ function TextAreaField(props) {
 		description: field.description,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsx(Field, {
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Field, {
 			className: cx("theme-input h-[82px] w-full rounded leading-4 overflow-y-scroll", disabled && "disabled", missing && "border-red-600 focus:border-red-600 focus:ring-red-500"),
 			as: "textarea",
+			id,
+			"aria-describedby": describedBy,
+			"aria-required": field.optional ? void 0 : true,
 			name: field.name,
 			type: "search",
 			placeholder: getPlaceholder(field.placeholder, field.default),
@@ -1091,10 +1127,11 @@ function RangeField(props) {
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: ({ id, labelId }) => /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center",
 			children: [/* @__PURE__ */ jsx(Field, {
 				className: cx("theme-input h-7 w-1/3 mr-5 text-center rounded border text-[14px]", disabled && "disabled"),
+				id,
 				type: "number",
 				value: currentValue,
 				min: field.min,
@@ -1107,6 +1144,8 @@ function RangeField(props) {
 				name: field.name,
 				value: currentValue,
 				type: "range",
+				"aria-labelledby": labelId,
+				"aria-required": field.optional ? void 0 : true,
 				min: field.min,
 				max: field.max,
 				step: field.step || 1,
@@ -1272,20 +1311,23 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 			flushToFormik(parsed);
 		}
 	};
-	return /* @__PURE__ */ jsxs(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional ?? false,
 		label,
 		tooltipComponent,
 		labelPosition,
 		spaceCompact: spaceCompact ?? false,
 		...field.description !== void 0 && { description: field.description },
-		children: [
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			!isSentinel && /* @__PURE__ */ jsx("input", {
 				"data-1p-ignore": true,
 				className: cx("w-full", disabled && "disabled", (missing || error !== null) && "invalid"),
+				id,
+				"aria-describedby": describedBy,
 				name,
 				value: text,
 				type: "text",
+				"aria-required": field.optional ? void 0 : true,
 				disabled,
 				placeholder: field.placeholder ?? "DD-HH:MM:SS",
 				onChange: handleChange,
@@ -1309,13 +1351,14 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 					children: field.disableLabel
 				})]
 			})
-		]
+		] })
 	});
 });
 //#endregion
 //#region src/form/Fields/RadioField.tsx
 function RadioField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const uid = useId();
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (val) => {
 		if (disabled) return;
@@ -1330,11 +1373,17 @@ function RadioField(props) {
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsx("div", {
+		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-labelledby": labelId,
+			"aria-describedby": describedBy,
+			"aria-required": field.optional ? void 0 : true,
 			className: cx("flex", field.optionLabelPosition === "top" ? "flex-col" : "flex-row"),
 			children: field.options?.map((option) => /* @__PURE__ */ jsxs("label", {
+				htmlFor: `${uid}-${option}`,
 				className: "capitalize",
 				children: [/* @__PURE__ */ jsx(Field, {
+					id: `${uid}-${option}`,
 					className: cx("theme-input mr-1", disabled && "disabled", missing && "invalid"),
 					name: field.name,
 					type: "radio",
@@ -1382,11 +1431,13 @@ function ColorField(props) {
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsx(Field, {
+		children: ({ id }) => /* @__PURE__ */ jsx(Field, {
 			className: "theme-input h-8 w-18 rounded border border-neutral-400 text-[14px] placeholder:text-xs",
+			id,
 			name: field.name,
 			value: fieldState.value || "#fbbf24",
 			type: "color",
+			"aria-required": field.optional ? void 0 : true,
 			onChange: handleChange
 		})
 	});
@@ -1406,8 +1457,9 @@ function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spa
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: disabled ? /* @__PURE__ */ jsx(Field, {
+		children: ({ id }) => disabled ? /* @__PURE__ */ jsx(Field, {
 			className: "theme-input h-7 w-full rounded border text-[14px] placeholder:text-xs",
+			id,
 			type: "search",
 			name: field.name,
 			disabled: true,
@@ -1461,26 +1513,28 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex max-w-lg flex-col gap-1",
+		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx("fieldset", {
+			"aria-labelledby": labelId,
+			"aria-describedby": describedBy,
+			className: "flex min-w-0 max-w-lg flex-col gap-1",
 			children: field.options?.map((option) => {
 				const locked = forced.has(option.value);
 				const optionDisabled = disabled || locked;
 				return /* @__PURE__ */ jsxs("label", {
-					className: cx("flex items-start gap-2 rounded px-2 py-1 transition-colors", optionDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
+					className: cx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors", optionDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
 					children: [/* @__PURE__ */ jsx("input", {
 						type: "checkbox",
 						checked: manual.includes(option.value) || locked,
 						disabled: optionDisabled,
 						onChange: () => handleToggle(option.value),
-						className: cx("mt-0.5 h-4 w-4 accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
+						className: cx("mt-px h-4 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
 					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col",
+						className: "flex min-w-0 flex-col",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "font-medium theme-text",
+							className: "text-sm font-medium leading-tight theme-text",
 							children: option.label
 						}), option.description && /* @__PURE__ */ jsx("span", {
-							className: "text-xs theme-muted-text leading-relaxed",
+							className: "mt-0.5 text-xs leading-snug theme-muted-text",
 							children: option.description
 						})]
 					})]
@@ -1555,9 +1609,11 @@ function BucketReadOnlyField({ field, disabled, missing, labelPosition, setFormD
 		label: t.readOnly,
 		description: t.readOnlyDescription,
 		labelPosition,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2",
 			children: [/* @__PURE__ */ jsx(SwitchToggle, {
+				id,
+				"aria-describedby": describedBy,
 				onChange: (value) => {
 					if (disabled) return;
 					setFieldTouched(field.name, true);
@@ -1611,30 +1667,41 @@ function Registry(props) {
 }
 //#endregion
 //#region src/form/Form.tsx
+function asSchemaField(value) {
+	return value && typeof value === "object" ? value : null;
+}
+function asRecord(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function flagValue(value, fallback) {
+	return value && (typeof value === "string" || typeof value === "boolean") ? value : fallback;
+}
 /** Applies `$meta` overrides for `labelPosition` / `spaceCompact`. */
 function resolveMetaOverrides(options, labelPosition, spaceCompact) {
+	const meta = options?.["$meta"];
 	return {
-		labelPosition: options?.$meta?.labelPosition ?? labelPosition,
-		spaceCompact: options?.$meta?.spaceCompact ?? spaceCompact
+		labelPosition: meta?.labelPosition ?? labelPosition,
+		spaceCompact: meta?.spaceCompact ?? spaceCompact
 	};
 }
 /** Cheap signature of every list's length; gates the expensive collect walk. */
 function listLengthsSignature(options, values = {}, prefix = "") {
 	if (!options || typeof options !== "object") return "";
 	const parts = [];
-	for (const [fieldName, field] of Object.entries(options)) {
-		if (fieldName === "$meta" || !field || typeof field !== "object") continue;
+	for (const [fieldName, rawField] of Object.entries(options)) {
+		const field = asSchemaField(rawField);
+		if (fieldName === "$meta" || !field) continue;
 		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
 		if (field.type === "list") {
 			const items = values?.[fieldName];
 			const len = Array.isArray(items) ? items.length : 0;
 			parts.push(`${fullName}:${len}`);
 			const template = field.template || field.options;
-			if (template && Array.isArray(items)) for (let i = 0; i < items.length; i++) parts.push(listLengthsSignature(template, 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" || field.type === "object") {
 			const groupItems = field.items || field.options;
 			if (groupItems) {
-				const nestedValues = values?.[fieldName] || {};
+				const nestedValues = asRecord(values?.[fieldName]);
 				parts.push(listLengthsSignature(groupItems, nestedValues, `${fullName}.`));
 			}
 		}
@@ -1645,14 +1712,15 @@ function listLengthsSignature(options, values = {}, prefix = "") {
 function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 	const result = [];
 	if (!options || typeof options !== "object") return result;
-	for (const [fieldName, field] of Object.entries(options)) {
-		if (!field || typeof field !== "object") continue;
+	for (const [fieldName, rawField] of Object.entries(options)) {
+		const field = asSchemaField(rawField);
+		if (!field) continue;
 		if (fieldName === "$meta") continue;
 		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
 		if (field.type === "group" || field.type === "object") {
 			const groupItems = field.items || field.options;
 			if (groupItems) {
-				const nestedValues = values?.[fieldName] || {};
+				const nestedValues = asRecord(values?.[fieldName]);
 				result.push(...collectFieldsWithDefaults(groupItems, nestedValues, `${fullName}.`));
 			}
 			continue;
@@ -1661,7 +1729,7 @@ function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 			const listTemplate = field.template || field.options;
 			const listValues = values?.[fieldName];
 			if (listTemplate && Array.isArray(listValues)) for (let i = 0; i < listValues.length; i++) {
-				const itemValues = listValues[i] || {};
+				const itemValues = asRecord(listValues[i]);
 				result.push(...collectFieldsWithDefaults(listTemplate, itemValues, `${fullName}[${i}].`));
 			}
 			continue;
@@ -1722,8 +1790,10 @@ function DynamicDefaultsSync({ options }) {
 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("div", {
-			className: cx("w-full flex items-center transform ease-in transition cursor-pointer"),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			className: cx("w-full flex items-center text-left transform ease-in transition cursor-pointer"),
 			onClick: () => setOpen((open) => !open),
 			children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90 ", "px-1 text-[1.25rem]  transition ease-in ") }), /* @__PURE__ */ jsx("span", { children: title })]
 		}), children]
@@ -1779,6 +1849,8 @@ function StatusBlock({ status }) {
 }
 function MultiSelectionDropdown({ name, label = "", invalid = false, options: initialOptions = [], setFormDirty, onChange, parentValue }) {
 	const [field] = useField(name);
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
 	const { setFieldValue } = useFormikContext();
 	const options = useMemo(() => {
 		return initialOptions.map((option) => {
@@ -1799,6 +1871,7 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 		if (onChange) onChange(options);
 		setFormDirty(true);
 	};
+	const t = useStrings().common;
 	const handleRemoveOption = (key) => {
 		setFieldValue(name, [...field.value.filter((item) => item !== key)]);
 		if (onChange) onChange(options);
@@ -1809,7 +1882,9 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 		if (prevParent && parentValue && prevParent !== parentValue) setFieldValue(name, []);
 	}, [parentValue]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CustomListbox, {
+		...controlProps,
 		options,
+		required,
 		type: label.toLowerCase(),
 		handleOptionSelected,
 		className: "mb-3",
@@ -1819,9 +1894,12 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 		return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx(Table.Item, {
 			className: "w-full",
 			children: option?.label
-		}), /* @__PURE__ */ jsx(Table.Item, { children: /* @__PURE__ */ jsx(TrashIcon, {
-			className: "link mr-4",
-			onClick: () => handleRemoveOption(option.value)
+		}), /* @__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" })
 		}) })] }, index);
 	}) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(Table.Item, { children: [
 		"No ",
@@ -1848,7 +1926,7 @@ var InputField = React.memo(function InputField({ label, field, setFormDirty, on
 		field: fieldObj,
 		label,
 		labelPosition,
-		missing: missingFields.includes(fieldObj.name),
+		missing: missingFields.includes(fieldObj.name ?? ""),
 		missingFields,
 		values,
 		setFormDirty,
@@ -1901,7 +1979,7 @@ function useFieldParse(optionsField, values, arrayIndex) {
 	}).current;
 	if (optionsField !== c.lastOptField) {
 		c.lastOptField = optionsField;
-		c.convertedField = convertToDynamicForm(optionsField);
+		c.convertedField = convertToDynamicForm(asRecord(optionsField));
 		const { inputDeps, hasExpressions } = extractInputDeps(c.convertedField);
 		c.inputDeps = inputDeps;
 		c.hasExpressions = hasExpressions;
@@ -1934,8 +2012,8 @@ function useFieldParse(optionsField, values, arrayIndex) {
 }
 var FormField = React.memo(function FormField({ id, optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
 	const parsedField = useFieldParse(optionsField, values, parentInfo?.arrayIndex);
-	const field = parentInfo ? parsedField : optionsField;
-	if (field === null || field === void 0) return field;
+	const field = asSchemaField(parentInfo ? parsedField : optionsField);
+	if (field === null) return null;
 	const fieldNamePrefix = parentInfo?.fieldNamePrefix || "";
 	const fieldObj = {
 		...field,
@@ -1943,17 +2021,18 @@ 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";
+	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;
-		onChange = (val) => parentOnChange(fieldName, parentArrayIndex, fieldObj.options?.offOption || false, fieldObj.options?.onOption || true, val);
+		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;
@@ -1963,18 +2042,18 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 		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 (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") {
@@ -1995,7 +2074,7 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 				children: /* @__PURE__ */ jsx("div", {
 					className: "w-full",
 					children: /* @__PURE__ */ jsx(FieldsFromOptions, {
-						options: field.options,
+						options: field.options ?? {},
 						setFormDirty,
 						setFieldValue,
 						setFieldTouched,
@@ -2008,41 +2087,43 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 					})
 				})
 			})
-		}, fieldObj.name);
+		}, fieldObj["name"]);
 	}
 	if (typeof field.type === "object" && field.depends_on) {
 		const parentValue = getValueUsingPath(values, field.depends_on);
-		if (!field.type[parentValue]) return null;
-		fieldObj.type = field.type[parentValue];
+		const resolvedType = field.type[String(parentValue)];
+		if (!resolvedType) return null;
+		fieldObj["type"] = resolvedType;
 	}
 	if (field.type === "range" && field.depends_on) {
 		const parentValue = getValueUsingPath(values, field.depends_on);
-		if (typeof field?.min === "object" && typeof field?.max === "object") {
-			fieldObj.min = field.min[parentValue];
-			fieldObj.max = field.max[parentValue];
+		const { min, max } = field;
+		if (typeof min === "object" && typeof max === "object") {
+			fieldObj["min"] = min[String(parentValue)];
+			fieldObj["max"] = max[String(parentValue)];
 		}
 	}
 	if (field.resetOnChange) {
 		const parentValue = getValueUsingPath(values, field.resetOnChange);
 		const prevParentValue = field.prevParentValue;
-		if (prevParentValue !== void 0 && prevParentValue !== parentValue) deleteFieldByPath(values, fieldObj.name);
+		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) 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: fieldObj.disabled,
-			computeOn: parentInfo?.computeOn || fieldObj.computeOn,
+			disabled: Boolean(fieldObj["disabled"]),
+			computeOn: parentInfo?.computeOn || fieldObj["computeOn"],
 			labelPosition,
 			missingFields,
 			spaceCompact,
@@ -2141,7 +2222,7 @@ function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialVal
 				onReset: () => {
 					setFormDirty(false);
 				},
-				innerRef: formikRef,
+				...formikRef ? { innerRef: formikRef } : {},
 				children: ({ values }) => /* @__PURE__ */ jsx(Form, {
 					className: "w-full text-sm",
 					children: /* @__PURE__ */ jsx(DynamicFormContent, {
@@ -2173,15 +2254,15 @@ function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid =
 		loading,
 		setFormDirty,
 		options,
-		disabled: disabled ?? fieldObj.disabled ?? false,
+		disabled: disabled ?? Boolean(fieldObj.disabled),
 		placeholder: getPlaceholder(fieldObj.placeholder, typeof fieldObj.default === "string" ? fieldObj.default : void 0),
-		name: fieldObj.name,
+		name: fieldObj.name ?? "",
 		ariaLabel: fieldObj.label,
 		parentValue: fieldObj.parentValue,
 		secondaryField: fieldObj.secondaryField,
 		resetOnChange: fieldObj.resetOnChange,
 		value: fieldObj.value,
-		autoselect: fieldObj.autoselect,
+		autoselect: fieldObj.autoselect === void 0 ? void 0 : Boolean(fieldObj.autoselect),
 		allowCustomValue: allowCustomValue ?? fieldObj.allowCustomValue,
 		customValueLabel: fieldObj.customValueLabel,
 		currentValue,
@@ -2193,6 +2274,8 @@ function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid =
 //#region src/form/SpecialTypes/FormikMultiSelectDropdown.tsx
 function FormikMultiSelectDropdown({ name, options, setFormDirty, onChange, disabled = false, loading = false, invalid = false, placeholder, compareBy }) {
 	const [field] = useField(name);
+	const required = useFieldRequired();
+	const labelledByProps = useFieldLabelledByProps();
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (next) => {
 		setFieldValue(name, next);
@@ -2201,8 +2284,10 @@ function FormikMultiSelectDropdown({ name, options, setFormDirty, onChange, disa
 		onChange?.(next);
 	};
 	return /* @__PURE__ */ jsx(MultiSelectDropdown, {
+		...labelledByProps,
 		textBoxClassName: invalid ? "invalid" : void 0,
 		options,
+		required,
 		value: Array.isArray(field.value) ? field.value : [],
 		onChange: handleChange,
 		disabled,
@@ -2230,8 +2315,8 @@ function resolvePwString(raw, options, fallbackUsername, opts) {
 		}
 	} else if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
 		const obj = raw;
-		if (typeof obj.uri === "string" && obj.uri.startsWith("pw://")) {
-			const parts = obj.uri.slice(5).split("/");
+		if (typeof obj["uri"] === "string" && obj["uri"].startsWith("pw://")) {
+			const parts = obj["uri"].slice(5).split("/");
 			if (parts.length === 1 && parts[0]) {
 				inputForm = "shorthand";
 				name = parts[0];
@@ -2241,19 +2326,19 @@ function resolvePwString(raw, options, fallbackUsername, opts) {
 				owner = parts[0];
 				name = parts[1];
 			}
-		} else if (typeof obj.name === "string") {
-			name = obj.name;
-			const ownerVal = typeof obj.user === "string" ? obj.user : typeof obj.namespace === "string" ? obj.namespace : void 0;
-			if (obj.type === "managed-cluster" || !ownerVal) {
+		} else if (typeof obj["name"] === "string") {
+			name = obj["name"];
+			const ownerVal = typeof obj["user"] === "string" ? obj["user"] : typeof obj["namespace"] === "string" ? obj["namespace"] : void 0;
+			if (obj["type"] === "managed-cluster" || !ownerVal) {
 				inputForm = "shorthand";
 				owner = fallbackUsername;
 			} else {
 				inputForm = "full";
 				owner = ownerVal;
 			}
-		} else if (typeof obj.id === "string" && obj.id) {
+		} else if (typeof obj["id"] === "string" && obj["id"]) {
 			inputForm = "shorthand";
-			name = obj.id;
+			name = obj["id"];
 			owner = fallbackUsername;
 		}
 	}
@@ -2303,4 +2388,4 @@ function ResourceOptionIcon({ imageUrl, fallbackIcon, alt, variant = "success",
 	});
 }
 //#endregion
-export { DropdownWrapper, DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldRegistryContext, FieldWrapper, FieldsFromOptions, FormikCustomDropdown_default as FormikCustomDropdown, FormikCustomInput, FormikMultiSelectDropdown, FormikNumericInput, GroupHeader, MultiSelectionDropdown, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, StatusBlock, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatSecondsAsSlurmDuration, getInstanceTypesForForm, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseSlurmDuration, resolveMetaOverrides, resolvePwString, resolvePwValue, resolvedFlag, setDurationValidity, useParsedOpts };
+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, StatusBlock, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatSecondsAsSlurmDuration, getInstanceTypesForForm, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseSlurmDuration, resolveMetaOverrides, resolvePwString, resolvePwValue, resolvedFlag, setDurationValidity, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useParsedOpts };