@parallelworks/ui 0.20.0 → 0.21.1

package/dist/components/StatusIcons.js

@@ -0,0 +1,20 @@
+import { BiError } from "../icons/bi/BiError.js";
+import { HiMiniCheckCircle } from "../icons/hi2/HiMiniCheckCircle.js";
+import { FaCircleNotch } from "../icons/fa/FaCircleNotch.js";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/StatusIcons.tsx
+function SuccessCheckmark({ className, colored = true }) {
+	return /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: cx(colored && "text-green-500", className) });
+}
+function ErrorCheckmark({ className, colored = true }) {
+	return /* @__PURE__ */ jsx(BiError, { className: cx(colored && "text-red-400", className) });
+}
+function LoaderIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(FaCircleNotch, {
+		className: cx("animate-spin", className),
+		...props
+	});
+}
+//#endregion
+export { ErrorCheckmark, LoaderIcon, SuccessCheckmark };

package/dist/components/SwitchToggle.js

@@ -1,19 +1,16 @@
 import { TOOLTIP_ID } from "./Tooltip.js";
 import { Switch } from "@headlessui/react";
 import cx from "classnames";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SwitchToggle.tsx
-function SwitchToggle({ onChange, id, "aria-describedby": describedBy, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
+function SwitchToggle({ onChange, id, "aria-describedby": describedBy, value, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
 	const [enabled, setEnabled] = useState(value ?? false);
 	const [isFocused, setIsFocused] = useState(false);
 	const setIsEnabled = (e) => {
 		setEnabled(e);
 		onChange(e);
 	};
-	useEffect(() => {
-		if (value !== void 0) setEnabled(value);
-	}, [value]);
 	const checked = value ?? enabled;
 	return /* @__PURE__ */ jsx("div", {
 		...datatip ? {
@@ -25,6 +22,7 @@ function SwitchToggle({ onChange, id, "aria-describedby": describedBy, value = v
 			id,
 			"aria-describedby": describedBy,
 			checked,
+			disabled,
 			onChange: setIsEnabled,
 			className: "text-white text-sm shadow-sm rounded-md cursor-pointer",
 			onClick: (e) => e.stopPropagation(),

package/dist/components/Table.d.ts

@@ -29,8 +29,6 @@ interface ITableProps {
     roundedTop?: boolean;
     rounded?: boolean;
     roundedBottom?: boolean;
-    Item?: typeof Item;
-    Header?: typeof Header;
     isLoading?: boolean;
     /** Forwarded to the `<table>`, for attributes that must sit on the element owning
      *  the rows — `role='grid'`, aria-activedescendant, aria-rowcount. `className` is
@@ -46,7 +44,7 @@ export declare namespace Table {
     export { Header };
     export { Item };
 }
-export declare function CompactTable({ wrapperClassName, className, tbodyClassName, children, roundedTop, rounded, roundedBottom, }: ITableProps): React.JSX.Element;
+export declare function CompactTable({ wrapperClassName, className, tbodyClassName, children, roundedTop, rounded, roundedBottom, }: Pick<ITableProps, 'wrapperClassName' | 'className' | 'tbodyClassName' | 'children' | 'roundedTop' | 'rounded' | 'roundedBottom'>): React.JSX.Element;
 export declare namespace CompactTable {
     export { Header };
     export { CompactItem as Item };

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-import { TooltipIcon } from "../icons.js";
+import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
 import { keyedByContent } from "./keys.js";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -84,14 +84,14 @@ function TooltipInfo({ text, className = "", children, place = "top", tabIndex }
 	if (children || !text) return /* @__PURE__ */ jsx("div", {
 		...anchorProps,
 		tabIndex,
-		children: children || /* @__PURE__ */ jsx(TooltipIcon, { className: "tooltip" })
+		children: children || /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "tooltip" })
 	});
 	return /* @__PURE__ */ jsx("div", {
 		...anchorProps,
 		role: "img",
 		"aria-label": text,
 		tabIndex: tabIndex ?? 0,
-		children: /* @__PURE__ */ jsx(TooltipIcon, { className: "tooltip" })
+		children: /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "tooltip" })
 	});
 }
 //#endregion

package/dist/components/dropdownUtils.js

@@ -1,8 +1,8 @@
-import { CaretDownIcon } from "../icons.js";
+import { FaCaretDown } from "../icons/fa/FaCaretDown.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/dropdownUtils.tsx
 function isCategory(option) {
-	return typeof option === "object" && option !== null && option !== void 0 && "options" in option;
+	return typeof option === "object" && option !== null && "options" in option;
 }
 function isOption(option) {
 	return typeof option === "object" && "label" in option && "value" in option && !("category" in option);
@@ -12,7 +12,7 @@ function normalizeOption(option) {
 		label: option,
 		value: option
 	};
-	if (typeof option === "object" && option !== null && option !== void 0 && "options" in option) return {
+	if (typeof option === "object" && option !== null && "options" in option) return {
 		category: option.category,
 		options: Array.isArray(option.options) ? option.options : []
 	};
@@ -30,12 +30,11 @@ function flattenOptions(options) {
 	}
 	return result;
 }
+var normalizeForMatch = (text) => String(text).toLowerCase().replace(/-/g, "");
 function filterOption(option, query) {
 	if (query === "") return true;
-	const q = String(query ?? "").toLowerCase().replace(/(-)/gm, "");
-	const label = String(option.label ?? "").toLowerCase().replace(/(-)/gm, "");
-	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
-	return label.includes(q) || secondary.includes(q);
+	const q = normalizeForMatch(query);
+	return normalizeForMatch(option.label ?? "").includes(q) || option.secondaryValue !== void 0 && normalizeForMatch(option.secondaryValue).includes(q);
 }
 function toggleSetMember(set, member) {
 	const next = new Set(set);
@@ -94,7 +93,7 @@ function flattenDisplayOptions({ options, query, expandedCategories, collapsedLa
 	return flatOptions;
 }
 function DropdownCaret() {
-	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
+	return /* @__PURE__ */ jsx(FaCaretDown, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
 }
 //#endregion
 export { DropdownCaret, filterOption, flattenDisplayOptions, flattenOptions, isCategory, isOption, toggleSetMember };

package/dist/components/relativeTime.d.ts

@@ -1,11 +1,4 @@
 import { DateTime } from 'luxon';
-export declare function compactRelativeMinutes(minutes: number, t: {
-    now: string;
-    minutes: (n: number) => string;
-    hours: (n: number) => string;
-    days: (n: number) => string;
-    years: (n: number) => string;
-}): string;
 /** A clock that re-reads itself, so "5m" ages while the page sits open, with
  *  the abbreviated form a row has room for. */
 export declare function useRelativeTime(): {

package/dist/components/relativeTime.js

@@ -29,4 +29,4 @@ function useRelativeTime() {
 	};
 }
 //#endregion
-export { compactRelativeMinutes, useRelativeTime };
+export { useRelativeTime };

package/dist/duration.js

@@ -3,7 +3,7 @@ import { Duration } from "luxon";
 var UnitDisplay = { ja: "short" };
 function durationToAbsHumanDuration(d) {
 	const duration = d.shiftTo("days", "hours", "minutes", "seconds").toObject();
-	if ("seconds" in duration) duration.seconds = Math.round(duration.seconds);
+	if (duration.seconds !== void 0) duration.seconds = Math.round(duration.seconds);
 	const cleanedDuration = Object.fromEntries(Object.entries(duration).filter(([, value]) => value !== 0).map(([key, value]) => [key, Math.abs(value)]));
 	if (Object.keys(cleanedDuration).length === 0) cleanedDuration.seconds = 0;
 	const human = Duration.fromObject(cleanedDuration);

package/dist/editor/Editor.d.ts

@@ -1,2 +1,2 @@
 import type { IEditorProps } from './Monaco.js';
-export default function Editor({ ...props }: IEditorProps): import("react").JSX.Element;
+export default function Editor(props: IEditorProps): import("react").JSX.Element;

package/dist/editor/Editor.js

@@ -3,7 +3,7 @@ import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/editor/Editor.tsx
 var MonacoEditor = lazy(() => import("./Monaco.js"));
-function Editor({ ...props }) {
+function Editor(props) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
 		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })

package/dist/editor/EditorField.d.ts

@@ -5,7 +5,6 @@ export interface IEditorField extends BaseField {
     default?: string;
     options?: {
         language?: string;
-        theme?: string;
     };
 }
 export default function EditorField(props: FieldComponentProps<IEditorField>): import("react").JSX.Element;

package/dist/editor/EditorField.js

@@ -10,7 +10,8 @@ function hasResetKeys(obj) {
 }
 function EditorField(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, values } = useFormikContext();
 	const debounceRef = useRef(null);
 	const touchedRef = useRef(false);
@@ -18,9 +19,9 @@ function EditorField(props) {
 		touchedRef.current = true;
 		if (debounceRef.current) clearTimeout(debounceRef.current);
 		debounceRef.current = setTimeout(() => {
-			if (onChange) onChange(val);
-			setFieldTouched(field.name, true);
-			setFieldValue(field.name, val);
+			onChange?.(val);
+			setFieldTouched(fieldName, true);
+			setFieldValue(fieldName, val);
 			setFormDirty(true);
 		}, 500);
 	};
@@ -30,7 +31,6 @@ function EditorField(props) {
 		const randomKey = Math.random().toString(36).substring(7);
 		return editorKeyPostfix || randomKey;
 	}, [editorKeyPostfix]);
-	const value = fieldState.value;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -40,13 +40,13 @@ function EditorField(props) {
 		children: /* @__PURE__ */ jsx(Editor, {
 			ariaLabel: label,
 			height: "200px",
-			path: field.name,
-			...touchedRef.current ? {} : { value },
+			path: fieldName,
+			...touchedRef.current ? {} : { value: fieldState.value },
 			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
 			readOnly: disabled,
 			onChange: handleChange,
 			language: field.options?.language || "shell"
-		}, field.name + postfixKey)
+		}, fieldName + postfixKey)
 	});
 }
 //#endregion

package/dist/editor/FormCodePanel.js

@@ -1,5 +1,8 @@
 import { useNotify, useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { FiCopy } from "../icons/fi/FiCopy.js";
+import { LuEye } from "../icons/lu/LuEye.js";
+import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
 import SwitchToggleSmall from "../components/SwitchToggleSmall.js";
 import Editor from "./Editor.js";
 import { flattenGroups, impureSetValueFromPath } from "../form/lib.js";
@@ -9,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/editor/FormCodePanel.tsx
 var isObject = (value) => typeof value === "object" && value !== null;
 var shouldIgnoreField = (engine, fieldSchema, inputs, arrayIndex) => {
-	if (!fieldSchema?.["ignore"] || !fieldSchema?.["hidden"]) return false;
+	if (!fieldSchema["ignore"] || !fieldSchema["hidden"]) return false;
 	if (!engine.isReady()) return false;
 	return engine.evaluate({
 		inputs,
@@ -24,35 +27,31 @@ var filterFields = (engine, formJSON, data, prefix, rootData, arrayIndex) => {
 		filtered: Object.keys(data).reduce((acc, key) => {
 			const value = data[key];
 			const fieldSchema = formJSON[key];
-			if (value !== null && Array.isArray(value)) {
+			if (Array.isArray(value)) {
 				const items = [];
 				acc[key] = items;
 				if (!fieldSchema) return acc;
 				const nestedSchema = isObject(fieldSchema) ? fieldSchema["options"] : void 0;
-				for (let i = 0; i < value.length; i++) {
-					let filteredFieldsNested = [];
-					let filteredNested = {};
-					const item = value[i];
-					if (isObject(item)) {
-						const result = filterFields(engine, isObject(nestedSchema) ? nestedSchema : {}, item, key + `[${i}].`, rootData || data, i);
-						filteredNested = result.filtered;
-						filteredFieldsNested = result.filteredFields;
-					} else filteredNested = item;
-					filteredFields.push(...filteredFieldsNested);
-					items[i] = filteredNested;
-				}
+				value.forEach((item, i) => {
+					if (!isObject(item)) {
+						items[i] = item;
+						return;
+					}
+					const result = filterFields(engine, isObject(nestedSchema) ? nestedSchema : {}, item, `${key}[${i}].`, rootData || data, i);
+					filteredFields.push(...result.filteredFields);
+					items[i] = result.filtered;
+				});
 				return acc;
 			}
 			if (fieldSchema && isObject(value)) {
-				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(engine, isObject(fieldSchema) ? fieldSchema : {}, value, key + ".", rootData || data, arrayIndex);
+				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(engine, isObject(fieldSchema) ? fieldSchema : {}, value, `${key}.`, rootData || data, arrayIndex);
 				filteredFields.push(...filteredFieldsNested);
 				acc[key] = filteredNested;
 				return acc;
 			}
 			if (isObject(fieldSchema) && fieldSchema["sensitive"]) {
-				const name = prefix ? prefix + key : key;
 				filteredFields.push({
-					key: name,
+					key: `${prefix ?? ""}${key}`,
 					value
 				});
 				return acc;
@@ -118,14 +117,14 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 						onClick: () => setShowHidden((prev) => !prev)
 					}), /* @__PURE__ */ jsxs("span", {
 						className: "flex items-center gap-1.5",
-						children: [showHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}), t.showHiddenFields]
+						children: [showHidden ? /* @__PURE__ */ jsx(LuEye, {}) : /* @__PURE__ */ jsx(LuEyeOff, {}), t.showHiddenFields]
 					})]
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: handleCopy,
 					"aria-label": copied ? t.copied : t.copy,
 					className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2.5 py-1.5 text-sm text-(--theme-app) transition-colors duration-150 hover:bg-(--theme-hover) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link)",
-					children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
+					children: [copied ? /* @__PURE__ */ jsx(FaCheck, { className: "text-green-500" }) : /* @__PURE__ */ jsx(FiCopy, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
 				})]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "min-h-0 flex-1",
@@ -155,9 +154,7 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 							const parsed = JSON.parse(e);
 							if (!isObject(parsed)) return;
 							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, parsed));
-						} catch {
-							console.log("JSON.parse error in form code editor");
-						}
+						} catch {}
 					},
 					language: "json",
 					disabled

package/dist/editor/yamlLanguage.js

@@ -13,11 +13,11 @@ var YAML_SETTINGS = {
 };
 /** JSON-RPC over postMessage, the transport the server's web worker build expects. */
 var WorkerConnection = class {
-	worker;
-	onRequest;
 	nextId = 0;
 	pending = /* @__PURE__ */ new Map();
 	notificationHandlers = /* @__PURE__ */ new Map();
+	worker;
+	onRequest;
 	constructor(worker, onRequest) {
 		this.worker = worker;
 		this.onRequest = onRequest;