@parallelworks/ui 0.20.0 → 0.21.1

package/dist/file-explorer/lib/utils.js

@@ -10,14 +10,13 @@ function formatFileSize(bytes) {
 		"TB"
 	];
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
-	return Number.parseFloat((bytes / k ** i).toFixed(2)) + " " + sizes[i];
+	return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
 }
 function getFileExtension(filename) {
 	return filename.match(/\.([a-zA-Z0-9]+)$/)?.[1]?.toLowerCase() ?? null;
 }
 function getNodeName(node) {
-	const parts = removeTrailingSlash(node.path || "").split("/");
-	return parts[parts.length - 1] ?? "";
+	return removeTrailingSlash(node.path).split("/").pop() ?? "";
 }
 function toNode(entry, storage, storagePath, storageName) {
 	const relativePath = removeLeadingSlash(entry.path);
@@ -79,8 +78,8 @@ function createTreeBuilder() {
 			};
 			directories.set(dirPath, dir);
 		}
-		for (let i = dir.entries.length; i < entries.length; i++) {
-			const node = toNode(entries[i], storage, storagePath, storageName);
+		for (const entry of entries.slice(dir.entries.length)) {
+			const node = toNode(entry, storage, storagePath, storageName);
 			if (node.path === dirPath) continue;
 			if (node.type === "directory") dir.directories.push(node);
 			else dir.files.push(node);
@@ -124,14 +123,14 @@ function createTreeBuilder() {
 			parentToChildrenMap: {},
 			rootNodes: []
 		};
-		if (storages.length === 1 && !options.forceUserHierarchy) {
-			const storage = storages[0];
-			const storagePath = ensureTrailingSlash(storage.user ? `${storage.user}/${storage.name}` : storage.name);
-			tree.rootNodes.push(addStorage(storage, storagePath, options, tree));
+		const onlyStorage = storages.length === 1 ? storages[0] : void 0;
+		if (onlyStorage && !options.forceUserHierarchy) {
+			const storagePath = ensureTrailingSlash(onlyStorage.user ? `${onlyStorage.user}/${onlyStorage.name}` : onlyStorage.name);
+			tree.rootNodes.push(addStorage(onlyStorage, storagePath, options, tree));
 		} else {
 			const userGroups = {};
 			for (const storage of storages) {
-				const username = storage.user ?? "";
+				const username = storage.user;
 				if (!userGroups[username]) userGroups[username] = [];
 				userGroups[username].push(storage);
 			}
@@ -159,7 +158,7 @@ function createTreeBuilder() {
 	};
 }
 function getNodeChildren(parentToChildrenMap, parentPath) {
-	return parentToChildrenMap[parentPath.endsWith("/") ? parentPath : parentPath + "/"] || [];
+	return parentToChildrenMap[parentPath.endsWith("/") ? parentPath : `${parentPath}/`] || [];
 }
 function getParentPath(currentPath) {
 	return ensureTrailingSlash(removeLastPathSegment(currentPath));
@@ -183,13 +182,13 @@ async function getUploadNodesFromDataTransferItems(items) {
 				uploadNodes.push({
 					name: file.name,
 					file,
-					relativePath: path ? path + file.name : file.name
+					relativePath: path + file.name
 				});
 				totalSize += file.size;
 				resolve();
 			}, reject);
 			else if (entry.isDirectory) entry.createReader().readEntries(async (entries) => {
-				const newPath = path ? path + entry.name + "/" : entry.name + "/";
+				const newPath = `${path}${entry.name}/`;
 				if (entries.length === 0) uploadNodes.push({
 					name: entry.name,
 					file: new Blob(),
@@ -213,9 +212,7 @@ async function getUploadNodesFromDataTransferItems(items) {
 	};
 }
 function calculateUploadNodesTotalSize(uploadNodes) {
-	return uploadNodes.reduce((total, node) => {
-		return total + (node.file?.size || 0);
-	}, 0);
+	return uploadNodes.reduce((total, node) => total + node.file.size, 0);
 }
 function getObjectKeyFromNode(node) {
 	return node.relativePath || node.path.split("/").filter(Boolean).slice(1).join("/");
@@ -261,12 +258,10 @@ function removeLastPathSegment(path) {
 	return path.replace(/\/[^/]+\/?$/, "");
 }
 function ensureTrailingSlash(path) {
-	return path.endsWith("/") ? path : path + "/";
+	return path.endsWith("/") ? path : `${path}/`;
 }
 function isClientValid(client) {
-	if (!client?.getExpiresAt) return false;
-	const expiresAt = client.getExpiresAt();
-	return expiresAt && expiresAt > /* @__PURE__ */ new Date();
+	return client.getExpiresAt() > /* @__PURE__ */ new Date();
 }
 function getUploadSessionETA(totalLoadedBytes, totalSizeBytes, lastProgressTime, lastProgressBytes) {
 	const now = Date.now();

package/dist/file-explorer/toasts.js

@@ -1,57 +1,69 @@
 import { useStrings } from "../components/Provider.js";
-import { AlertIcon, AngleDownIcon, AngleUpIcon, CloseIcon, CloudUploadIcon, ExpandVerticalIcon, MinimizeIcon, SuccessIcon } from "../icons.js";
+import { BiExpandVertical } from "../icons/bi/BiExpandVertical.js";
+import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
+import { FaAngleUp } from "../icons/fa/FaAngleUp.js";
+import { HiMiniCheckCircle } from "../icons/hi2/HiMiniCheckCircle.js";
+import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { IoCloudUploadOutline } from "../icons/io5/IoCloudUploadOutline.js";
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { VscChromeMinimize } from "../icons/vsc/VscChromeMinimize.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) {
 	switch (session.status) {
 		case "queued": return {
-			icon: /* @__PURE__ */ jsx(CloudUploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(IoCloudUploadOutline, { className: "w-5 h-5 text-blue-600" }),
 			title: strings.inQueue(session.queueIndex + 1, queueLength),
 			shortTitle: strings.queuedShort(session.queueIndex + 1, queueLength),
 			bgColor: "bg-blue-100"
 		};
 		case "uploading": return {
-			icon: /* @__PURE__ */ jsx(CloudUploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(IoCloudUploadOutline, { className: "w-5 h-5 text-blue-600" }),
 			title: strings.uploading,
 			shortTitle: strings.uploading,
 			bgColor: "bg-blue-100"
 		};
 		case "completed": return {
-			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: "w-5 h-5 text-green-600" }),
+			icon: /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: "w-5 h-5 text-green-600" }),
 			title: strings.completeTitle,
 			shortTitle: strings.completeShort,
 			bgColor: "bg-green-100"
 		};
 		case "failed": return {
-			icon: /* @__PURE__ */ jsx(AlertIcon, { className: "w-5 h-5 text-red-600" }),
+			icon: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-5 h-5 text-red-600" }),
 			title: strings.failedTitle,
 			shortTitle: strings.failedShort,
 			bgColor: "bg-red-100"
 		};
 		default: return {
-			icon: /* @__PURE__ */ jsx(CloudUploadIcon, { className: "w-5 h-5 theme-muted-text" }),
+			icon: /* @__PURE__ */ jsx(IoCloudUploadOutline, { className: "w-5 h-5 theme-muted-text" }),
 			title: strings.unknownTitle,
 			shortTitle: strings.unknownShort,
 			bgColor: "bg-(--theme-muted-panel-bg)"
 		};
 	}
 }
-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 +104,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",
@@ -125,7 +141,7 @@ function FileProgressBar({ fileProgress, fileName, progressBarColorScheme, onCan
 					className: "p-1 rounded-full hover:bg-red-100 relative cursor-pointer",
 					onClick: handleCancelClick,
 					title: `Cancel ${fileName}`,
-					children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-4 h-4 text-red-500 hover:text-red-700" })
+					children: /* @__PURE__ */ jsx(IoMdClose, { className: "w-4 h-4 text-red-500 hover:text-red-700" })
 				}),
 				showCancelConfirm && canCancel && /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1",
@@ -157,29 +173,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) => {
@@ -226,7 +237,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 									className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
 									onClick: handleExpandClick,
 									title: strings.expandDetails,
-									children: /* @__PURE__ */ jsx(ExpandVerticalIcon, { className: "w-4 h-4" })
+									children: /* @__PURE__ */ jsx(BiExpandVertical, { className: "w-4 h-4" })
 								})]
 							})]
 						}),
