@parallelworks/ui 0.20.0 → 0.21.0

package/dist/file-explorer/toasts.js

@@ -2,7 +2,7 @@ import { useStrings } from "../components/Provider.js";
 import { AlertIcon, AngleDownIcon, AngleUpIcon, CloseIcon, CloudUploadIcon, ExpandVerticalIcon, MinimizeIcon, SuccessIcon } from "../icons.js";
 import { formatETA, formatFileSize } from "./lib/utils.js";
 import cx from "classnames";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/file-explorer/toasts.tsx
 function getSessionStatusInfo(session, queueLength, strings) {
@@ -39,19 +39,24 @@ function getSessionStatusInfo(session, queueLength, strings) {
 		};
 	}
 }
-function FileProgressBar({ fileProgress, fileName, progressBarColorScheme, onCancelFile }) {
+function barColor({ isCompleted, isCancelled, isFailed }) {
+	if (isCompleted) return "bg-green-600";
+	if (isCancelled) return "bg-(--theme-muted-text-color)";
+	return isFailed ? "bg-red-600" : "theme-element";
+}
+function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
 	const strings = useStrings().fileExplorer.upload;
 	const [isHovered, setIsHovered] = useState(false);
 	const [showCancelConfirm, setShowCancelConfirm] = useState(false);
-	const percentage = fileProgress?.percentage || 0;
-	const loadedBytes = fileProgress?.loadedBytes || 0;
-	const totalBytes = fileProgress.fileSizeBytes || fileProgress?.totalBytes || 0;
+	const percentage = fileProgress.percentage || 0;
+	const loadedBytes = fileProgress.loadedBytes || 0;
+	const totalBytes = fileProgress.fileSizeBytes || fileProgress.totalBytes || 0;
 	const isCompleted = percentage === 100 || fileProgress.status === "completed";
 	const isCancelled = fileProgress.status === "cancelled";
 	const isFailed = fileProgress.status === "failed";
-	const isUploading = fileProgress.status === "uploading" || !isCompleted && !isCancelled && !isFailed;
-	const canCancel = isUploading && fileProgress.abortController && !isCompleted && !isCancelled && !isFailed;
-	const barColor = isCompleted ? progressBarColorScheme.completed : isCancelled ? progressBarColorScheme.cancelled : isFailed ? progressBarColorScheme.failed : progressBarColorScheme.uploading;
+	const isSettled = isCompleted || isCancelled || isFailed;
+	const isUploading = fileProgress.status === "uploading" || !isSettled;
+	const canCancel = !!fileProgress.abortController && !isSettled;
 	const handleCancelClick = (e) => {
 		e.stopPropagation();
 		setShowCancelConfirm(true);
@@ -92,7 +97,11 @@ function FileProgressBar({ fileProgress, fileName, progressBarColorScheme, onCan
 					children: /* @__PURE__ */ jsxs("div", {
 						className: cx("w-full bg-(--theme-border) rounded-full overflow-hidden transition-all duration-300 ease-in-out flex items-center", isHovered && !isCompleted ? "h-6" : "h-2"),
 						children: [/* @__PURE__ */ jsx("div", {
-							className: cx("h-full transition-all duration-300 relative flex items-center justify-center", barColor, isHovered && "opacity-80"),
+							className: cx("h-full transition-all duration-300 relative flex items-center justify-center", barColor({
+								isCompleted,
+								isCancelled,
+								isFailed
+							}), isHovered && "opacity-80"),
 							style: { width: `${percentage}%` }
 						}), isHovered && !isCompleted && totalBytes > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 							className: "absolute inset-0 flex items-center justify-center text-xs whitespace-nowrap p-0.5 z-10",
@@ -157,29 +166,24 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 	const [isToastExpanded, setIsToastExpanded] = useState(false);
 	const [isFileListExpanded, setIsExpanded] = useState(session.uploadNodes.length <= 3);
 	const [showCancelConfirm, setShowCancelConfirm] = useState(false);
-	const statusInfo = useMemo(() => getSessionStatusInfo(session, queueLength, strings), [
-		session,
-		queueLength,
-		strings
-	]);
+	const statusInfo = getSessionStatusInfo(session, queueLength, strings);
 	const targetPath = `${session.targetPath}/`;
-	const isQueued = session.status === "queued";
 	const isCompleted = session.status === "completed";
 	const isCancelled = session.status === "cancelled";
 	const isFailed = session.status === "failed";
-	const isUploading = session.status === "uploading" || !isCompleted && !isCancelled && !isFailed;
+	const isUploading = !isCompleted && !isCancelled && !isFailed;
 	const totalProgress = session.progress?.overallProgress || 0;
 	const totalSize = session.progress?.totalSizeBytes || 0;
-	const progressBarColorScheme = {
-		uploading: "theme-element",
-		completed: "bg-green-600",
-		failed: "bg-red-600",
-		cancelled: "bg-(--theme-muted-text-color)"
-	};
-	const barColor = isCompleted ? progressBarColorScheme.completed : isCancelled ? progressBarColorScheme.cancelled : isFailed ? progressBarColorScheme.failed : progressBarColorScheme.uploading;
+	const sessionBarColor = barColor({
+		isCompleted,
+		isCancelled,
+		isFailed
+	});
 	const allFiles = session.progress?.allFiles ? Array.from(session.progress.allFiles.values()) : [];
-	const uploadingFiles = session.progress?.allFiles ? Array.from(session.progress.allFiles.values()).filter((file) => file.percentage && file.percentage >= 0 && file.percentage < 100) : [];
-	const shouldShowSessionCancelButton = !showCancelConfirm && (isUploading || isQueued) && session.uploadNodes.length > 1;
+	const singleFile = allFiles[0];
+	const singleNode = session.uploadNodes.length === 1 ? session.uploadNodes[0] : void 0;
+	const uploadingFiles = allFiles.filter((file) => (file.percentage ?? 0) > 0 && (file.percentage ?? 0) < 100);
+	const shouldShowSessionCancelButton = !showCancelConfirm && isUploading && session.uploadNodes.length > 1;
 	const estimatedSecondsLeft = session.progress?.estimatedSecondsLeft;
 	const showETA = isUploading && estimatedSecondsLeft && estimatedSecondsLeft > 0;
 	const handleExpandClick = (e) => {
@@ -251,7 +255,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 							children: /* @__PURE__ */ jsx("div", {
 								className: "flex-1 h-1.5 bg-(--theme-border) rounded-full overflow-hidden",
 								children: /* @__PURE__ */ jsx("div", {
-									className: cx("h-full transition-all duration-300", barColor),
+									className: cx("h-full transition-all duration-300", sessionBarColor),
 									style: { width: `${totalProgress}%` }
 								})
 							})
@@ -323,7 +327,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						})]
 					})
 				}),
-				session.uploadNodes.length > 1 && (isUploading || isQueued) && /* @__PURE__ */ jsxs("div", {
+				session.uploadNodes.length > 1 && isUploading && /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between text-xs theme-muted-text",
@@ -331,7 +335,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					}), /* @__PURE__ */ jsx("div", {
 						className: "h-2 w-full bg-(--theme-border) rounded-full overflow-hidden",
 						children: /* @__PURE__ */ jsx("div", {
-							className: cx("h-full transition-all duration-300", barColor),
+							className: cx("h-full transition-all duration-300", sessionBarColor),
 							style: { width: `${totalProgress}%` }
 						})
 					})]
