@parallelworks/ui 0.19.1 → 0.21.0

package/dist/components/Avatar.js

@@ -19,8 +19,10 @@ var STATUS_CLASSES = {
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
 function avatarInitials(name) {
 	const parts = (name ?? "").split(/[\s.]+/).filter(Boolean);
-	if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-	return parts[0]?.[0]?.toUpperCase() || "?";
+	const first = parts[0]?.charAt(0);
+	const last = parts.at(-1)?.charAt(0);
+	if (parts.length >= 2 && first && last) return (first + last).toUpperCase();
+	return first?.toUpperCase() || "?";
 }
 function Avatar({ src, name, size = "md", status, className }) {
 	const strings = useStrings();

package/dist/components/BareModal.js

@@ -37,14 +37,10 @@ function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPane
 			return;
 		}
 		const focusable = panel.querySelectorAll(FOCUSABLE);
-		if (focusable.length === 0) {
-			e.preventDefault();
-			onPanelKeyDown?.(e);
-			return;
-		}
 		const first = focusable[0];
 		const last = focusable[focusable.length - 1];
 		if (!first || !last) {
+			e.preventDefault();
 			onPanelKeyDown?.(e);
 			return;
 		}

package/dist/components/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useLayoutEffect } from "react";
+import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Breadcrumbs.tsx
 var BreadcrumbContext = createContext({
@@ -22,20 +22,27 @@ function BreadcrumbProvider({ children }) {
 	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
 	const [rightActionSlot, setRightActionSlot] = React.useState(null);
 	const claimedPath = React.useRef(null);
+	const value = useMemo(() => ({
+		breadcrumbs,
+		setBreadcrumbs,
+		rightsideBreadcrumb,
+		setRightsideBreadcrumb,
+		hidden,
+		setHidden,
+		titleActionSlot,
+		setTitleActionSlot,
+		rightActionSlot,
+		setRightActionSlot,
+		claimedPath
+	}), [
+		breadcrumbs,
+		rightsideBreadcrumb,
+		hidden,
+		titleActionSlot,
+		rightActionSlot
+	]);
 	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
-		value: {
-			breadcrumbs,
-			setBreadcrumbs,
-			rightsideBreadcrumb,
-			setRightsideBreadcrumb,
-			hidden,
-			setHidden,
-			titleActionSlot,
-			setTitleActionSlot,
-			rightActionSlot,
-			setRightActionSlot,
-			claimedPath
-		},
+		value,
 		children
 	});
 }

package/dist/components/CollapsiblePanel.d.ts

@@ -6,15 +6,13 @@ interface IControlledCollapsiblePanelProps {
     setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     onClick?: (() => void) | undefined;
     wrapperElement?: React.ElementType | undefined;
-    shown?: boolean;
-    setShown?: (shown: boolean) => void;
     customizedButton?: React.ReactNode;
     /** Rendered right after the title, outside the toggle button. */
     titleAction?: React.ReactNode;
     className?: string | undefined;
 }
 export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, titleAction, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
-export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
+export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, titleAction, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
     initialState?: boolean | undefined;
 }): React.JSX.Element;
 type MaybeCollapsibleProps = {

package/dist/components/CollapsiblePanel.js

@@ -4,14 +4,13 @@ import React, { useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import AnimateHeight from "react-animate-height";
 //#region src/components/CollapsiblePanel.tsx
-var noop = () => {};
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick, wrapperElement, customizedButton = null, titleAction, className }) {
 	const toggleOpen = useCallback(() => {
-		if (onClick) onClick();
+		onClick?.();
 		setOpen?.((open) => !open);
 	}, [setOpen, onClick]);
 	const contentId = React.useId();
-	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	const Wrapper = wrapperElement ?? React.Fragment;
 	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
 		duration: 300,
 		height: open ? "auto" : 0,
@@ -46,7 +45,7 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 		})]
 	});
 }
-function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null, titleAction }) {
 	const [open, setOpen] = React.useState(initialState);
 	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
 	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
@@ -57,6 +56,7 @@ function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement
 		wrapperElement,
 		className,
 		customizedButton,
+		titleAction,
 		children
 	});
 }

package/dist/components/Dropdown.d.ts

@@ -4,10 +4,6 @@ export interface IProps {
     options: (ICategory | IOptions | string)[];
     onActiveChange?: (option: unknown) => void;
     onChange: React.Dispatch<SetStateAction<unknown>>;
-    onRangeChange?: (range: {
-        min: number;
-        max: number;
-    }) => void;
     value: IOptions | string | Record<string, unknown>;
     id?: string | undefined;
     ariaLabel?: string | undefined;

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

@@ -1,9 +1,10 @@
+import { safeUrl } from "../safeUrl.js";
 import { createContext, use, useCallback, useContext, useEffect, useMemo } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
 var DefaultLink = ({ to, onClick, className, children, ...rest }) => /* @__PURE__ */ jsx("a", {
-	href: to,
+	href: safeUrl(to),
 	onClick,
 	className,
 	...rest,
@@ -399,11 +400,18 @@ var DEFAULTS = {
 		}
 	},
 	navigation: {
-		goTo: (to) => window.location.assign(to),
+		goTo: (to) => {
+			const url = safeUrl(to);
+			if (url) window.location.assign(url);
+		},
 		openStepSource: (_uses, sourceUrl) => {
-			if (sourceUrl) window.open(sourceUrl, "_blank");
+			const url = safeUrl(sourceUrl);
+			if (url) window.open(url, "_blank");
 		},
-		openExternal: (href) => window.open(href, "_blank")
+		openExternal: (href) => {
+			const url = safeUrl(href);
+			if (url) window.open(url, "_blank");
+		}
 	},
 	data: {
 		useRunFile: defaultUseRunFile,

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

@@ -1,36 +1,13 @@
 import { useCssIsDark } from "../components/useCssIsDark.js";
 import { defineEditorThemes, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
-import { onYamlSchemas } from "./yaml.js";
+import { ensureYamlLanguage } from "./yamlLanguage.js";
 import cx from "classnames";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as monaco from "monaco-editor";
-import { configureMonacoYaml } from "monaco-yaml";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
-var monacoWithWorkerBridge = {
-	...monaco,
-	editor: {
-		...monaco.editor,
-		createWebWorker: (opts) => "worker" in opts ? monaco.editor.createWebWorker(opts) : monaco.createWebWorker(opts)
-	}
-};
-var monacoYamlConfigured = false;
-function ensureMonacoYamlConfigured() {
-	if (monacoYamlConfigured) return;
-	monacoYamlConfigured = true;
-	const options = (schemas) => ({
-		enableSchemaRequest: true,
-		completion: true,
-		validate: true,
-		hover: true,
-		format: { enable: true },
-		schemas
-	});
-	const monacoYaml = configureMonacoYaml(monacoWithWorkerBridge, options([]));
-	onYamlSchemas((schemas) => monacoYaml.update(options(schemas)));
-}
 function editorText(value) {
 	return value.replace(/\r/g, "");
 }
@@ -102,7 +79,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 				model.onDidChangeDecorations(() => {
 					onValidate(monaco.editor.getModelMarkers({ resource: model.uri }));
 				});
-				ensureMonacoYamlConfigured();
+				ensureYamlLanguage();
 				monacoRef.current = editor;
 			}
 		}