@10x-media/form-builder 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/client/FlowBuilder.js

@@ -1,24 +1,31 @@
 "use client";
+import { keys } from "../translations/keys.js";
+import { resolveMessage } from "../validation/message.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { toStaticLabel } from "./toStaticLabel.js";
 import { ConditionBuilder } from "./ConditionBuilder.js";
+import { stepLabel } from "../flow/stepLabel.js";
+import { assignFieldToStep, fieldHolders, flowFieldEntries, nextFromSelectValue, nextSelectOptions, nextToSelectValue, otherStepSelectOptions, removeFieldFromStep, removeStepCascade, stepSelectOptions, unassignedEntries } from "./flowAuthoring.js";
 import { reduceFieldsToValues } from "payload/shared";
 import { Button, CheckboxInput, Collapsible, FieldLabel, ReactSelect, TextInput, useField, useFormFields } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import "./admin.css";
 import { Popup, PopupList } from "@payloadcms/ui/elements/Popup";
 import { MoreIcon } from "@payloadcms/ui/icons/More";
-import { useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/FlowBuilder.tsx
-const toStaticLabel = (label) => {
-	if (typeof label === "string") return label;
-	if (label && typeof label === "object") return label;
-};
-const extractFieldNames = (data) => {
-	return (Array.isArray(data.fields) ? data.fields : []).map((row) => typeof row.name === "string" ? row.name.trim() : null).filter((name) => name !== null && name.length > 0);
-};
-const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, onChange, onRemove, onMoveUp, onMoveDown }) => {
-	const toOptions = stepIds.map((id) => ({
-		label: id,
-		value: id
+/** The row facets the flow builder keys and labels by, projected for a stable JSON identity. */
+const extractFieldRows = (data) => {
+	return (Array.isArray(data.fields) ? data.fields : []).map((row) => ({
+		blockType: row.blockType,
+		name: row.name,
+		id: row.id,
+		label: row.label,
+		content: row.content
 	}));
+};
+const TransitionRow = ({ transition, stepOptions, conditionTypes, isFirst, isLast, onChange, onRemove, onMoveUp, onMoveDown }) => {
+	const { t } = useTranslation$1();
 	const handleGotoChange = (selected) => {
 		const chosen = Array.isArray(selected) ? selected[0] : selected;
 		if (chosen) onChange({
@@ -34,14 +41,14 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "fb-flow-transition__label",
-						children: "go to"
+						children: t(keys.flowGoTo)
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "fb-flow-transition__goto",
 						children: /* @__PURE__ */ jsx(ReactSelect, {
-							options: toOptions,
-							value: toOptions.find((o) => o.value === transition.to) ?? void 0,
-							placeholder: "Select step…",
+							options: stepOptions,
+							value: stepOptions.find((o) => o.value === transition.to) ?? void 0,
+							placeholder: t(keys.flowSelectStepPlaceholder),
 							isClearable: false,
 							onChange: handleGotoChange
 						})
@@ -54,7 +61,7 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 								className: "fb-flow__move-btn",
 								onClick: onMoveUp,
 								disabled: isFirst,
-								"aria-label": "Move transition up",
+								"aria-label": t(keys.flowMoveTransitionUp),
 								children: "↑"
 							}),
 							/* @__PURE__ */ jsx("button", {
@@ -62,7 +69,7 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 								className: "fb-flow__move-btn",
 								onClick: onMoveDown,
 								disabled: isLast,
-								"aria-label": "Move transition down",
+								"aria-label": t(keys.flowMoveTransitionDown),
 								children: "↓"
 							}),
 							/* @__PURE__ */ jsx(Button, {
@@ -70,7 +77,7 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 								icon: "x",
 								onClick: onRemove,
 								margin: false,
-								"aria-label": "Remove transition"
+								"aria-label": t(keys.flowRemoveTransition)
 							})
 						]
 					})
@@ -78,7 +85,7 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "fb-flow-transition__when-label",
-				children: "when"
+				children: t(keys.flowWhen)
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "fb-flow-transition__condition",
@@ -94,21 +101,20 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 		]
 	});
 };