@@ -351,17 +355,15 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 							return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FileProgressBar, {
 								fileProgress,
 								fileName: node.name,
-								progressBarColorScheme,
 								onCancelFile: () => onCancelFile?.(node.relativePath)
 							}) }, node.relativePath);
 						})
 					})]
 				}),
-				session.uploadNodes.length === 1 && allFiles.length > 0 && /* @__PURE__ */ jsx(FileProgressBar, {
-					fileProgress: allFiles[0],
-					fileName: session.uploadNodes[0].name,
-					progressBarColorScheme,
-					onCancelFile: () => onCancelFile?.(session.uploadNodes[0].relativePath)
+				singleNode && singleFile && /* @__PURE__ */ jsx(FileProgressBar, {
+					fileProgress: singleFile,
+					fileName: singleNode.name,
+					onCancelFile: () => onCancelFile?.(singleNode.relativePath)
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-end",

package/dist/form/Fields/BooleanField.js

@@ -5,13 +5,14 @@ import { useField, useFormikContext } from "formik";
 //#region src/form/Fields/BooleanField.tsx
 function BooleanField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
-	const [fieldState] = useField(field.name);
+	const fieldName = field.name ?? "";
+	const [fieldState] = useField(fieldName);
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (val) => {
 		if (disabled) return;
-		if (onChange) onChange(val);
-		setFieldTouched(field.name, true);
-		setFieldValue(field.name, val);
+		onChange?.(val);
+		setFieldTouched(fieldName, true);
+		setFieldValue(fieldName, val);
 		setFormDirty(true);
 	};
 	const value = fieldState.value;

package/dist/form/Fields/CheckboxGroupField.js

@@ -13,7 +13,8 @@ function union(manual, forced) {
 	return [...manual, ...[...forced].filter((v) => !manual.includes(v))];
 }
 function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty }) {
-	const [fieldState] = useField(field.name);
+	const fieldName = field.name ?? "";
+	const [fieldState] = useField(fieldName);
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const implies = field.implies;
 	const [manual, setManual] = useState(() => {
@@ -27,9 +28,9 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 		const nextManual = manual.includes(value) ? manual.filter((v) => v !== value) : [...manual, value];
 		const next = union(nextManual, impliedFrom(nextManual, implies));
 		setManual(nextManual);
-		setFieldTouched(field.name, true);
-		setFieldValue(field.name, next);
-		if (onChange) onChange(next);
+		setFieldTouched(fieldName, true);
+		setFieldValue(fieldName, next);
+		onChange?.(next);
 		setFormDirty(true);
 	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {

package/dist/form/Fields/ColorField.js

@@ -4,13 +4,14 @@ import { Field, useField, useFormikContext } from "formik";
 //#region src/form/Fields/ColorField.tsx
 function ColorField(props) {
 	const { field, label, labelPosition, onChange, tooltipComponent, spaceCompact } = props;
-	const [fieldState] = useField(field.name);
+	const fieldName = field.name ?? "";
+	const [fieldState] = useField(fieldName);
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (e) => {
 		const val = e.target.value;
-		if (onChange) onChange(val);
-		setFieldTouched(field.name, true);
-		setFieldValue(field.name, val);
+		onChange?.(val);
+		setFieldTouched(fieldName, true);
+		setFieldValue(fieldName, val);
 	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,

package/dist/form/Fields/DropdownField.d.ts

@@ -15,7 +15,6 @@ export interface IDropdownField extends BaseField {
         description?: string;
     }>>;
     parentValue?: string;
-    resetOnChange?: boolean;
     autoselect?: boolean;
     allowCustomValue?: boolean;
     customValueLabel?: string;

package/dist/form/Fields/DropdownField.js

@@ -1,16 +1,16 @@
 import { FieldWrapper } from "../FieldWrapper.js";
 import FormikCustomDropdown_default from "../SpecialTypes/FormikCustomDropdown.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
+import { dependentOptions } from "../utils/dependentOptions.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/DropdownField.tsx
+var missingSetter = () => {
+	throw new Error("DropdownField needs setFieldValue and setFieldTouched");
+};
 function DropdownField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFieldValue, setFieldTouched, currentValue } = props;
-	let parentValue = field.parentValue;
-	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] ?? [];
-	}
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFieldValue, setFieldTouched, currentValue, values } = props;
+	const fieldName = field.name ?? "";
+	const { options } = dependentOptions(field.options, field.depends_on, values);
 	const secondaryField = Array.isArray(field.secondaryField) ? field.secondaryField[0] : field.secondaryField;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
@@ -24,23 +24,20 @@ function DropdownField(props) {
 			children: /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
 				invalid: missing,
 				className: "w-full",
-				name: field.name,
+				name: fieldName,
 				ariaLabel: label,
 				options,
 				setFormDirty: props.setFormDirty,
-				parentValue,
 				onChange,
 				secondaryField,
 				disabled,
-				resetOnChange: field.resetOnChange ? field.name : "",
-				loading: false,
 				autoselect: field.autoselect,
 				allowCustomValue: field.allowCustomValue,
 				customValueLabel: field.customValueLabel,
 				placeholder: getPlaceholder(field.placeholder, typeof field.default === "string" ? field.default : void 0),
 				currentValue,
-				setFieldValue,
-				setFieldTouched
+				setFieldValue: setFieldValue ?? missingSetter,
+				setFieldTouched: setFieldTouched ?? missingSetter
 			}, field.name)
 		})
 	});