@@ -251,7 +262,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}%` }
 								})
 							})
@@ -287,7 +298,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer mr-2",
 						onClick: handleExpandClick,
 						title: strings.minimizeDetails,
-						children: /* @__PURE__ */ jsx(MinimizeIcon, { className: "w-4 h-4" })
+						children: /* @__PURE__ */ jsx(VscChromeMinimize, { className: "w-4 h-4" })
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -317,13 +328,13 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					className: "mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg",
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("p", {
+						children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("p", {
 							className: "text-xs text-amber-800",
 							children: "Please don't refresh this page during upload to prevent any data loss."
 						})]
 					})
 				}),
-				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 +342,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}%` }
 						})
 					})]
@@ -342,7 +353,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						type: "button",
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
 						onClick: () => setIsExpanded(!isFileListExpanded),
-						children: [/* @__PURE__ */ jsxs("span", { children: [session.uploadNodes.length, " files"] }), isFileListExpanded ? /* @__PURE__ */ jsx(AngleUpIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(AngleDownIcon, { className: "w-4 h-4" })]
+						children: [/* @__PURE__ */ jsxs("span", { children: [session.uploadNodes.length, " files"] }), isFileListExpanded ? /* @__PURE__ */ jsx(FaAngleUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(FaAngleDown, { className: "w-4 h-4" })]
 					}), isFileListExpanded && /* @__PURE__ */ jsx("div", {
 						className: "max-h-48 overflow-y-auto space-y-2",
 						children: session.uploadNodes.map((node) => {
@@ -351,17 +362,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;