@parallelworks/ui 0.20.0 → 0.21.0

package/dist/components/Dropdown.js

@@ -23,7 +23,7 @@ function getOptionFromValue(value, options) {
 		label: "",
 		value: ""
 	};
-	const found = options?.find((option) => {
+	const found = options.find((option) => {
 		if (typeof option === "string") return checkEquals(value, option);
 		else if (isCategory(option)) return option.options.find((opt) => checkEquals(value, opt.value));
 		else return checkEquals(value, option.value);
@@ -47,15 +47,14 @@ function getOptionFromValue(value, options) {
 	};
 }
 function Dropdown(props) {
-	const { onChange, value, options = [], ...others } = props;
+	const { onChange, value, options, ...others } = props;
 	const val = useMemo(() => {
 		return getOptionFromValue(value, options);
 	}, [value, options]);
 	const wrapperOnchange = (value) => {
-		if (onChange) onChange(value?.value);
+		onChange(value?.value);
 	};
 	const transformedOptions = useMemo(() => {
-		if (!options || options.length === 0) return [];
 		return options.map((item) => {
 			if (isCategory(item)) return {
 				...item,
@@ -253,7 +252,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		allowCustomValue,
 		customValueLabel
 	]);
-	const comboOptions = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+	const comboOptions = /* @__PURE__ */ jsx(ComboboxOptions, {
 		modal: false,
 		ref: setPopperElement,
 		style: styles["popper"],
@@ -282,7 +281,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				})
 			});
 		}
-	}) });
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("relative rounded-md flex items-center", wrapperClassName),
 		children: /* @__PURE__ */ jsx(Combobox, {

package/dist/components/Listbox.js

@@ -5,29 +5,25 @@ import { focusOnMount } from "./focus.js";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
 import cx from "classnames";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Listbox.tsx
 function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false, required = false, id, "aria-describedby": describedBy }) {
 	const { dropdown: strings } = useStrings();
 	const [filter, setFilter] = useState("");
 	const [controlledOpen, setControlledOpen] = useState(false);
 	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
-	function useOutsideAlerter(ref) {
-		useEffect(() => {
-			function handleClickOutside(event) {
-				if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
-					setControlledOpen(false);
-					setFilter("");
-				}
-			}
-			document.addEventListener("mousedown", handleClickOutside);
-			return () => {
-				document.removeEventListener("mousedown", handleClickOutside);
-			};
-		}, [ref]);
-	}
 	const wrapperRef = useRef(null);
-	useOutsideAlerter(wrapperRef);
+	useEffect(() => {
+		function handleClickOutside(event) {
+			const wrapper = wrapperRef.current;
+			if (wrapper && event.target instanceof Node && !wrapper.contains(event.target)) {
+				setControlledOpen(false);
+				setFilter("");
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
 	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
 		modal: false,
 		static: true,
@@ -115,8 +111,8 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 			leave: "transition ease-in duration-100",
 			leaveFrom: "opacity-100",
 			leaveTo: "opacity-0",
-			children: optionsElement || null
-		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
+			children: optionsElement
+		}) : controlledOpen && optionsElement]
 	});
 }
 //#endregion

package/dist/components/MultiSelect.js

@@ -4,10 +4,11 @@ import { DropdownCaret, filterOption, flattenOptions, isCategory, isOption } fro
 import { focusOnMount } from "./focus.js";
 import { Combobox, ComboboxButton, ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import cx from "classnames";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { usePopper } from "react-popper";
 //#region src/components/MultiSelect.tsx
+var strictEqual = (a, b) => a === b;
 function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
 	const strings = useStrings();
 	const [query, setQuery] = useState("");
@@ -21,7 +22,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 		}]
 	});
 	const allOptions = useMemo(() => flattenOptions(options), [options]);
-	const compare = compareBy ?? ((a, b) => a === b);
+	const compare = compareBy ?? strictEqual;
 	const selectedOptions = useMemo(() => {
 		const result = [];
 		for (const val of value) {
@@ -38,7 +39,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 		if (!searchable || query.trim() === "") return allOptions;
 		const result = [];
 		for (const opt of allOptions) if (isCategory(opt)) {
-			const matchedChildren = (Array.isArray(opt.options) ? opt.options : []).filter((o) => filterOption(o, query));
+			const matchedChildren = opt.options.filter((o) => filterOption(o, query));
 			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
 		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
 		return result;
@@ -54,16 +55,12 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 			overflow: selectedOptions.length - shown.length
 		};
 	}, [selectedOptions, maxTagCount]);
-	const handleChange = useCallback((newValues) => {
-		if (!Array.isArray(newValues)) return;
-		onChange(newValues);
-	}, [onChange]);
 	const isDisabled = disabled || loading;
 	const isEmpty = filteredOptions.length === 0;
 	return /* @__PURE__ */ jsx(Combobox, {
 		multiple: true,
 		value: Array.isArray(value) ? value : [],
-		onChange: handleChange,
+		onChange,
 		disabled: isDisabled,
 		onClose: () => setQuery(""),
 		by: compare,

package/dist/components/Pagination.js

@@ -8,7 +8,7 @@ function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roun
 		className: cx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
 		"aria-label": "Pagination",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cx("hidden", (startingNumber !== void 0 && startingNumber !== null && endingNumber !== void 0 && endingNumber !== null || startingTime && endingTime) && "sm:block"),
+			className: cx("hidden", (startingNumber !== void 0 && endingNumber !== void 0 || startingTime && endingTime) && "sm:block"),
 			children: /* @__PURE__ */ jsx("p", {
 				className: "text-sm whitespace-nowrap",
 				children: useTimeRange && startingTime && endingTime ? t.paginationShowingTimeRange(name ?? "", startingTime, endingTime) : t.paginationShowing(name ?? "", startingNumber ?? "", endingNumber ?? "")

package/dist/components/Provider.d.ts

@@ -476,14 +476,6 @@ export interface UISlots {
 }
 /** An engine, or a loader so the host can keep the engine out of its first-load bundle. */
 export type WorkflowEngineSource = WorkflowEngine | (() => Promise<WorkflowEngine>);
-export interface UIProviderValue {
-    notify: UINotify;
-    strings: UIStrings;
-    navigation: UINavigation;
-    data: UIData;
-    slots: UISlots;
-    engine?: WorkflowEngineSource | undefined;
-}
 export declare function useNotify(): UINotify;
 export declare function useStrings(): UIStrings;
 export declare function useNavigation(): UINavigation;

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/dropdownUtils.js

@@ -2,7 +2,7 @@ import { CaretDownIcon } from "../icons.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);

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

@@ -9,7 +9,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 +24,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;
@@ -155,9 +151,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;