package/dist/form/Fields/DurationField.js

@@ -15,7 +15,7 @@ var toDisplay = (value) => {
 };
 var DurationField_default = memo(function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty, currentValue, setFieldValue, setFieldTouched }) {
 	const { form: t } = useStrings();
-	const name = field.name;
+	const name = field.name ?? "";
 	const min = field.min !== void 0 ? Number(field.min) : Number.NEGATIVE_INFINITY;
 	const max = field.max !== void 0 ? Number(field.max) : Number.POSITIVE_INFINITY;
 	const disableValue = field.disableValue;
@@ -57,7 +57,7 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 		setFormDirty(true);
 		if (checked) {
 			setText("");
-			flushToFormik(disableValue);
+			if (disableValue !== void 0) flushToFormik(disableValue);
 		} else flushToFormik(typeof field.default === "number" ? field.default : "");
 	};
 	const handleChange = (e) => {

package/dist/form/Fields/LabelField.js

@@ -6,12 +6,12 @@ function LabelField(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex items-center w-full",
 		children: /* @__PURE__ */ jsx("h3", {
-			style: field.size ? {
-				fontSize: field.size.toString() + "px",
-				whiteSpace: "pre-wrap"
-			} : { whiteSpace: "pre-wrap" },
+			style: {
+				whiteSpace: "pre-wrap",
+				...field.size ? { fontSize: `${field.size}px` } : {}
+			},
 			className: cx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
-			children: field.text && field.text.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
+			children: field.text?.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
 		})
 	});
 }

