@parallelworks/ui 0.34.0 → 0.36.0

package/dist/components/Dropdown.js

@@ -194,6 +194,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		modifiers: popperModifiers
 	});
 	const debounceRef = useRef(null);
+	const typedRef = useRef("");
 	const buttonRef = useRef(null);
 	const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set());
 	const selectedCategory = useMemo(() => options.find((o) => isCategory(o) && o.options.some((opt) => checkEquals(value.value, opt.value)))?.category, [options, value]);
@@ -213,6 +214,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 	const onQueryChange = (val) => {
 		setQuery(val);
 		if (allowCustomValue) {
+			typedRef.current = val;
 			if (debounceRef.current) clearTimeout(debounceRef.current);
 			debounceRef.current = setTimeout(() => {
 				flushCustomValue(val);
@@ -224,7 +226,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		if (allowCustomValue && debounceRef.current) {
 			clearTimeout(debounceRef.current);
 			debounceRef.current = null;
-			flushCustomValue(query);
+			flushCustomValue(typedRef.current);
 		}
 		setQuery("");
 	};

package/dist/components/FilterPill.js

@@ -4,6 +4,7 @@ import { jsx } from "react/jsx-runtime";
 function FilterPill({ active, onClick, children }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
+		"aria-pressed": active,
 		onClick,
 		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
 		children

package/dist/components/Provider.d.ts

@@ -100,6 +100,13 @@ export interface UIStrings {
         submitted: string;
         expandAll: string;
         collapseAll: string;
+        zoomIn: string;
+        zoomOut: string;
+        resetView: string;
+        previousGraph: string;
+        nextGraph: string;
+        matrixOf: (name: string) => string;
+        jobCount: (count: number) => string;
         loadingLogs: string;
         noLogFound: string;
         logLoadFailed: string;
@@ -321,6 +328,12 @@ export interface UIStrings {
         invalidDuration: string;
         durationOutOfRange: (min: string, max: string) => string;
         durationBelowMin: (min: string) => string;
+        /** A repeated wizard page's copy, numbered from 1. */
+        copyTitle: (title: string, number: number) => string;
+        addCopy: (title: string) => string;
+        removeCopy: (title: string) => string;
+        /** A wizard's row of step dots. */
+        steps: string;
     };
     time: {
         now: string;
@@ -419,6 +432,7 @@ export type UILinkComponent = React.ComponentType<{
     children: ReactNode;
     title?: string | undefined;
     'aria-label'?: string | undefined;
+    'aria-current'?: 'page' | undefined;
     [dataAttr: `data-${string}`]: string | undefined;
 }>;
 /** The provider's link slot, with a plain anchor fallback. */

package/dist/components/Provider.js

@@ -102,8 +102,15 @@ var DEFAULTS = {
 			status: "Status",
 			runtime: "Runtime",
 			submitted: "Submitted",
-			expandAll: "Expand all",
-			collapseAll: "Collapse all",
+			expandAll: "Expand All",
+			collapseAll: "Collapse All",
+			zoomIn: "Zoom in",
+			zoomOut: "Zoom out",
+			resetView: "Reset View",
+			previousGraph: "Back to the previous graph",
+			nextGraph: "Forward to the next graph",
+			matrixOf: (name) => `Matrix: ${name}`,
+			jobCount: (count) => count === 1 ? "1 job" : `${count} jobs`,
 			loadingLogs: "Loading logs",
 			noLogFound: "No log found",
 			logLoadFailed: "Log could not be loaded",
@@ -322,7 +329,11 @@ var DEFAULTS = {
 		form: {
 			invalidDuration: "Enter a duration as DD-HH:MM:SS or HH:MM:SS.",
 			durationOutOfRange: (min, max) => `Must be between ${min} and ${max}.`,
-			durationBelowMin: (min) => `Must be at least ${min}.`
+			durationBelowMin: (min) => `Must be at least ${min}.`,
+			copyTitle: (title, number) => `${title} ${number}`,
+			addCopy: (title) => `+ Add ${title}`,
+			removeCopy: (title) => `Remove ${title}`,
+			steps: "Steps"
 		},
 		time: {
 			now: "now",

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+    /** Beside the label, or in the corner when only the icon shows. */
+    badge?: ReactNode;
+    /** Navigates instead of calling `onChange`, for segments that are pages. */
+    to?: string;
+    testId?: string;
+}
+/** A few mutually exclusive choices side by side, one always current. With
+ *  `iconOnly` the segments stack as icons with their labels in tooltips, for
+ *  a collapsed rail. */
+export declare function SegmentedControl<T extends string>({ label, options, value, onChange, fill, iconOnly, testId, }: {
+    label: string;
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange?: (value: T) => void;
+    /** Segments share the container's width equally. */
+    fill?: boolean;
+    iconOnly?: boolean;
+    testId?: string;
+}): import("react").JSX.Element;

package/dist/components/SegmentedControl.js

@@ -0,0 +1,69 @@
+import { useLink } from "./Provider.js";
+import { TOOLTIP_ID } from "./Tooltip.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SegmentedControl.tsx
+var itemBase = "relative flex min-w-0 items-center justify-center rounded-md font-medium transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link)";
+var itemCurrent = "bg-(--theme-panel-bg) theme-text shadow-sm ring-1 ring-(--theme-border)";
+var itemIdle = "theme-muted-text hover:theme-text hover:bg-(--theme-hover)";
+/** A few mutually exclusive choices side by side, one always current. With
+*  `iconOnly` the segments stack as icons with their labels in tooltips, for
+*  a collapsed rail. */
+function SegmentedControl({ label, options, value, onChange, fill = false, iconOnly = false, testId }) {
+	const Link = useLink();
+	const links = options.some((o) => o.to);
+	const items = options.map((option) => {
+		const current = option.value === value;
+		const className = cx(itemBase, current ? itemCurrent : itemIdle, iconOnly ? "h-8 w-8" : cx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
+		const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+			option.icon,
+			iconOnly ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: option.label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: option.label
+			}),
+			option.badge && (iconOnly ? /* @__PURE__ */ jsx("span", {
+				className: "absolute top-1 right-1 inline-flex",
+				children: option.badge
+			}) : option.badge)
+		] });
+		const tooltip = iconOnly ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": option.label,
+			"data-tooltip-place": "right"
+		} : {};
+		return option.to ? /* @__PURE__ */ jsx(Link, {
+			to: option.to,
+			"aria-current": current ? "page" : void 0,
+			"data-testid": option.testId,
+			className,
+			...tooltip,
+			children: content
+		}, option.value) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-pressed": current,
+			"data-testid": option.testId,
+			onClick: () => onChange?.(option.value),
+			className,
+			...tooltip,
+			children: content
+		}, option.value);
+	});
+	const groupClassName = cx("gap-0.5", iconOnly ? "flex flex-col items-center" : cx("rounded-lg theme-muted-panel p-0.5", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
+	return links ? /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		"data-testid": testId,
+		className: groupClassName,
+		children: items
+	}) : /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		"data-testid": testId,
+		className: groupClassName,
+		children: items
+	});
+}
+//#endregion
+export { SegmentedControl };