-const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldNames, conditionTypes, isExpanded, onToggle, onChange, onRemove, onMoveUp, onMoveDown, onAddAbove, onAddBelow }) => {
-	const nextOptions = [{
-		label: "— terminal —",
-		value: ""
-	}, ...otherStepIds.map((id) => ({
-		label: id,
-		value: id
-	}))];
+const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepOptions, holders, stepLabels, entries, conditionTypes, isExpanded, onToggle, onChange, onToggleField, onRemove, onMoveUp, onMoveDown, onAddAbove, onAddBelow }) => {
+	const { t } = useTranslation$1();
+	const nextOptions = nextSelectOptions({
+		sequentialLabel: t(keys.flowNextSequential),
+		terminalLabel: t(keys.flowNextTerminal),
+		otherSteps: otherStepOptions
+	});
 	const transitions = step.transitions ?? [];
 	const tKeysRef = useRef([]);
 	if (tKeysRef.current.length !== transitions.length) tKeysRef.current = transitions.map((_, i) => tKeysRef.current[i] ?? crypto.randomUUID());
 	const tKeys = tKeysRef.current;
 	const addTransition = () => {
-		const firstOtherStep = otherStepIds[0];
-		if (!firstOtherStep) return;
+		const firstOtherStep = otherStepOptions[0]?.value;
+		if (firstOtherStep === void 0) return;
 		tKeysRef.current = [...tKeys, crypto.randomUUID()];
 		onChange({
 			...step,
@@ -148,22 +154,23 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 		});
 	};
 	const handleNextChange = (selected) => {
-		const next = (Array.isArray(selected) ? selected[0] : selected)?.value || void 0;
-		onChange({
+		const chosen = Array.isArray(selected) ? selected[0] : selected;
+		if (chosen) onChange({
 			...step,
-			next
+			next: nextFromSelectValue(chosen.value)
 		});
 	};
+	const title = step.title?.trim() ?? "";
 	return /* @__PURE__ */ jsx(Collapsible, {
 		header: /* @__PURE__ */ jsxs("div", {
 			className: "fb-flow-step__header-content",
-			children: [/* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx("span", {
 				className: "fb-flow-step__index",
-				children: ["Step ", stepIndex + 1]
-			}), /* @__PURE__ */ jsx("span", {
-				className: "fb-flow-step__id-preview",
-				children: step.id.length > 0 ? step.id : /* @__PURE__ */ jsx("em", { children: "no id" })
-			})]
+				children: resolveMessage(t(keys.flowStepFallbackTitle), { n: stepIndex + 1 })
+			}), title.length > 0 ? /* @__PURE__ */ jsx("span", {
+				className: "fb-flow-step__title",
+				children: title
+			}) : null]
 		}),
 		actions: /* @__PURE__ */ jsx(Popup, {
 			button: /* @__PURE__ */ jsx(MoreIcon, {}),
@@ -174,11 +181,11 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 			children: /* @__PURE__ */ jsxs(PopupList.ButtonGroup, { children: [
 				/* @__PURE__ */ jsx(PopupList.Button, {
 					onClick: onAddAbove,
-					children: "Add above"
+					children: t(keys.flowAddAbove)
 				}),
 				/* @__PURE__ */ jsx(PopupList.Button, {
 					onClick: onAddBelow,
-					children: "Add below"
+					children: t(keys.flowAddBelow)
 				}),
 				/* @__PURE__ */ jsx(PopupList.Button, {
 					onClick: onMoveUp,
@@ -202,21 +209,10 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "fb-flow-step__body",
 			children: [
-				/* @__PURE__ */ jsx(TextInput, {
-					path: `fb-flow-step-${stepKey}-id`,
-					label: "Step ID",
-					value: step.id,
-					placeholder: "e.g. intro",
-					onChange: (e) => onChange({
-						...step,
-						id: e.target.value
-					})
-				}),
 				/* @__PURE__ */ jsx(TextInput, {
 					path: `fb-flow-step-${stepKey}-title`,
-					label: "Title",
+					label: t(keys.flowStepTitleLabel),
 					value: step.title ?? "",
-					placeholder: "Optional display title",
 					onChange: (e) => onChange({
 						...step,
 						title: e.target.value.length > 0 ? e.target.value : void 0
@@ -224,29 +220,37 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "fb-flow-step__row",
-					children: [/* @__PURE__ */ jsx(FieldLabel, { label: "Fields" }), fieldNames.length === 0 ? /* @__PURE__ */ jsx("p", {
+					children: [/* @__PURE__ */ jsx(FieldLabel, { label: t(keys.flowFields) }), entries.length === 0 ? /* @__PURE__ */ jsx("p", {
 						className: "fb-flow-step__hint",
-						children: "No fields defined on the form yet."
+						children: t(keys.flowNoFields)
 					}) : /* @__PURE__ */ jsx("div", {
 						className: "fb-flow-step__field-picker",
-						children: fieldNames.map((name) => /* @__PURE__ */ jsx(CheckboxInput, {
-							label: name,
-							checked: step.fields.includes(name),
-							onToggle: (e) => {
-								const fields = e.target.checked ? [...step.fields, name] : step.fields.filter((f) => f !== name);
-								onChange({
-									...step,
-									fields
-								});
-							}
-						}, name))
+						children: entries.map((entry) => {
+							const holder = holders.get(entry.key);
+							const inOtherStep = holder !== void 0 && holder !== stepIndex;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "fb-flow-step__field-option",
+								children: [/* @__PURE__ */ jsx(CheckboxInput, {
+									label: entry.label,
+									checked: step.fields.includes(entry.key) || inOtherStep,
+									readOnly: inOtherStep,
+									onToggle: (e) => {
+										if (inOtherStep) return;
+										onToggleField(entry.key, e.target.checked);
+									}
+								}), inOtherStep ? /* @__PURE__ */ jsx("span", {
+									className: "fb-flow-step__field-hint",
+									children: resolveMessage(t(keys.flowFieldInStep), { step: stepLabels[holder] ?? "" })
+								}) : null]
+							}, entry.key);
+						})
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "fb-flow-step__row",
-					children: [/* @__PURE__ */ jsx(FieldLabel, { label: "Default next" }), /* @__PURE__ */ jsx(ReactSelect, {
+					children: [/* @__PURE__ */ jsx(FieldLabel, { label: t(keys.flowDefaultNext) }), /* @__PURE__ */ jsx(ReactSelect, {
 						options: nextOptions,
-						value: step.next ? nextOptions.find((o) => o.value === step.next) ?? void 0 : nextOptions[0] ?? void 0,
+						value: nextOptions.find((o) => o.value === nextToSelectValue(step.next)) ?? void 0,
 						isClearable: false,
 						onChange: handleNextChange
 					})]
@@ -256,9 +260,9 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "fb-flow-step__transitions-header",
-							children: [/* @__PURE__ */ jsx(FieldLabel, { label: "Conditional transitions" }), /* @__PURE__ */ jsx("span", {
+							children: [/* @__PURE__ */ jsx(FieldLabel, { label: t(keys.flowConditionalTransitions) }), /* @__PURE__ */ jsx("span", {
 								className: "fb-flow-step__hint",
-								children: "(first match wins)"
+								children: t(keys.flowFirstMatchWins)
 							})]
 						}),
 						transitions.map((transition, tIndex) => {
@@ -266,7 +270,7 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 							if (tKey === void 0) return null;
 							return /* @__PURE__ */ jsx(TransitionRow, {
 								transition,
-								stepIds: otherStepIds,
+								stepOptions: otherStepOptions,
 								conditionTypes,
 								isFirst: tIndex === 0,
 								isLast: tIndex === transitions.length - 1,
@@ -283,7 +287,7 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 							iconPosition: "left",
 							onClick: addTransition,
 							margin: false,
-							children: "Add transition"
+							children: t(keys.flowAddTransition)
 						})
 					]
 				})
@@ -293,15 +297,21 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 };
 const FlowBuilder = (props) => {
 	const { setValue, value } = useField();
+	const { t } = useTranslation$1();
 	const label = toStaticLabel(props.field?.label ?? props.label);
 	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
-	const fieldNamesJson = useFormFields(([fields]) => JSON.stringify(extractFieldNames(reduceFieldsToValues(fields, true))));
-	const fieldNames = useMemo(() => JSON.parse(fieldNamesJson), [fieldNamesJson]);
+	const fieldRowsJson = useFormFields(([fields]) => JSON.stringify(extractFieldRows(reduceFieldsToValues(fields, true))));
+	const translatedBareLabels = useMemo(() => Object.fromEntries(Object.entries(props.bareTypeLabels ?? {}).map(([type, label]) => [type, t(label)])), [props.bareTypeLabels, t]);
+	const entries = useMemo(() => flowFieldEntries(JSON.parse(fieldRowsJson), translatedBareLabels), [fieldRowsJson, translatedBareLabels]);
 	const steps = value?.steps ?? [];
-	const allStepIds = steps.map((s) => s.id).filter((id) => id.length > 0);
+	const fallbackTitle = t(keys.flowStepFallbackTitle);
+	const stepLabels = steps.map((step, index) => stepLabel(step, index, fallbackTitle));
+	const stepOptions = stepSelectOptions(steps, stepLabels);
+	const holders = fieldHolders(steps);
+	const unassigned = unassignedEntries(entries, steps);
 	const keysRef = useRef([]);
 	if (keysRef.current.length !== steps.length) keysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID());
-	const keys = keysRef.current;
+	const stepKeys = keysRef.current;
 	const toggleExpanded = (key) => {
 		setExpandedKeys((prev) => {
 			const next = new Set(prev);
@@ -321,18 +331,26 @@ const FlowBuilder = (props) => {
 			id: crypto.randomUUID(),
 			fields: []
 		});
-		const nextKeys = [...keys];
+		const nextKeys = [...stepKeys];
 		nextKeys.splice(at, 0, key);
 		emit(nextSteps, nextKeys);
 		setExpandedKeys((prev) => new Set(prev).add(key));
 	};
 	const addStep = () => insertStep(steps.length);
 	const updateStep = (index, next) => {
-		emit(steps.map((s, i) => i === index ? next : s), keys);
+		emit(steps.map((s, i) => i === index ? next : s), stepKeys);
+	};
+	const toggleField = (stepIndex, key, checked) => {
+		emit(checked ? assignFieldToStep(steps, stepIndex, key) : removeFieldFromStep(steps, stepIndex, key), stepKeys);
+	};
+	const assignUnassignedField = (key, stepId) => {
+		const targetIndex = steps.findIndex((s) => s.id === stepId);
+		if (targetIndex === -1) return;
+		emit(assignFieldToStep(steps, targetIndex, key), stepKeys);
 	};
 	const removeStep = (index) => {
-		const removedKey = keys[index];
-		emit(steps.filter((_, i) => i !== index), keys.filter((_, i) => i !== index));
+		const removedKey = stepKeys[index];
+		emit(removeStepCascade(steps, index), stepKeys.filter((_, i) => i !== index));
 		if (removedKey !== void 0) setExpandedKeys((prev) => {
 			const next = new Set(prev);
 			next.delete(removedKey);
@@ -344,7 +362,7 @@ const FlowBuilder = (props) => {
 		const [movedStep] = nextSteps.splice(from, 1);
 		if (movedStep === void 0) return;
 		nextSteps.splice(to, 0, movedStep);
-		const nextKeys = [...keys];
+		const nextKeys = [...stepKeys];
 		const [movedKey] = nextKeys.splice(from, 1);
 		if (movedKey !== void 0) nextKeys.splice(to, 0, movedKey);
 		emit(nextSteps, nextKeys);
@@ -356,29 +374,36 @@ const FlowBuilder = (props) => {
 				className: "blocks-field__header",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "blocks-field__header-wrap",
-					children: /* @__PURE__ */ jsx("h3", { children: typeof label === "string" ? label : "Flow" })
+					children: /* @__PURE__ */ jsx("h3", { children: typeof label === "string" ? label : t(keys.flowFallbackTitle) })
 				})
 			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "fb-flow-builder__description",
+				children: t(keys.flowDescription)
+			}),
 			steps.length === 0 ? /* @__PURE__ */ jsx("p", {
 				className: "fb-flow-builder__hint",
-				children: "No steps defined. Add at least two steps to enable multi-page flow routing."
+				children: t(keys.flowNoSteps)
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "fb-flow-builder__steps",
 				children: steps.map((step, index) => {
-					const key = keys[index];
+					const key = stepKeys[index];
 					if (key === void 0) return null;
-					const otherStepIds = allStepIds.filter((id) => id !== step.id);
+					const otherStepOptions = otherStepSelectOptions(stepOptions, step.id);
 					return /* @__PURE__ */ jsx(StepCard, {
 						stepKey: key,
 						step,
 						stepIndex: index,
 						stepCount: steps.length,
-						otherStepIds,
-						fieldNames,
+						otherStepOptions,
+						holders,
+						stepLabels,
+						entries,
 						conditionTypes: props.conditionTypes,
 						isExpanded: expandedKeys.has(key),
 						onToggle: () => toggleExpanded(key),
 						onChange: (next) => updateStep(index, next),
+						onToggleField: (fieldKey, checked) => toggleField(index, fieldKey, checked),
 						onRemove: () => removeStep(index),
 						onMoveUp: () => moveStep(index, index - 1),
 						onMoveDown: () => moveStep(index, index + 1),
@@ -387,6 +412,30 @@ const FlowBuilder = (props) => {
 					}, key);
 				})
 			}),
+			steps.length > 0 && unassigned.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "fb-flow-unassigned",
+				children: [/* @__PURE__ */ jsx(FieldLabel, { label: t(keys.flowUnassigned) }), /* @__PURE__ */ jsx("div", {
+					className: "fb-flow-unassigned__rows",
+					children: unassigned.map((entry) => /* @__PURE__ */ jsxs("div", {
+						className: "fb-flow-unassigned__row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "fb-flow-unassigned__name",
+							children: entry.label
+						}), /* @__PURE__ */ jsx("div", {
+							className: "fb-flow-unassigned__select",
+							children: /* @__PURE__ */ jsx(ReactSelect, {
+								options: stepOptions,
+								placeholder: t(keys.flowAssignToStep),
+								isClearable: false,
+								onChange: (selected) => {
+									const chosen = Array.isArray(selected) ? selected[0] : selected;
+									if (chosen) assignUnassignedField(entry.key, chosen.value);
+								}
+							})
+						})]
+					}, entry.key))
+				})]
+			}) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "fb-flow-builder__actions",
 				children: /* @__PURE__ */ jsx(Button, {

package/dist/client/FlowBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowBuilder.js","names":[],"sources":["../../src/client/FlowBuilder.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tButton,\n\tCheckboxInput,\n\tCollapsible,\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tTextInput,\n\tuseField,\n\tuseFormFields,\n} from '@payloadcms/ui'\nimport { Popup, PopupList } from '@payloadcms/ui/elements/Popup'\nimport { MoreIcon } from '@payloadcms/ui/icons/More'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport type { ChangeEvent } from 'react'\nimport { useMemo, useRef, useState } from 'react'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport type { FlowStep, FlowTransition, FormFlow } from '../flow/types'\nimport { ConditionBuilder } from './ConditionBuilder'\nimport type { FieldRow } from './synthesizeClientField'\n\nexport type FlowBuilderProps = {\n\tpath?: string\n\tfield?: { label?: unknown }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\nconst toStaticLabel = (label: unknown): string | Record<string, string> | undefined => {\n\tif (typeof label === 'string') return label\n\tif (label && typeof label === 'object') return label as Record<string, string>\n\treturn undefined\n}\n\nconst extractFieldNames = (data: Record<string, unknown>): string[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows\n\t\t.map((row) => (typeof row.name === 'string' ? row.name.trim() : null))\n\t\t.filter((name): name is string => name !== null && name.length > 0)\n}\n\ntype TransitionRowProps = {\n\ttransition: FlowTransition\n\tstepIds: string[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisFirst: boolean\n\tisLast: boolean\n\tonChange: (next: FlowTransition) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n}\n\nconst TransitionRow = ({\n\ttransition,\n\tstepIds,\n\tconditionTypes,\n\tisFirst,\n\tisLast,\n\tonChange,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n}: TransitionRowProps) => {\n\tconst toOptions: ReactSelectOption[] = stepIds.map((id) => ({ label: id, value: id }))\n\n\tconst handleGotoChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tif (chosen) onChange({ ...transition, to: chosen.value as string })\n\t}\n\n\treturn (\n\t\t<div className=\"fb-flow-transition\">\n\t\t\t<div className=\"fb-flow-transition__header\">\n\t\t\t\t<span className=\"fb-flow-transition__label\">go to</span>\n\t\t\t\t<div className=\"fb-flow-transition__goto\">\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={toOptions}\n\t\t\t\t\t\tvalue={toOptions.find((o) => o.value === transition.to) ?? undefined}\n\t\t\t\t\t\tplaceholder=\"Select step…\"\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleGotoChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"fb-flow-transition__actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveUp}\n\t\t\t\t\t\tdisabled={isFirst}\n\t\t\t\t\t\taria-label=\"Move transition up\"\n\t\t\t\t\t>\n\t\t\t\t\t\t↑\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveDown}\n\t\t\t\t\t\tdisabled={isLast}\n\t\t\t\t\t\taria-label=\"Move transition down\"\n\t\t\t\t\t>\n\t\t\t\t\t\t↓\n\t\t\t\t\t</button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"x\"\n\t\t\t\t\t\tonClick={onRemove}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\taria-label=\"Remove transition\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span className=\"fb-flow-transition__when-label\">when</span>\n\t\t\t<div className=\"fb-flow-transition__condition\">\n\t\t\t\t<ConditionBuilder\n\t\t\t\t\tvalue={transition.when}\n\t\t\t\t\tonChange={(when) => onChange({ ...transition, when })}\n\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype StepCardProps = {\n\tstep: FlowStep\n\tstepKey: string\n\tstepIndex: number\n\tstepCount: number\n\totherStepIds: string[]\n\tfieldNames: string[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisExpanded: boolean\n\tonToggle: () => void\n\tonChange: (next: FlowStep) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n\tonAddAbove: () => void\n\tonAddBelow: () => void\n}\n\nconst StepCard = ({\n\tstep,\n\tstepKey,\n\tstepIndex,\n\tstepCount,\n\totherStepIds,\n\tfieldNames,\n\tconditionTypes,\n\tisExpanded,\n\tonToggle,\n\tonChange,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n\tonAddAbove,\n\tonAddBelow,\n}: StepCardProps) => {\n\tconst nextOptions: ReactSelectOption[] = [\n\t\t{ label: '— terminal —', value: '' },\n\t\t...otherStepIds.map((id) => ({ label: id, value: id })),\n\t]\n\n\tconst transitions = step.transitions ?? []\n\n\t// Stable per-transition keys, mirroring the step-level scheme so transition reorder/remove\n\t// reconciles by identity rather than array position.\n\tconst tKeysRef = useRef<string[]>([])\n\tif (tKeysRef.current.length !== transitions.length) {\n\t\ttKeysRef.current = transitions.map((_, i) => tKeysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst tKeys = tKeysRef.current\n\n\tconst addTransition = () => {\n\t\tconst firstOtherStep = otherStepIds[0]\n\t\tif (!firstOtherStep) return\n\t\ttKeysRef.current = [...tKeys, crypto.randomUUID()]\n\t\tonChange({\n\t\t\t...step,\n\t\t\ttransitions: [...transitions, { when: {}, to: firstOtherStep }],\n\t\t})\n\t}\n\n\tconst updateTransition = (index: number, next: FlowTransition) => {\n\t\tconst updated = [...transitions]\n\t\tupdated[index] = next\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst removeTransition = (index: number) => {\n\t\ttKeysRef.current = tKeys.filter((_, i) => i !== index)\n\t\tconst updated = transitions.filter((_, i) => i !== index)\n\t\tonChange({ ...step, transitions: updated.length > 0 ? updated : undefined })\n\t}\n\n\tconst moveTransition = (from: number, to: number) => {\n\t\tconst updated = [...transitions]\n\t\tconst [item] = updated.splice(from, 1)\n\t\tif (item !== undefined) updated.splice(to, 0, item)\n\t\tconst nextKeys = [...tKeys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\ttKeysRef.current = nextKeys\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst handleNextChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tconst next = (chosen?.value as string | undefined) || undefined\n\t\tonChange({ ...step, next })\n\t}\n\n\tconst stepHeader = (\n\t\t<div className=\"fb-flow-step__header-content\">\n\t\t\t<span className=\"fb-flow-step__index\">Step {stepIndex + 1}</span>\n\t\t\t<span className=\"fb-flow-step__id-preview\">\n\t\t\t\t{step.id.length > 0 ? step.id : <em>no id</em>}\n\t\t\t</span>\n\t\t</div>\n\t)\n\n\treturn (\n\t\t<Collapsible\n\t\t\theader={stepHeader}\n\t\t\tactions={\n\t\t\t\t<Popup\n\t\t\t\t\tbutton={<MoreIcon />}\n\t\t\t\t\tbuttonType=\"default\"\n\t\t\t\t\thorizontalAlign=\"right\"\n\t\t\t\t\tsize=\"fit-content\"\n\t\t\t\t\tverticalAlign=\"bottom\"\n\t\t\t\t>\n\t\t\t\t\t<PopupList.ButtonGroup>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddAbove}>Add above</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddBelow}>Add below</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveUp} disabled={stepIndex === 0}>\n\t\t\t\t\t\t\tMove up\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveDown} disabled={stepIndex === stepCount - 1}>\n\t\t\t\t\t\t\tMove down\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onRemove}>Remove</PopupList.Button>\n\t\t\t\t\t</PopupList.ButtonGroup>\n\t\t\t\t</Popup>\n\t\t\t}\n\t\t\tisCollapsed={!isExpanded}\n\t\t\tonToggle={() => onToggle()}\n\t\t\tclassName=\"fb-flow-step\"\n\t\t>\n\t\t\t<div className=\"fb-flow-step__body\">\n\t\t\t\t<TextInput\n\t\t\t\t\tpath={`fb-flow-step-${stepKey}-id`}\n\t\t\t\t\tlabel=\"Step ID\"\n\t\t\t\t\tvalue={step.id}\n\t\t\t\t\tplaceholder=\"e.g. intro\"\n\t\t\t\t\tonChange={(e: ChangeEvent<HTMLInputElement>) => onChange({ ...step, id: e.target.value })}\n\t\t\t\t/>\n\n\t\t\t\t<TextInput\n\t\t\t\t\tpath={`fb-flow-step-${stepKey}-title`}\n\t\t\t\t\tlabel=\"Title\"\n\t\t\t\t\tvalue={step.title ?? ''}\n\t\t\t\t\tplaceholder=\"Optional display title\"\n\t\t\t\t\tonChange={(e: ChangeEvent<HTMLInputElement>) =>\n\t\t\t\t\t\tonChange({ ...step, title: e.target.value.length > 0 ? e.target.value : undefined })\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label=\"Fields\" />\n\t\t\t\t\t{fieldNames.length === 0 ? (\n\t\t\t\t\t\t<p className=\"fb-flow-step__hint\">No fields defined on the form yet.</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"fb-flow-step__field-picker\">\n\t\t\t\t\t\t\t{fieldNames.map((name) => (\n\t\t\t\t\t\t\t\t<CheckboxInput\n\t\t\t\t\t\t\t\t\tkey={name}\n\t\t\t\t\t\t\t\t\tlabel={name}\n\t\t\t\t\t\t\t\t\tchecked={step.fields.includes(name)}\n\t\t\t\t\t\t\t\t\tonToggle={(e) => {\n\t\t\t\t\t\t\t\t\t\tconst fields = e.target.checked\n\t\t\t\t\t\t\t\t\t\t\t? [...step.fields, name]\n\t\t\t\t\t\t\t\t\t\t\t: step.fields.filter((f) => f !== name)\n\t\t\t\t\t\t\t\t\t\tonChange({ ...step, fields })\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label=\"Default next\" />\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={nextOptions}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tstep.next\n\t\t\t\t\t\t\t\t? (nextOptions.find((o) => o.value === step.next) ?? undefined)\n\t\t\t\t\t\t\t\t: (nextOptions[0] ?? undefined)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleNextChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__transitions\">\n\t\t\t\t\t<div className=\"fb-flow-step__transitions-header\">\n\t\t\t\t\t\t<FieldLabel label=\"Conditional transitions\" />\n\t\t\t\t\t\t<span className=\"fb-flow-step__hint\">(first match wins)</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{transitions.map((transition, tIndex) => {\n\t\t\t\t\t\tconst tKey = tKeys[tIndex]\n\t\t\t\t\t\tif (tKey === undefined) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<TransitionRow\n\t\t\t\t\t\t\t\tkey={tKey}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\tstepIds={otherStepIds}\n\t\t\t\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t\t\t\t\tisFirst={tIndex === 0}\n\t\t\t\t\t\t\t\tisLast={tIndex === transitions.length - 1}\n\t\t\t\t\t\t\t\tonChange={(next) => updateTransition(tIndex, next)}\n\t\t\t\t\t\t\t\tonRemove={() => removeTransition(tIndex)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveTransition(tIndex, tIndex - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveTransition(tIndex, tIndex + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\tonClick={addTransition}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd transition\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Collapsible>\n\t)\n}\n\nexport const FlowBuilder = (props: FlowBuilderProps) => {\n\tconst { setValue, value } = useField<FormFlow | undefined>()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set())\n\n\tconst fieldNamesJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(extractFieldNames(reduceFieldsToValues(fields, true) as Record<string, unknown>))\n\t)\n\tconst fieldNames = useMemo(() => JSON.parse(fieldNamesJson) as string[], [fieldNamesJson])\n\n\tconst steps = value?.steps ?? []\n\tconst allStepIds = steps.map((s) => s.id).filter((id) => id.length > 0)\n\n\t// Stable per-step keys, decoupled from the user-editable step.id. Reorder/insert/remove\n\t// reconcile by identity so the focused Step ID input and each step's expand state stay with\n\t// their step instead of jumping to whichever step now sits at that array position.\n\tconst keysRef = useRef<string[]>([])\n\tif (keysRef.current.length !== steps.length) {\n\t\tkeysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst keys = keysRef.current\n\n\tconst toggleExpanded = (key: string) => {\n\t\tsetExpandedKeys((prev) => {\n\t\t\tconst next = new Set(prev)\n\t\t\tif (next.has(key)) next.delete(key)\n\t\t\telse next.add(key)\n\t\t\treturn next\n\t\t})\n\t}\n\n\tconst emit = (nextSteps: FlowStep[], nextKeys: string[]) => {\n\t\tkeysRef.current = nextKeys\n\t\tsetValue({ steps: nextSteps } as FormFlow)\n\t}\n\n\tconst insertStep = (at: number) => {\n\t\tconst key = crypto.randomUUID()\n\t\tconst nextSteps = [...steps]\n\t\tnextSteps.splice(at, 0, { id: crypto.randomUUID(), fields: [] })\n\t\tconst nextKeys = [...keys]\n\t\tnextKeys.splice(at, 0, key)\n\t\temit(nextSteps, nextKeys)\n\t\tsetExpandedKeys((prev) => new Set(prev).add(key))\n\t}\n\n\tconst addStep = () => insertStep(steps.length)\n\n\tconst updateStep = (index: number, next: FlowStep) => {\n\t\temit(\n\t\t\tsteps.map((s, i) => (i === index ? next : s)),\n\t\t\tkeys\n\t\t)\n\t}\n\n\tconst removeStep = (index: number) => {\n\t\tconst removedKey = keys[index]\n\t\temit(\n\t\t\tsteps.filter((_, i) => i !== index),\n\t\t\tkeys.filter((_, i) => i !== index)\n\t\t)\n\t\tif (removedKey !== undefined) {\n\t\t\tsetExpandedKeys((prev) => {\n\t\t\t\tconst next = new Set(prev)\n\t\t\t\tnext.delete(removedKey)\n\t\t\t\treturn next\n\t\t\t})\n\t\t}\n\t}\n\n\tconst moveStep = (from: number, to: number) => {\n\t\tconst nextSteps = [...steps]\n\t\tconst [movedStep] = nextSteps.splice(from, 1)\n\t\tif (movedStep === undefined) return\n\t\tnextSteps.splice(to, 0, movedStep)\n\t\tconst nextKeys = [...keys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\temit(nextSteps, nextKeys)\n\t}\n\n\treturn (\n\t\t<div className=\"field-type fb-flow-builder\">\n\t\t\t<div className=\"blocks-field__header\">\n\t\t\t\t<div className=\"blocks-field__header-wrap\">\n\t\t\t\t\t<h3>{typeof label === 'string' ? label : 'Flow'}</h3>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{steps.length === 0 ? (\n\t\t\t\t<p className=\"fb-flow-builder__hint\">\n\t\t\t\t\tNo steps defined. Add at least two steps to enable multi-page flow routing.\n\t\t\t\t</p>\n\t\t\t) : (\n\t\t\t\t<div className=\"fb-flow-builder__steps\">\n\t\t\t\t\t{steps.map((step, index) => {\n\t\t\t\t\t\tconst key = keys[index]\n\t\t\t\t\t\tif (key === undefined) return null\n\t\t\t\t\t\tconst otherStepIds = allStepIds.filter((id) => id !== step.id)\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<StepCard\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\tstepKey={key}\n\t\t\t\t\t\t\t\tstep={step}\n\t\t\t\t\t\t\t\tstepIndex={index}\n\t\t\t\t\t\t\t\tstepCount={steps.length}\n\t\t\t\t\t\t\t\totherStepIds={otherStepIds}\n\t\t\t\t\t\t\t\tfieldNames={fieldNames}\n\t\t\t\t\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\t\t\t\t\tisExpanded={expandedKeys.has(key)}\n\t\t\t\t\t\t\t\tonToggle={() => toggleExpanded(key)}\n\t\t\t\t\t\t\t\tonChange={(next) => updateStep(index, next)}\n\t\t\t\t\t\t\t\tonRemove={() => removeStep(index)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveStep(index, index - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveStep(index, index + 1)}\n\t\t\t\t\t\t\t\tonAddAbove={() => insertStep(index)}\n\t\t\t\t\t\t\t\tonAddBelow={() => insertStep(index + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"fb-flow-builder__actions\">\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\tonClick={addStep}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\tAdd step\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":"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"}
+{"version":3,"file":"FlowBuilder.js","names":["useTranslation"],"sources":["../../src/client/FlowBuilder.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tButton,\n\tCheckboxInput,\n\tCollapsible,\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tTextInput,\n\tuseField,\n\tuseFormFields,\n} from '@payloadcms/ui'\nimport { Popup, PopupList } from '@payloadcms/ui/elements/Popup'\nimport { MoreIcon } from '@payloadcms/ui/icons/More'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport type { ChangeEvent } from 'react'\nimport { useMemo, useRef, useState } from 'react'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport type { FlowStep, FlowTransition, FormFlow } from '../flow/types'\nimport { keys, type TranslationKey } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { resolveMessage } from '../validation/message'\nimport { ConditionBuilder } from './ConditionBuilder'\nimport {\n\tassignFieldToStep,\n\ttype FlowFieldEntry,\n\ttype FlowSelectOption,\n\tfieldHolders,\n\tflowFieldEntries,\n\tnextFromSelectValue,\n\tnextSelectOptions,\n\tnextToSelectValue,\n\totherStepSelectOptions,\n\tremoveFieldFromStep,\n\tremoveStepCascade,\n\tstepLabel,\n\tstepSelectOptions,\n\tunassignedEntries,\n} from './flowAuthoring'\nimport type { FieldRow } from './synthesizeClientField'\nimport { toStaticLabel } from './toStaticLabel'\nimport './admin.css'\n\nexport type FlowBuilderProps = {\n\tpath?: string\n\tfield?: { label?: unknown }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n\t/** Bare (nameless) block slugs to their display label: an i18n key or a literal. */\n\tbareTypeLabels?: Record<string, string>\n}\n\n/** The row facets the flow builder keys and labels by, projected for a stable JSON identity. */\nconst extractFieldRows = (data: Record<string, unknown>): FieldRow[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows.map((row) => ({\n\t\tblockType: row.blockType,\n\t\tname: row.name,\n\t\tid: row.id,\n\t\tlabel: row.label,\n\t\tcontent: row.content,\n\t}))\n}\n\ntype TransitionRowProps = {\n\ttransition: FlowTransition\n\tstepOptions: FlowSelectOption[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisFirst: boolean\n\tisLast: boolean\n\tonChange: (next: FlowTransition) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n}\n\nconst TransitionRow = ({\n\ttransition,\n\tstepOptions,\n\tconditionTypes,\n\tisFirst,\n\tisLast,\n\tonChange,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n}: TransitionRowProps) => {\n\tconst { t } = useTranslation()\n\n\tconst handleGotoChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tif (chosen) onChange({ ...transition, to: chosen.value as string })\n\t}\n\n\treturn (\n\t\t<div className=\"fb-flow-transition\">\n\t\t\t<div className=\"fb-flow-transition__header\">\n\t\t\t\t<span className=\"fb-flow-transition__label\">{t(keys.flowGoTo)}</span>\n\t\t\t\t<div className=\"fb-flow-transition__goto\">\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={stepOptions}\n\t\t\t\t\t\tvalue={stepOptions.find((o) => o.value === transition.to) ?? undefined}\n\t\t\t\t\t\tplaceholder={t(keys.flowSelectStepPlaceholder)}\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleGotoChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"fb-flow-transition__actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveUp}\n\t\t\t\t\t\tdisabled={isFirst}\n\t\t\t\t\t\taria-label={t(keys.flowMoveTransitionUp)}\n\t\t\t\t\t>\n\t\t\t\t\t\t↑\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveDown}\n\t\t\t\t\t\tdisabled={isLast}\n\t\t\t\t\t\taria-label={t(keys.flowMoveTransitionDown)}\n\t\t\t\t\t>\n\t\t\t\t\t\t↓\n\t\t\t\t\t</button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"x\"\n\t\t\t\t\t\tonClick={onRemove}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\taria-label={t(keys.flowRemoveTransition)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span className=\"fb-flow-transition__when-label\">{t(keys.flowWhen)}</span>\n\t\t\t<div className=\"fb-flow-transition__condition\">\n\t\t\t\t<ConditionBuilder\n\t\t\t\t\tvalue={transition.when}\n\t\t\t\t\tonChange={(when) => onChange({ ...transition, when })}\n\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype StepCardProps = {\n\tstep: FlowStep\n\tstepKey: string\n\tstepIndex: number\n\tstepCount: number\n\totherStepOptions: FlowSelectOption[]\n\tholders: Map<string, number>\n\tstepLabels: string[]\n\tentries: FlowFieldEntry[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisExpanded: boolean\n\tonToggle: () => void\n\tonChange: (next: FlowStep) => void\n\tonToggleField: (key: string, checked: boolean) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n\tonAddAbove: () => void\n\tonAddBelow: () => void\n}\n\nconst StepCard = ({\n\tstep,\n\tstepKey,\n\tstepIndex,\n\tstepCount,\n\totherStepOptions,\n\tholders,\n\tstepLabels,\n\tentries,\n\tconditionTypes,\n\tisExpanded,\n\tonToggle,\n\tonChange,\n\tonToggleField,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n\tonAddAbove,\n\tonAddBelow,\n}: StepCardProps) => {\n\tconst { t } = useTranslation()\n\n\tconst nextOptions = nextSelectOptions({\n\t\tsequentialLabel: t(keys.flowNextSequential),\n\t\tterminalLabel: t(keys.flowNextTerminal),\n\t\totherSteps: otherStepOptions,\n\t})\n\n\tconst transitions = step.transitions ?? []\n\n\t// Stable per-transition keys, mirroring the step-level scheme so transition reorder/remove\n\t// reconciles by identity rather than array position.\n\tconst tKeysRef = useRef<string[]>([])\n\tif (tKeysRef.current.length !== transitions.length) {\n\t\ttKeysRef.current = transitions.map((_, i) => tKeysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst tKeys = tKeysRef.current\n\n\tconst addTransition = () => {\n\t\tconst firstOtherStep = otherStepOptions[0]?.value\n\t\tif (firstOtherStep === undefined) return\n\t\ttKeysRef.current = [...tKeys, crypto.randomUUID()]\n\t\tonChange({\n\t\t\t...step,\n\t\t\ttransitions: [...transitions, { when: {}, to: firstOtherStep }],\n\t\t})\n\t}\n\n\tconst updateTransition = (index: number, next: FlowTransition) => {\n\t\tconst updated = [...transitions]\n\t\tupdated[index] = next\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst removeTransition = (index: number) => {\n\t\ttKeysRef.current = tKeys.filter((_, i) => i !== index)\n\t\tconst updated = transitions.filter((_, i) => i !== index)\n\t\tonChange({ ...step, transitions: updated.length > 0 ? updated : undefined })\n\t}\n\n\tconst moveTransition = (from: number, to: number) => {\n\t\tconst updated = [...transitions]\n\t\tconst [item] = updated.splice(from, 1)\n\t\tif (item !== undefined) updated.splice(to, 0, item)\n\t\tconst nextKeys = [...tKeys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\ttKeysRef.current = nextKeys\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst handleNextChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tif (chosen) onChange({ ...step, next: nextFromSelectValue(chosen.value as string) })\n\t}\n\n\tconst title = step.title?.trim() ?? ''\n\n\tconst stepHeader = (\n\t\t<div className=\"fb-flow-step__header-content\">\n\t\t\t<span className=\"fb-flow-step__index\">\n\t\t\t\t{resolveMessage(t(keys.flowStepFallbackTitle), { n: stepIndex + 1 })}\n\t\t\t</span>\n\t\t\t{title.length > 0 ? <span className=\"fb-flow-step__title\">{title}</span> : null}\n\t\t</div>\n\t)\n\n\treturn (\n\t\t<Collapsible\n\t\t\theader={stepHeader}\n\t\t\tactions={\n\t\t\t\t<Popup\n\t\t\t\t\tbutton={<MoreIcon />}\n\t\t\t\t\tbuttonType=\"default\"\n\t\t\t\t\thorizontalAlign=\"right\"\n\t\t\t\t\tsize=\"fit-content\"\n\t\t\t\t\tverticalAlign=\"bottom\"\n\t\t\t\t>\n\t\t\t\t\t<PopupList.ButtonGroup>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddAbove}>{t(keys.flowAddAbove)}</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddBelow}>{t(keys.flowAddBelow)}</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveUp} disabled={stepIndex === 0}>\n\t\t\t\t\t\t\tMove up\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveDown} disabled={stepIndex === stepCount - 1}>\n\t\t\t\t\t\t\tMove down\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onRemove}>Remove</PopupList.Button>\n\t\t\t\t\t</PopupList.ButtonGroup>\n\t\t\t\t</Popup>\n\t\t\t}\n\t\t\tisCollapsed={!isExpanded}\n\t\t\tonToggle={() => onToggle()}\n\t\t\tclassName=\"fb-flow-step\"\n\t\t>\n\t\t\t<div className=\"fb-flow-step__body\">\n\t\t\t\t<TextInput\n\t\t\t\t\tpath={`fb-flow-step-${stepKey}-title`}\n\t\t\t\t\tlabel={t(keys.flowStepTitleLabel)}\n\t\t\t\t\tvalue={step.title ?? ''}\n\t\t\t\t\tonChange={(e: ChangeEvent<HTMLInputElement>) =>\n\t\t\t\t\t\tonChange({ ...step, title: e.target.value.length > 0 ? e.target.value : undefined })\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label={t(keys.flowFields)} />\n\t\t\t\t\t{entries.length === 0 ? (\n\t\t\t\t\t\t<p className=\"fb-flow-step__hint\">{t(keys.flowNoFields)}</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"fb-flow-step__field-picker\">\n\t\t\t\t\t\t\t{entries.map((entry) => {\n\t\t\t\t\t\t\t\tconst holder = holders.get(entry.key)\n\t\t\t\t\t\t\t\tconst inOtherStep = holder !== undefined && holder !== stepIndex\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<div key={entry.key} className=\"fb-flow-step__field-option\">\n\t\t\t\t\t\t\t\t\t\t<CheckboxInput\n\t\t\t\t\t\t\t\t\t\t\tlabel={entry.label}\n\t\t\t\t\t\t\t\t\t\t\tchecked={step.fields.includes(entry.key) || inOtherStep}\n\t\t\t\t\t\t\t\t\t\t\treadOnly={inOtherStep}\n\t\t\t\t\t\t\t\t\t\t\tonToggle={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (inOtherStep) return\n\t\t\t\t\t\t\t\t\t\t\t\tonToggleField(entry.key, e.target.checked)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{inOtherStep ? (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"fb-flow-step__field-hint\">\n\t\t\t\t\t\t\t\t\t\t\t\t{resolveMessage(t(keys.flowFieldInStep), {\n\t\t\t\t\t\t\t\t\t\t\t\t\tstep: stepLabels[holder] ?? '',\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label={t(keys.flowDefaultNext)} />\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={nextOptions}\n\t\t\t\t\t\tvalue={nextOptions.find((o) => o.value === nextToSelectValue(step.next)) ?? undefined}\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleNextChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__transitions\">\n\t\t\t\t\t<div className=\"fb-flow-step__transitions-header\">\n\t\t\t\t\t\t<FieldLabel label={t(keys.flowConditionalTransitions)} />\n\t\t\t\t\t\t<span className=\"fb-flow-step__hint\">{t(keys.flowFirstMatchWins)}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{transitions.map((transition, tIndex) => {\n\t\t\t\t\t\tconst tKey = tKeys[tIndex]\n\t\t\t\t\t\tif (tKey === undefined) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<TransitionRow\n\t\t\t\t\t\t\t\tkey={tKey}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\tstepOptions={otherStepOptions}\n\t\t\t\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t\t\t\t\tisFirst={tIndex === 0}\n\t\t\t\t\t\t\t\tisLast={tIndex === transitions.length - 1}\n\t\t\t\t\t\t\t\tonChange={(next) => updateTransition(tIndex, next)}\n\t\t\t\t\t\t\t\tonRemove={() => removeTransition(tIndex)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveTransition(tIndex, tIndex - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveTransition(tIndex, tIndex + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\tonClick={addTransition}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{t(keys.flowAddTransition)}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Collapsible>\n\t)\n}\n\nexport const FlowBuilder = (props: FlowBuilderProps) => {\n\tconst { setValue, value } = useField<FormFlow | undefined>()\n\tconst { t } = useTranslation()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set())\n\n\tconst fieldRowsJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(extractFieldRows(reduceFieldsToValues(fields, true) as Record<string, unknown>))\n\t)\n\t// Registry labels may be host-registered keys or literals; Payload's `t` returns unknown keys unchanged.\n\tconst translatedBareLabels = useMemo(\n\t\t() =>\n\t\t\tObject.fromEntries(\n\t\t\t\tObject.entries(props.bareTypeLabels ?? {}).map(([type, label]) => [\n\t\t\t\t\ttype,\n\t\t\t\t\tt(label as TranslationKey),\n\t\t\t\t])\n\t\t\t),\n\t\t[props.bareTypeLabels, t]\n\t)\n\tconst entries = useMemo(\n\t\t() => flowFieldEntries(JSON.parse(fieldRowsJson) as FieldRow[], translatedBareLabels),\n\t\t[fieldRowsJson, translatedBareLabels]\n\t)\n\n\tconst steps = value?.steps ?? []\n\tconst fallbackTitle = t(keys.flowStepFallbackTitle)\n\tconst stepLabels = steps.map((step, index) => stepLabel(step, index, fallbackTitle))\n\tconst stepOptions = stepSelectOptions(steps, stepLabels)\n\tconst holders = fieldHolders(steps)\n\tconst unassigned = unassignedEntries(entries, steps)\n\n\t// Stable per-step React keys, independent of step ids. Reorder/insert/remove reconcile by\n\t// identity so focused inputs and each step's expand state stay with their step instead of\n\t// jumping to whichever step now sits at that array position.\n\tconst keysRef = useRef<string[]>([])\n\tif (keysRef.current.length !== steps.length) {\n\t\tkeysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst stepKeys = keysRef.current\n\n\tconst toggleExpanded = (key: string) => {\n\t\tsetExpandedKeys((prev) => {\n\t\t\tconst next = new Set(prev)\n\t\t\tif (next.has(key)) next.delete(key)\n\t\t\telse next.add(key)\n\t\t\treturn next\n\t\t})\n\t}\n\n\tconst emit = (nextSteps: FlowStep[], nextKeys: string[]) => {\n\t\tkeysRef.current = nextKeys\n\t\tsetValue({ steps: nextSteps } as FormFlow)\n\t}\n\n\tconst insertStep = (at: number) => {\n\t\tconst key = crypto.randomUUID()\n\t\tconst nextSteps = [...steps]\n\t\tnextSteps.splice(at, 0, { id: crypto.randomUUID(), fields: [] })\n\t\tconst nextKeys = [...stepKeys]\n\t\tnextKeys.splice(at, 0, key)\n\t\temit(nextSteps, nextKeys)\n\t\tsetExpandedKeys((prev) => new Set(prev).add(key))\n\t}\n\n\tconst addStep = () => insertStep(steps.length)\n\n\tconst updateStep = (index: number, next: FlowStep) => {\n\t\temit(\n\t\t\tsteps.map((s, i) => (i === index ? next : s)),\n\t\t\tstepKeys\n\t\t)\n\t}\n\n\tconst toggleField = (stepIndex: number, key: string, checked: boolean) => {\n\t\tconst nextSteps = checked\n\t\t\t? assignFieldToStep(steps, stepIndex, key)\n\t\t\t: removeFieldFromStep(steps, stepIndex, key)\n\t\temit(nextSteps, stepKeys)\n\t}\n\n\tconst assignUnassignedField = (key: string, stepId: string) => {\n\t\tconst targetIndex = steps.findIndex((s) => s.id === stepId)\n\t\tif (targetIndex === -1) return\n\t\temit(assignFieldToStep(steps, targetIndex, key), stepKeys)\n\t}\n\n\tconst removeStep = (index: number) => {\n\t\tconst removedKey = stepKeys[index]\n\t\temit(\n\t\t\tremoveStepCascade(steps, index),\n\t\t\tstepKeys.filter((_, i) => i !== index)\n\t\t)\n\t\tif (removedKey !== undefined) {\n\t\t\tsetExpandedKeys((prev) => {\n\t\t\t\tconst next = new Set(prev)\n\t\t\t\tnext.delete(removedKey)\n\t\t\t\treturn next\n\t\t\t})\n\t\t}\n\t}\n\n\tconst moveStep = (from: number, to: number) => {\n\t\tconst nextSteps = [...steps]\n\t\tconst [movedStep] = nextSteps.splice(from, 1)\n\t\tif (movedStep === undefined) return\n\t\tnextSteps.splice(to, 0, movedStep)\n\t\tconst nextKeys = [...stepKeys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\temit(nextSteps, nextKeys)\n\t}\n\n\treturn (\n\t\t<div className=\"field-type fb-flow-builder\">\n\t\t\t<div className=\"blocks-field__header\">\n\t\t\t\t<div className=\"blocks-field__header-wrap\">\n\t\t\t\t\t<h3>{typeof label === 'string' ? label : t(keys.flowFallbackTitle)}</h3>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<p className=\"fb-flow-builder__description\">{t(keys.flowDescription)}</p>\n\t\t\t{steps.length === 0 ? (\n\t\t\t\t<p className=\"fb-flow-builder__hint\">{t(keys.flowNoSteps)}</p>\n\t\t\t) : (\n\t\t\t\t<div className=\"fb-flow-builder__steps\">\n\t\t\t\t\t{steps.map((step, index) => {\n\t\t\t\t\t\tconst key = stepKeys[index]\n\t\t\t\t\t\tif (key === undefined) return null\n\t\t\t\t\t\tconst otherStepOptions = otherStepSelectOptions(stepOptions, step.id)\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<StepCard\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\tstepKey={key}\n\t\t\t\t\t\t\t\tstep={step}\n\t\t\t\t\t\t\t\tstepIndex={index}\n\t\t\t\t\t\t\t\tstepCount={steps.length}\n\t\t\t\t\t\t\t\totherStepOptions={otherStepOptions}\n\t\t\t\t\t\t\t\tholders={holders}\n\t\t\t\t\t\t\t\tstepLabels={stepLabels}\n\t\t\t\t\t\t\t\tentries={entries}\n\t\t\t\t\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\t\t\t\t\tisExpanded={expandedKeys.has(key)}\n\t\t\t\t\t\t\t\tonToggle={() => toggleExpanded(key)}\n\t\t\t\t\t\t\t\tonChange={(next) => updateStep(index, next)}\n\t\t\t\t\t\t\t\tonToggleField={(fieldKey, checked) => toggleField(index, fieldKey, checked)}\n\t\t\t\t\t\t\t\tonRemove={() => removeStep(index)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveStep(index, index - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveStep(index, index + 1)}\n\t\t\t\t\t\t\t\tonAddAbove={() => insertStep(index)}\n\t\t\t\t\t\t\t\tonAddBelow={() => insertStep(index + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{steps.length > 0 && unassigned.length > 0 ? (\n\t\t\t\t<div className=\"fb-flow-unassigned\">\n\t\t\t\t\t<FieldLabel label={t(keys.flowUnassigned)} />\n\t\t\t\t\t<div className=\"fb-flow-unassigned__rows\">\n\t\t\t\t\t\t{unassigned.map((entry) => (\n\t\t\t\t\t\t\t<div key={entry.key} className=\"fb-flow-unassigned__row\">\n\t\t\t\t\t\t\t\t<span className=\"fb-flow-unassigned__name\">{entry.label}</span>\n\t\t\t\t\t\t\t\t<div className=\"fb-flow-unassigned__select\">\n\t\t\t\t\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\t\t\t\t\toptions={stepOptions}\n\t\t\t\t\t\t\t\t\t\tplaceholder={t(keys.flowAssignToStep)}\n\t\t\t\t\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\t\t\t\t\tonChange={(selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\t\t\t\t\t\t\t\t\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t\t\t\tif (chosen) assignUnassignedField(entry.key, chosen.value as string)\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<div className=\"fb-flow-builder__actions\">\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\tonClick={addStep}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\tAdd step\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":"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"}

package/dist/client/FormConditionField.js

@@ -1,12 +1,9 @@
 "use client";
+import { toStaticLabel } from "./toStaticLabel.js";
 import { ConditionBuilder } from "./ConditionBuilder.js";
 import { FieldLabel, useField } from "@payloadcms/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/FormConditionField.tsx
-const toStaticLabel = (label) => {
-	if (typeof label === "string") return label;
-	if (label && typeof label === "object") return label;
-};
 /**
 * The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own
 * path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.

package/dist/client/FormConditionField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormConditionField.js","names":[],"sources":["../../src/client/FormConditionField.tsx"],"sourcesContent":["'use client'\n\nimport { FieldLabel, useField } from '@payloadcms/ui'\nimport type { StaticLabel, Where } from 'payload'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport { ConditionBuilder } from './ConditionBuilder'\n\n/** Props: standard JSON field client props plus the `conditionTypes` map we pass via clientProps. */\nexport type FormConditionFieldProps = {\n\tpath?: string\n\tfield?: { label?: unknown; name?: string }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\nconst toStaticLabel = (label: unknown): StaticLabel | undefined => {\n\tif (typeof label === 'string') {\n\t\treturn label\n\t}\n\tif (label && typeof label === 'object') {\n\t\treturn label as Record<string, string>\n\t}\n\treturn undefined\n}\n\n/**\n * The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own\n * path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.\n */\nexport const FormConditionField = (props: FormConditionFieldProps) => {\n\tconst { path, setValue, value } = useField<Where>()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\treturn (\n\t\t<div className=\"field-type\" style={{ marginBlockEnd: '1rem' }}>\n\t\t\t<FieldLabel label={label} path={path} />\n\t\t\t<ConditionBuilder\n\t\t\t\tvalue={value ?? undefined}\n\t\t\t\tonChange={setValue}\n\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\tselfName={props.field?.name}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB,UAA4C;CAClE,IAAI,OAAO,UAAU,UACpB,OAAO;CAER,IAAI,SAAS,OAAO,UAAU,UAC7B,OAAO;AAGT;;;;;AAMA,MAAa,sBAAsB,UAAmC;CACrE,MAAM,EAAE,MAAM,UAAU,UAAU,SAAgB;CAElD,OACC,qBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,gBAAgB,OAAO;YAA5D,CACC,oBAAC,YAAD;GAAY,OAHA,cAAc,MAAM,OAAO,SAAS,MAAM,KAG/B;GAAS;EAAO,CAAA,GACvC,oBAAC,kBAAD;GACC,OAAO,SAAS,KAAA;GAChB,UAAU;GACV,gBAAgB,MAAM;GACtB,UAAU,MAAM,OAAO;EACvB,CAAA,CACG;;AAEP"}
+{"version":3,"file":"FormConditionField.js","names":[],"sources":["../../src/client/FormConditionField.tsx"],"sourcesContent":["'use client'\n\nimport { FieldLabel, useField } from '@payloadcms/ui'\nimport type { Where } from 'payload'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport { ConditionBuilder } from './ConditionBuilder'\nimport { toStaticLabel } from './toStaticLabel'\n\n/** Props: standard JSON field client props plus the `conditionTypes` map we pass via clientProps. */\nexport type FormConditionFieldProps = {\n\tpath?: string\n\tfield?: { label?: unknown; name?: string }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\n/**\n * The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own\n * path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.\n */\nexport const FormConditionField = (props: FormConditionFieldProps) => {\n\tconst { path, setValue, value } = useField<Where>()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\treturn (\n\t\t<div className=\"field-type\" style={{ marginBlockEnd: '1rem' }}>\n\t\t\t<FieldLabel label={label} path={path} />\n\t\t\t<ConditionBuilder\n\t\t\t\tvalue={value ?? undefined}\n\t\t\t\tonChange={setValue}\n\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\tselfName={props.field?.name}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,sBAAsB,UAAmC;CACrE,MAAM,EAAE,MAAM,UAAU,UAAU,SAAgB;CAElD,OACC,qBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,gBAAgB,OAAO;YAA5D,CACC,oBAAC,YAAD;GAAY,OAHA,cAAc,MAAM,OAAO,SAAS,MAAM,KAG/B;GAAS;EAAO,CAAA,GACvC,oBAAC,kBAAD;GACC,OAAO,SAAS,KAAA;GAChB,UAAU;GACV,gBAAgB,MAAM;GACtB,UAAU,MAAM,OAAO;EACvB,CAAA,CACG;;AAEP"}

package/dist/client/RecipientsSelect.d.ts

@@ -0,0 +1,35 @@
+import { TranslationKey } from "../translations/keys.js";
+
+//#region src/client/RecipientsSelect.d.ts
+type RecipientsSelectProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+    required?: boolean;
+    admin?: {
+      description?: unknown;
+      width?: string;
+    };
+  };
+  label?: unknown;
+  readOnly?: boolean; /** Endpoint subpath supplying preset address options (e.g. `'departments'`); omit for none. */
+  endpoint?: string; /** Allow free-typed emails (default true). */
+  allowCustom?: boolean; /** Offer the form's own fields as recipient tokens (default true). */
+  fieldTokens?: boolean; /** Field types eligible as tokens (default `['email']`). */
+  tokenFieldTypes?: string[]; /** Registered recipient sources, offered as their own option group (labels resolved for the admin locale). */
+  sources?: {
+    value: string;
+    label: string | Record<string, string>;
+  }[];
+  descriptionKey?: TranslationKey;
+};
+/**
+ * A creatable, multi-value recipient field: pick a department (preset options from `endpoint`), pick a
+ * form-field token (`{{field}}`, offered when `fieldTokens`), or type any email and press Enter
+ * (`allowCustom`). Renders as native Payload badges (drag-reorderable), stores a `string[]`, honors
+ * `admin.width` and the standard field props. Unknown or legacy stored values stay selectable.
+ */
+declare const RecipientsSelect: (props: RecipientsSelectProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { RecipientsSelect };
+//# sourceMappingURL=RecipientsSelect.d.ts.map