package/dist/form/Fields/MultiDropdownField.d.ts

@@ -15,4 +15,4 @@ export interface IMultiDropdownField extends BaseField {
     }>>;
     parentValue?: string | boolean | number;
 }
-export default function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange, }: FieldComponentProps<IMultiDropdownField>): import("react").JSX.Element;
+export default function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange, values, }: FieldComponentProps<IMultiDropdownField>): import("react").JSX.Element;

package/dist/form/Fields/MultiDropdownField.js

@@ -1,15 +1,14 @@
 import { FieldWrapper } from "../FieldWrapper.js";
+import { dependentOptions } from "../utils/dependentOptions.js";
 import { MultiSelectionDropdown } from "../Form.js";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "formik";
 //#region src/form/Fields/MultiDropdownField.tsx
-function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange }) {
-	let parentValue = field.parentValue;
-	let options = field.options;
-	if (field.depends_on) {
-		parentValue = field.depends_on;
-		if (!Array.isArray(field.options)) options = field.options[parentValue] || [];
-	}
+function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange, values }) {
+	const fieldName = field.name ?? "";
+	const dependent = dependentOptions(field.options, field.depends_on, values);
+	const { options } = dependent;
+	const parentValue = field.depends_on ? dependent.parentValue : field.parentValue;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -24,14 +23,12 @@ function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spa
 			disabled: true,
 			onChange
 		}, field.name) : /* @__PURE__ */ jsx(MultiSelectionDropdown, {
-			className: "themee-input h-7 w-full rounded border flex items-center px-3 py-2",
-			name: field.name,
+			name: fieldName,
 			label: field.label || label,
-			options: Array.isArray(options) ? options : [],
+			options,
 			setFormDirty,
 			parentValue,
 			onChange,
-			secondaryField: typeof field.secondaryField === "string" ? field.secondaryField : void 0,
 			invalid: missing
 		}, field.name)
 	});

package/dist/form/Fields/NumberField.js

@@ -8,14 +8,15 @@ import { useField, useFormikContext } from "formik";
 //#region src/form/Fields/NumberField.tsx
 function NumberField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
-	const [fieldState] = useField(field.name);
+	const fieldName = field.name ?? "";
+	const [fieldState] = useField(fieldName);
 	const { setFieldValue } = useFormikContext();
 	useEffect(() => {
-		if (field.prefillDefault && field.default !== void 0 && (fieldState.value === void 0 || fieldState.value === null || fieldState.value === "")) setFieldValue(field.name, field.default);
+		if (field.prefillDefault && field.default !== void 0 && (fieldState.value === void 0 || fieldState.value === null || fieldState.value === "")) setFieldValue(fieldName, field.default);
 	}, [
 		field.prefillDefault,
 		field.default,
-		field.name,
+		fieldName,
 		fieldState.value,
 		setFieldValue
 	]);
@@ -27,7 +28,7 @@ function NumberField(props) {
 		spaceCompact,
 		children: field.thousandsSeparator ? /* @__PURE__ */ jsx(FormikNumericInput, {
 			invalid: missing,
-			name: field.name,
+			name: fieldName,
 			placeholder: getPlaceholder(field.placeholder, field.default),
 			disabled,
 			min: field.min,
@@ -35,7 +36,7 @@ function NumberField(props) {
 			...onChange && { onChange }
 		}, field.name) : /* @__PURE__ */ jsx(FormikCustomInput, {
 			invalid: missing,
-			name: field.name,
+			name: fieldName,
 			type: "number",
 			placeholder: getPlaceholder(field.placeholder, field.default),
 			disabled,

package/dist/form/Fields/ObjectField.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField, DynamicFormSchema } from '../types/fieldTypes.js';
 export interface IObjectField extends BaseField {
     type: 'object';
     options: DynamicFormSchema;
 }
-export default function ObjectField({ field, label, tooltipComponent, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): React.JSX.Element;
+export default function ObjectField({ field, label, tooltipComponent, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;

package/dist/form/Fields/ObjectField.js

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

package/dist/form/Fields/RadioField.js

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

package/dist/form/Fields/RangeField.js

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

package/dist/form/Fields/StringField.js

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

package/dist/form/Fields/TextAreaField.js

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

package/dist/form/Form.d.ts

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