package/dist/editing.d.ts

@@ -0,0 +1,32 @@
+/** A job's slot on the dependency graph's column/row grid. */
+export interface GraphPosition {
+    column: number;
+    row: number;
+}
+/** Job name to grid slot, as stored on a workflow. */
+export type GraphLayout = Record<string, GraphPosition>;
+/** One column's boxes, top to bottom, the row each box sits in, and the column's number. */
+export interface LaidOutColumn {
+    boxes: string[][];
+    rows: number[];
+    column: number;
+}
+/**
+ * The workflow editing the visual editor defers to: reading and rewriting the workflow's YAML,
+ * its graph layout and its checks. A host built on a workflow package can pass that package's
+ * functions of the same names.
+ */
+export interface WorkflowEditing {
+    /** The job a `needs` entry points at, without a matrix's wait-for-any suffix. */
+    needTarget: (need: string) => string;
+    /** Jobs whose matrix runs more than once as `<job>-<n>` members, the way a run lists them. */
+    expandMatrixJobs: <T>(jobs: Record<string, T>) => Record<string, T>;
+    hasLayout: (layout: GraphLayout | undefined) => boolean;
+    layoutPosition: (layout: GraphLayout | undefined, job: string) => GraphPosition | undefined;
+    mapLayout: (layout: GraphLayout, fn: (position: GraphPosition, job: string) => GraphPosition | undefined) => GraphLayout;
+    /** Boxes and rows from a stored layout; jobs without a slot go below, grouped when `together` says. */
+    boxesFromLayout: (jobNames: string[], deps: Record<string, string[]>, layout: GraphLayout, rules: {
+        together: (a: string, b: string) => boolean;
+        alone: (job: string) => boolean;
+    }) => LaidOutColumn[];
+}

package/dist/editor/FormCodePanel.js

@@ -4,8 +4,8 @@ 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";
+import Editor from "./Editor.js";
 import cx from "classnames";
 import { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/engine.d.ts

@@ -1,3 +1,4 @@
+import type { WorkflowEditing } from './editing.js';
 export type RunStatus = 'started' | 'running' | 'completed' | 'error' | 'failed' | 'canceled' | 'skipped' | 'faulted' | 'canceling' | 'skipped-failed' | '' | undefined;
 export interface MatrixGroup {
     originaljob: string;
@@ -95,4 +96,6 @@ export interface WorkflowEngine {
         segments: LogSegment[];
     }[], rawLines: string[]): ProcessedLogLine[];
     toYaml(value: unknown): string;
+    /** What the visual editor and stored graph layouts need; without it, graphs lay themselves out. */
+    editing?: WorkflowEditing | undefined;
 }

package/dist/form/FieldWrapper.js

@@ -1,6 +1,6 @@
 import { RequiredMark } from "../components/RequiredMark.js";
-import { FieldProvider } from "./fieldContext.js";
 import { resolvedFlag } from "./lib.js";
+import { FieldProvider } from "./fieldContext.js";
 import cx from "classnames";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -2,9 +2,9 @@ import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField } from '../types/fieldTypes.js';
 export interface ICheckboxGroupField extends BaseField {
     type: 'checkbox-group';
-    options?: Array<{
-        label: string;
-        value: string;
+    options?: Array<string | number | {
+        label?: string;
+        value: string | number;
         description?: string;
     }>;
     /**

package/dist/form/Fields/CheckboxGroupField.js

@@ -1,4 +1,5 @@
 import { FieldWrapper } from "../FieldWrapper.js";
+import { fieldOption } from "./fieldOption.js";
 import cx from "classnames";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,8 +18,12 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 	const [fieldState] = useField(fieldName);
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const implies = field.implies;
+	const rawOf = new Map((field.options ?? []).map((choice) => {
+		const option = fieldOption(choice);
+		return [option.value, option.raw];
+	}));
 	const [manual, setManual] = useState(() => {
-		const saved = fieldState.value || [];
+		const saved = (fieldState.value || []).map(String);
 		const impliedBySaved = impliedFrom(saved, implies);
 		return saved.filter((v) => !impliedBySaved.has(v));
 	});
@@ -26,7 +31,7 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 	const handleToggle = (value) => {
 		if (disabled) return;
 		const nextManual = manual.includes(value) ? manual.filter((v) => v !== value) : [...manual, value];
-		const next = union(nextManual, impliedFrom(nextManual, implies));
+		const next = union(nextManual, impliedFrom(nextManual, implies)).map((v) => rawOf.get(v) ?? v);
 		setManual(nextManual);
 		setFieldTouched(fieldName, true);
 		setFieldValue(fieldName, next);
@@ -43,7 +48,8 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 			"aria-labelledby": labelId,
 			"aria-describedby": describedBy,
 			className: "flex min-w-0 max-w-lg flex-col gap-1",
-			children: field.options?.map((option) => {
+			children: field.options?.map((raw) => {
+				const option = fieldOption(raw);
 				const locked = forced.has(option.value);
 				const optionDisabled = disabled || locked;
 				return /* @__PURE__ */ jsxs("label", {
@@ -53,7 +59,7 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 						checked: manual.includes(option.value) || locked,
 						disabled: optionDisabled,
 						onChange: () => handleToggle(option.value),
-						className: cx("mt-px h-4 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
+						className: cx("h-4 min-h-0 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-col",
 						children: [/* @__PURE__ */ jsx("span", {

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

@@ -1,9 +1,11 @@
-import type React from 'react';
 import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField } from '../types/fieldTypes.js';
 export interface IRadioField extends BaseField {
     type: 'radio';
-    options?: string[];
+    options?: Array<string | number | {
+        label?: string;
+        value: string | number;
+    }>;
     optionLabelPosition?: 'left' | 'top';
 }
-export default function RadioField(props: FieldComponentProps<IRadioField>): React.JSX.Element;
+export default function RadioField(props: FieldComponentProps<IRadioField>): import("react").JSX.Element;

package/dist/form/Fields/RadioField.js

@@ -1,13 +1,15 @@
 import { FieldWrapper } from "../FieldWrapper.js";
+import { fieldOption } from "./fieldOption.js";
 import cx from "classnames";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Field, useFormikContext } from "formik";
+import { useField, useFormikContext } from "formik";
 //#region src/form/Fields/RadioField.tsx
 function RadioField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
 	const fieldName = field.name ?? "";
 	const uid = useId();
+	const [fieldState] = useField(fieldName);
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const handleChange = (val) => {
 		if (disabled) return;
@@ -27,22 +29,28 @@ function RadioField(props) {
 			"aria-labelledby": labelId,
 			"aria-describedby": describedBy,
 			"aria-required": field.optional ? void 0 : true,
-			className: cx("flex", field.optionLabelPosition === "top" ? "flex-col" : "flex-row"),
-			children: field.options?.map((option) => /* @__PURE__ */ jsxs("label", {
-				htmlFor: `${uid}-${option}`,
-				className: "capitalize",
-				children: [/* @__PURE__ */ jsx(Field, {
-					id: `${uid}-${option}`,
-					className: cx("theme-input mr-1", disabled && "disabled", missing && "invalid"),
-					name: field.name,
-					type: "radio",
-					value: option,
-					disabled,
-					onChange: (e) => {
-						handleChange(e.target.value);
-					}
-				}), option]
-			}, field.name + option))
+			className: cx("flex py-1.5", field.optionLabelPosition === "top" ? "flex-col gap-2" : "flex-row flex-wrap gap-x-5 gap-y-2"),
+			children: field.options?.map((raw) => {
+				const option = fieldOption(raw);
+				const unlabelled = typeof raw !== "object" || raw.label === void 0;
+				return /* @__PURE__ */ jsxs("label", {
+					htmlFor: `${uid}-${option.value}`,
+					className: cx("flex items-center gap-2", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+					children: [/* @__PURE__ */ jsx("input", {
+						id: `${uid}-${option.value}`,
+						className: cx("h-4 w-4", disabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid"),
+						name: field.name,
+						type: "radio",
+						value: option.value,
+						checked: fieldState.value !== void 0 && fieldState.value !== null && String(fieldState.value) === option.value,
+						disabled,
+						onChange: () => handleChange(option.raw)
+					}), /* @__PURE__ */ jsx("span", {
+						className: cx("theme-text", unlabelled && "capitalize"),
+						children: option.label
+					})]
+				}, field.name + option.value);
+			})
 		})
 	});
 }

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

@@ -0,0 +1,12 @@
+/** A choice as `{ label, value }`, its value as text so a numeric option or default still matches, and
+ * `raw` as written, so a picked number is stored as one. */
+export declare function fieldOption(option: string | number | {
+    label?: string;
+    value: string | number;
+    description?: string;
+}): {
+    label: string;
+    value: string;
+    raw: string | number;
+    description?: string | undefined;
+};

package/dist/form/Fields/fieldOption.js

@@ -0,0 +1,17 @@
+//#region src/form/Fields/fieldOption.ts
+/** A choice as `{ label, value }`, its value as text so a numeric option or default still matches, and
+* `raw` as written, so a picked number is stored as one. */
+function fieldOption(option) {
+	return typeof option === "object" && option !== null ? {
+		...option,
+		label: option.label ?? String(option.value),
+		value: String(option.value),
+		raw: option.value
+	} : {
+		label: String(option),
+		value: String(option),
+		raw: option
+	};
+}
+//#endregion
+export { fieldOption };

package/dist/form/Form.d.ts

@@ -75,8 +75,10 @@ export declare function FieldsFromOptions({ options, values, setFormDirty, setFi
     spaceCompact?: boolean;
     /** Prevents deletion of hidden+ignored field values (workflow forms filter at submit time) */
     workflowForm?: boolean | undefined;
-}): React.JSX.Element[];
+}): React.JSX.Element;
 export interface DynamicFormProps {
+    /** Enables validated layout-only CSS declarations on authored layout nodes. */
+    allowLayoutCSS?: boolean;
     formJSONs: Record<string, unknown>;
     reinitialize?: boolean;
     setFormDirty?: (dirty: boolean) => void;
@@ -104,5 +106,5 @@ export interface DynamicFormProps {
     /** Host-supplied field components, merged over the core registry by type. */
     fields?: Record<string, FieldComponent>;
 }
-export declare function DynamicForm({ formJSONs: options, reinitialize, initialValues, setValues, setFormDirty, formikRef, labelPosition, missingFields, spaceCompact, organizationVariables, remoteVars, needsOrganizationVariables, onSubmit, submitLabel, className, workflowForm, contextKey, skipValueParse, fields, }: DynamicFormProps): React.JSX.Element;
+export declare function DynamicForm({ formJSONs: options, reinitialize, initialValues, setValues, setFormDirty, formikRef, labelPosition, missingFields, spaceCompact, organizationVariables, remoteVars, needsOrganizationVariables, onSubmit, submitLabel, className, workflowForm, contextKey, skipValueParse, fields, allowLayoutCSS, }: DynamicFormProps): React.JSX.Element;
 export {};