@10x-media/form-builder 0.1.0-beta.2 → 0.1.0-beta.21

package/dist/client/EndpointOptionsSelect.d.ts

@@ -0,0 +1,55 @@
+import { TranslationKey } from "../translations/keys.js";
+import { EndpointOptionsScope } from "./endpointOptions.js";
+
+//#region src/client/EndpointOptionsSelect.d.ts
+/** Standard text-field client props plus this component's `clientProps`. */
+type EndpointOptionsSelectProps = {
+  /** The field path within the document (Payload-injected, not the endpoint path). */path?: string;
+  field?: {
+    label?: unknown;
+    admin?: {
+      description?: unknown;
+      width?: string;
+    };
+  };
+  label?: unknown;
+  /**
+   * Endpoint subpath under the current document's collection API route; `'poll-options'` fetches
+   * `GET {routes.api}/{collectionSlug}/{id}/poll-options`. The endpoint must return
+   * `{ options: { label, value }[] }`.
+   */
+  endpoint: string;
+  /**
+   * What the options depend on; see {@link EndpointOptionsScope}. Default `'document'`. Pass
+   * `'request'` for an endpoint registered at the id-less path so options load while the document
+   * is still being created.
+   */
+  scope?: EndpointOptionsScope;
+  /**
+   * Field description as a translation key, resolved client-side. Payload drops `admin.description`
+   * functions from client fields, so a translated description must travel as a key; a static
+   * `admin.description` string still renders when this is unset.
+   */
+  descriptionKey?: TranslationKey; /** Mirrors ReactSelect's `isClearable`; defaults to true. */
+  isClearable?: boolean;
+  /**
+   * Render a multi-value select bound to a `string[]`, for a `hasMany` field (e.g. a poll outcome
+   * with tied winners). Default false: a single-value select bound to a `string`.
+   */
+  isMulti?: boolean;
+};
+/**
+ * A select whose options load from a plugin endpoint, for stored values whose valid choices only
+ * the server knows (e.g. a poll's source-resolved options). The pattern: pass `endpoint` via
+ * `clientProps`, the component reads the document id from `useDocumentInfo` and the API route
+ * from `useConfig`, fetches once with the admin cookie, and renders translated loading/error
+ * states. The stored value stays selectable even when it is missing from the fetched options (or
+ * the fetch failed), so opening an old document never silently drops data. Document scope (the
+ * default) skips the fetch until the document is saved, since the server cannot resolve options
+ * for it yet; request scope fetches immediately, create mode included, and ignores the id
+ * entirely so the first save never re-fetches.
+ */
+declare const EndpointOptionsSelect: (props: EndpointOptionsSelectProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { EndpointOptionsSelect };
+//# sourceMappingURL=EndpointOptionsSelect.d.ts.map

package/dist/client/EndpointOptionsSelect.js

@@ -0,0 +1,112 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { toStaticLabel } from "./toStaticLabel.js";
+import { buildEndpointOptionsUrl, parseEndpointOptions } from "./endpointOptions.js";
+import { FieldDescription, FieldLabel, ReactSelect, useConfig, useDocumentInfo, useField } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/client/EndpointOptionsSelect.tsx
+/**
+* A select whose options load from a plugin endpoint, for stored values whose valid choices only
+* the server knows (e.g. a poll's source-resolved options). The pattern: pass `endpoint` via
+* `clientProps`, the component reads the document id from `useDocumentInfo` and the API route
+* from `useConfig`, fetches once with the admin cookie, and renders translated loading/error
+* states. The stored value stays selectable even when it is missing from the fetched options (or
+* the fetch failed), so opening an old document never silently drops data. Document scope (the
+* default) skips the fetch until the document is saved, since the server cannot resolve options
+* for it yet; request scope fetches immediately, create mode included, and ignores the id
+* entirely so the first save never re-fetches.
+*/
+const EndpointOptionsSelect = (props) => {
+	const isMulti = props.isMulti === true;
+	const { path, setValue, value } = useField({ path: props.path });
+	const label = toStaticLabel(props.field?.label ?? props.label);
+	const { t } = useTranslation$1();
+	const description = props.descriptionKey ? t(props.descriptionKey) : toStaticLabel(props.field?.admin?.description);
+	const { id, collectionSlug } = useDocumentInfo();
+	const { config } = useConfig();
+	const apiRoute = config.routes.api;
+	const scope = props.scope ?? "document";
+	const docId = scope === "request" ? void 0 : id;
+	const [state, setState] = useState({ status: "idle" });
+	useEffect(() => {
+		if (!collectionSlug || scope === "document" && docId == null) return;
+		const controller = new AbortController();
+		const url = buildEndpointOptionsUrl({
+			apiRoute,
+			collectionSlug,
+			id: docId,
+			scope,
+			endpoint: props.endpoint
+		});
+		setState({ status: "loading" });
+		fetch(url, {
+			credentials: "include",
+			headers: { Accept: "application/json" },
+			signal: controller.signal
+		}).then(async (response) => {
+			if (!response.ok) throw new Error(`Options request failed with ${response.status}`);
+			setState({
+				status: "loaded",
+				options: parseEndpointOptions(await response.json())
+			});
+		}).catch(() => {
+			if (!controller.signal.aborted) setState({ status: "error" });
+		});
+		return () => controller.abort();
+	}, [
+		apiRoute,
+		collectionSlug,
+		docId,
+		scope,
+		props.endpoint
+	]);
+	const selectedValues = isMulti ? Array.isArray(value) ? value.filter((entry) => typeof entry === "string" && entry.length > 0) : [] : typeof value === "string" && value.length > 0 ? [value] : [];
+	const options = state.status === "loaded" ? state.options : [];
+	const missing = selectedValues.filter((selected) => !options.some((option) => option.value === selected)).map((selected) => ({
+		label: selected,
+		value: selected
+	}));
+	const allOptions = missing.length > 0 ? [...options, ...missing] : options;
+	const selectedOptions = selectedValues.map((selected) => allOptions.find((option) => option.value === selected)).filter((option) => option !== void 0);
+	const handleChange = (selected) => {
+		if (isMulti) {
+			setValue((Array.isArray(selected) ? selected : selected ? [selected] : []).map((option) => option.value));
+			return;
+		}
+		const chosen = Array.isArray(selected) ? selected[0] : selected;
+		setValue(chosen ? chosen.value : "");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type",
+		style: {
+			marginBlockEnd: "1rem",
+			...props.field?.admin?.width ? { "--field-width": props.field.admin.width } : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				label,
+				path
+			}),
+			/* @__PURE__ */ jsx(ReactSelect, {
+				options: allOptions,
+				value: isMulti ? selectedOptions : selectedOptions[0] ?? void 0,
+				isMulti,
+				isClearable: props.isClearable !== false,
+				isLoading: state.status === "loading",
+				placeholder: state.status === "loading" ? t(keys.endpointOptionsLoading) : void 0,
+				showError: state.status === "error",
+				onChange: handleChange
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: state.status === "error" ? t(keys.endpointOptionsError) : description,
+				path
+			})
+		]
+	});
+};
+//#endregion
+export { EndpointOptionsSelect };
+
+//# sourceMappingURL=EndpointOptionsSelect.js.map

package/dist/client/EndpointOptionsSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndpointOptionsSelect.js","names":["useTranslation"],"sources":["../../src/client/EndpointOptionsSelect.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tFieldDescription,\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tuseConfig,\n\tuseDocumentInfo,\n\tuseField,\n} from '@payloadcms/ui'\nimport { type CSSProperties, useEffect, useState } from 'react'\nimport { keys, type TranslationKey } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport {\n\tbuildEndpointOptionsUrl,\n\ttype EndpointOption,\n\ttype EndpointOptionsScope,\n\tparseEndpointOptions,\n} from './endpointOptions'\nimport { toStaticLabel } from './toStaticLabel'\n\n/** Standard text-field client props plus this component's `clientProps`. */\nexport type EndpointOptionsSelectProps = {\n\t/** The field path within the document (Payload-injected, not the endpoint path). */\n\tpath?: string\n\tfield?: { label?: unknown; admin?: { description?: unknown; width?: string } }\n\tlabel?: unknown\n\t/**\n\t * Endpoint subpath under the current document's collection API route; `'poll-options'` fetches\n\t * `GET {routes.api}/{collectionSlug}/{id}/poll-options`. The endpoint must return\n\t * `{ options: { label, value }[] }`.\n\t */\n\tendpoint: string\n\t/**\n\t * What the options depend on; see {@link EndpointOptionsScope}. Default `'document'`. Pass\n\t * `'request'` for an endpoint registered at the id-less path so options load while the document\n\t * is still being created.\n\t */\n\tscope?: EndpointOptionsScope\n\t/**\n\t * Field description as a translation key, resolved client-side. Payload drops `admin.description`\n\t * functions from client fields, so a translated description must travel as a key; a static\n\t * `admin.description` string still renders when this is unset.\n\t */\n\tdescriptionKey?: TranslationKey\n\t/** Mirrors ReactSelect's `isClearable`; defaults to true. */\n\tisClearable?: boolean\n\t/**\n\t * Render a multi-value select bound to a `string[]`, for a `hasMany` field (e.g. a poll outcome\n\t * with tied winners). Default false: a single-value select bound to a `string`.\n\t */\n\tisMulti?: boolean\n}\n\ntype FetchState =\n\t| { status: 'error' | 'idle' | 'loading'; options?: never }\n\t| { status: 'loaded'; options: EndpointOption[] }\n\n/**\n * A select whose options load from a plugin endpoint, for stored values whose valid choices only\n * the server knows (e.g. a poll's source-resolved options). The pattern: pass `endpoint` via\n * `clientProps`, the component reads the document id from `useDocumentInfo` and the API route\n * from `useConfig`, fetches once with the admin cookie, and renders translated loading/error\n * states. The stored value stays selectable even when it is missing from the fetched options (or\n * the fetch failed), so opening an old document never silently drops data. Document scope (the\n * default) skips the fetch until the document is saved, since the server cannot resolve options\n * for it yet; request scope fetches immediately, create mode included, and ignores the id\n * entirely so the first save never re-fetches.\n */\nexport const EndpointOptionsSelect = (props: EndpointOptionsSelectProps) => {\n\tconst isMulti = props.isMulti === true\n\tconst { path, setValue, value } = useField<string | string[]>({ path: props.path })\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst { t } = useTranslation()\n\tconst description = props.descriptionKey\n\t\t? t(props.descriptionKey)\n\t\t: toStaticLabel(props.field?.admin?.description)\n\tconst { id, collectionSlug } = useDocumentInfo()\n\tconst { config } = useConfig()\n\tconst apiRoute = config.routes.api\n\tconst scope = props.scope ?? 'document'\n\t// Request scope never puts the id in the URL; deriving undefined here keeps the effect from\n\t// re-fetching when the first save assigns one.\n\tconst docId = scope === 'request' ? undefined : id\n\tconst [state, setState] = useState<FetchState>({ status: 'idle' })\n\n\tuseEffect(() => {\n\t\tif (!collectionSlug || (scope === 'document' && docId == null)) {\n\t\t\treturn\n\t\t}\n\t\tconst controller = new AbortController()\n\t\tconst url = buildEndpointOptionsUrl({\n\t\t\tapiRoute,\n\t\t\tcollectionSlug,\n\t\t\tid: docId,\n\t\t\tscope,\n\t\t\tendpoint: props.endpoint,\n\t\t})\n\t\tsetState({ status: 'loading' })\n\t\tfetch(url, {\n\t\t\tcredentials: 'include',\n\t\t\theaders: { Accept: 'application/json' },\n\t\t\tsignal: controller.signal,\n\t\t})\n\t\t\t.then(async (response) => {\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tthrow new Error(`Options request failed with ${response.status}`)\n\t\t\t\t}\n\t\t\t\tsetState({ status: 'loaded', options: parseEndpointOptions(await response.json()) })\n\t\t\t})\n\t\t\t.catch(() => {\n\t\t\t\tif (!controller.signal.aborted) {\n\t\t\t\t\tsetState({ status: 'error' })\n\t\t\t\t}\n\t\t\t})\n\t\treturn () => controller.abort()\n\t}, [apiRoute, collectionSlug, docId, scope, props.endpoint])\n\n\t// A missing fetched option (or a failed fetch) must never silently drop a stored value, so every\n\t// selected value the options don't cover is kept selectable by its own label.\n\tconst selectedValues: string[] = isMulti\n\t\t? Array.isArray(value)\n\t\t\t? value.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)\n\t\t\t: []\n\t\t: typeof value === 'string' && value.length > 0\n\t\t\t? [value]\n\t\t\t: []\n\tconst options: ReactSelectOption[] = state.status === 'loaded' ? state.options : []\n\tconst missing = selectedValues\n\t\t.filter((selected) => !options.some((option) => option.value === selected))\n\t\t.map((selected) => ({ label: selected, value: selected }))\n\tconst allOptions = missing.length > 0 ? [...options, ...missing] : options\n\tconst selectedOptions = selectedValues\n\t\t.map((selected) => allOptions.find((option) => option.value === selected))\n\t\t.filter((option): option is ReactSelectOption => option !== undefined)\n\n\tconst handleChange = (selected: ReactSelectOption | ReactSelectOption[] | null) => {\n\t\tif (isMulti) {\n\t\t\tconst chosen = Array.isArray(selected) ? selected : selected ? [selected] : []\n\t\t\tsetValue(chosen.map((option) => option.value as string))\n\t\t\treturn\n\t\t}\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tsetValue(chosen ? (chosen.value as string) : '')\n\t}\n\n\tconst fieldStyle = props.field?.admin?.width\n\t\t? ({ '--field-width': props.field.admin.width } as CSSProperties)\n\t\t: undefined\n\n\treturn (\n\t\t<div className=\"field-type\" style={{ marginBlockEnd: '1rem', ...fieldStyle }}>\n\t\t\t<FieldLabel label={label} path={path} />\n\t\t\t<ReactSelect\n\t\t\t\toptions={allOptions}\n\t\t\t\tvalue={isMulti ? selectedOptions : (selectedOptions[0] ?? undefined)}\n\t\t\t\tisMulti={isMulti}\n\t\t\t\tisClearable={props.isClearable !== false}\n\t\t\t\tisLoading={state.status === 'loading'}\n\t\t\t\tplaceholder={state.status === 'loading' ? t(keys.endpointOptionsLoading) : undefined}\n\t\t\t\tshowError={state.status === 'error'}\n\t\t\t\tonChange={handleChange}\n\t\t\t/>\n\t\t\t<FieldDescription\n\t\t\t\tdescription={state.status === 'error' ? t(keys.endpointOptionsError) : description}\n\t\t\t\tpath={path}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"mappings":"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"}

package/dist/client/FieldBlockLabel.d.ts

@@ -0,0 +1,18 @@
+//#region src/client/FieldBlockLabel.d.ts
+/** Props threaded from each field block's `admin.components.Label` clientProps. */
+type FieldBlockLabelProps = {
+  /** The block's type-label key (e.g. `keys.fieldTypeText`), shown while the field has no label. */typeLabelKey?: string;
+};
+/**
+ * Row header for a field block. Payload's native collapsed-row header ends in the editable
+ * `blockName`, which reads "Untitled" until someone fills it; a field already carries a `label`, so
+ * this shows that instead, giving each row a "01 Text Full name" heading. Falls back to the block's
+ * type label while the field is still unnamed. Because a custom block label replaces the whole native
+ * header, it re-emits the row number and type the default would otherwise render.
+ */
+declare const FieldBlockLabel: ({
+  typeLabelKey
+}: FieldBlockLabelProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FieldBlockLabel };
+//# sourceMappingURL=FieldBlockLabel.d.ts.map

package/dist/client/FieldBlockLabel.js

@@ -0,0 +1,34 @@
+"use client";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { useRowLabel } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/FieldBlockLabel.tsx
+/**
+* Row header for a field block. Payload's native collapsed-row header ends in the editable
+* `blockName`, which reads "Untitled" until someone fills it; a field already carries a `label`, so
+* this shows that instead, giving each row a "01 Text Full name" heading. Falls back to the block's
+* type label while the field is still unnamed. Because a custom block label replaces the whole native
+* header, it re-emits the row number and type the default would otherwise render.
+*/
+const FieldBlockLabel = ({ typeLabelKey }) => {
+	const { data, rowNumber } = useRowLabel();
+	const { t } = useTranslation$1();
+	const typeLabel = typeLabelKey ? t(typeLabelKey) : "";
+	const fieldLabel = typeof data?.label === "string" && data.label.trim().length > 0 ? data.label.trim() : "";
+	const number = String((rowNumber ?? 0) + 1).padStart(2, "0");
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "0.5rem"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: { color: "var(--theme-elevation-500)" },
+			children: typeLabel ? `${number} ${typeLabel}` : number
+		}), fieldLabel ? /* @__PURE__ */ jsx("span", { children: fieldLabel }) : null]
+	});
+};
+//#endregion
+export { FieldBlockLabel };
+
+//# sourceMappingURL=FieldBlockLabel.js.map

package/dist/client/FieldBlockLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBlockLabel.js","names":["useTranslation"],"sources":["../../src/client/FieldBlockLabel.tsx"],"sourcesContent":["'use client'\n\nimport { useRowLabel } from '@payloadcms/ui'\nimport type { TranslationKey } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\n\n/** Props threaded from each field block's `admin.components.Label` clientProps. */\nexport type FieldBlockLabelProps = {\n\t/** The block's type-label key (e.g. `keys.fieldTypeText`), shown while the field has no label. */\n\ttypeLabelKey?: string\n}\n\ntype RowData = { label?: unknown }\n\n/**\n * Row header for a field block. Payload's native collapsed-row header ends in the editable\n * `blockName`, which reads \"Untitled\" until someone fills it; a field already carries a `label`, so\n * this shows that instead, giving each row a \"01 Text Full name\" heading. Falls back to the block's\n * type label while the field is still unnamed. Because a custom block label replaces the whole native\n * header, it re-emits the row number and type the default would otherwise render.\n */\nexport const FieldBlockLabel = ({ typeLabelKey }: FieldBlockLabelProps) => {\n\tconst { data, rowNumber } = useRowLabel<RowData>()\n\tconst { t } = useTranslation()\n\tconst typeLabel = typeLabelKey ? t(typeLabelKey as TranslationKey) : ''\n\tconst fieldLabel =\n\t\ttypeof data?.label === 'string' && data.label.trim().length > 0 ? data.label.trim() : ''\n\tconst number = String((rowNumber ?? 0) + 1).padStart(2, '0')\n\treturn (\n\t\t<span style={{ alignItems: 'center', display: 'inline-flex', gap: '0.5rem' }}>\n\t\t\t<span style={{ color: 'var(--theme-elevation-500)' }}>\n\t\t\t\t{typeLabel ? `${number} ${typeLabel}` : number}\n\t\t\t</span>\n\t\t\t{fieldLabel ? <span>{fieldLabel}</span> : null}\n\t\t</span>\n\t)\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,mBAAmB,EAAE,mBAAyC;CAC1E,MAAM,EAAE,MAAM,cAAc,YAAqB;CACjD,MAAM,EAAE,MAAMA,iBAAe;CAC7B,MAAM,YAAY,eAAe,EAAE,YAA8B,IAAI;CACrE,MAAM,aACL,OAAO,MAAM,UAAU,YAAY,KAAK,MAAM,KAAK,EAAE,SAAS,IAAI,KAAK,MAAM,KAAK,IAAI;CACvF,MAAM,SAAS,QAAQ,aAAa,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;CAC3D,OACC,qBAAC,QAAD;EAAM,OAAO;GAAE,YAAY;GAAU,SAAS;GAAe,KAAK;EAAS;YAA3E,CACC,oBAAC,QAAD;GAAM,OAAO,EAAE,OAAO,6BAA6B;aACjD,YAAY,GAAG,OAAO,GAAG,cAAc;EACnC,CAAA,GACL,aAAa,oBAAC,QAAD,EAAA,UAAO,WAAiB,CAAA,IAAI,IACrC;;AAER"}

package/dist/client/FieldNameSelect.d.ts

@@ -0,0 +1,37 @@
+import { TranslationKey } from "../translations/keys.js";
+
+//#region src/client/FieldNameSelect.d.ts
+/** Props: standard JSON/text field client props plus the `types` allow-list we pass via clientProps. */
+type FieldNameSelectProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+    admin?: {
+      description?: unknown;
+      width?: string;
+    };
+  };
+  label?: unknown;
+  /**
+   * Sibling `fields` blocks whose `blockType` is in this list populate the select's options. Omit to
+   * offer every named field regardless of type (a general field-target picker).
+   */
+  types?: string[];
+  /**
+   * Field description as a translation key, resolved client-side. Payload drops `admin.description`
+   * functions from client fields, so a translated description must travel as a key; a static
+   * `admin.description` string still renders when this is unset.
+   */
+  descriptionKey?: TranslationKey;
+};
+/**
+ * The `Field` mounted on a text config field (e.g. an action's `toField`) that should be authored
+ * by picking from the form's own fields rather than free-typing a name. Options come from the
+ * sibling `fields` blocks array, filtered to `types` when given (every named field otherwise); the
+ * stored value is kept selectable even if it no longer matches any field, so switching to this
+ * component never silently drops data.
+ */
+declare const FieldNameSelect: (props: FieldNameSelectProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FieldNameSelect };
+//# sourceMappingURL=FieldNameSelect.d.ts.map

package/dist/client/FieldNameSelect.js

@@ -0,0 +1,72 @@
+"use client";
+import { fieldNames, fieldNamesOfType } from "../fields/fieldNamesOfType.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { toStaticLabel } from "./toStaticLabel.js";
+import { reduceFieldsToValues } from "payload/shared";
+import { FieldDescription, FieldLabel, ReactSelect, useField, useFormFields } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+//#region src/client/FieldNameSelect.tsx
+const optionsFromData = (data, types) => {
+	const rows = Array.isArray(data.fields) ? data.fields : [];
+	const labels = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (!row || typeof row !== "object") continue;
+		const { name, label } = row;
+		if (typeof name === "string" && typeof label === "string" && label.length > 0) labels.set(name.trim(), label);
+	}
+	return (types ? fieldNamesOfType(data.fields, types) : fieldNames(data.fields)).map((name) => ({
+		label: labels.get(name) ?? name,
+		value: name
+	}));
+};
+/**
+* The `Field` mounted on a text config field (e.g. an action's `toField`) that should be authored
+* by picking from the form's own fields rather than free-typing a name. Options come from the
+* sibling `fields` blocks array, filtered to `types` when given (every named field otherwise); the
+* stored value is kept selectable even if it no longer matches any field, so switching to this
+* component never silently drops data.
+*/
+const FieldNameSelect = (props) => {
+	const { path, setValue, value } = useField({ path: props.path });
+	const label = toStaticLabel(props.field?.label ?? props.label);
+	const { t } = useTranslation$1();
+	const description = props.descriptionKey ? t(props.descriptionKey) : toStaticLabel(props.field?.admin?.description);
+	const optionsJson = useFormFields(([fields]) => JSON.stringify(optionsFromData(reduceFieldsToValues(fields, true), props.types)));
+	const options = useMemo(() => JSON.parse(optionsJson), [optionsJson]);
+	const allOptions = value && !options.some((option) => option.value === value) ? [...options, {
+		label: value,
+		value
+	}] : options;
+	const handleChange = (selected) => {
+		const chosen = Array.isArray(selected) ? selected[0] : selected;
+		setValue(chosen ? chosen.value : "");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type",
+		style: {
+			marginBlockEnd: "1rem",
+			...props.field?.admin?.width ? { "--field-width": props.field.admin.width } : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				label,
+				path
+			}),
+			/* @__PURE__ */ jsx(ReactSelect, {
+				options: allOptions,
+				value: allOptions.find((option) => option.value === value) ?? void 0,
+				isClearable: true,
+				onChange: handleChange
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description,
+				path
+			})
+		]
+	});
+};
+//#endregion
+export { FieldNameSelect };
+
+//# sourceMappingURL=FieldNameSelect.js.map

package/dist/client/FieldNameSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldNameSelect.js","names":["useTranslation"],"sources":["../../src/client/FieldNameSelect.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tFieldDescription,\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tuseField,\n\tuseFormFields,\n} from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport { type CSSProperties, useMemo } from 'react'\nimport { fieldNames, fieldNamesOfType } from '../fields/fieldNamesOfType'\nimport type { TranslationKey } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport type { FieldRow } from './synthesizeClientField'\nimport { toStaticLabel } from './toStaticLabel'\n\n/** Props: standard JSON/text field client props plus the `types` allow-list we pass via clientProps. */\nexport type FieldNameSelectProps = {\n\tpath?: string\n\tfield?: { label?: unknown; admin?: { description?: unknown; width?: string } }\n\tlabel?: unknown\n\t/**\n\t * Sibling `fields` blocks whose `blockType` is in this list populate the select's options. Omit to\n\t * offer every named field regardless of type (a general field-target picker).\n\t */\n\ttypes?: string[]\n\t/**\n\t * Field description as a translation key, resolved client-side. Payload drops `admin.description`\n\t * functions from client fields, so a translated description must travel as a key; a static\n\t * `admin.description` string still renders when this is unset.\n\t */\n\tdescriptionKey?: TranslationKey\n}\n\nconst optionsFromData = (data: Record<string, unknown>, types?: string[]): ReactSelectOption[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as unknown[]) : []\n\tconst labels = new Map<string, string>()\n\tfor (const row of rows) {\n\t\tif (!row || typeof row !== 'object') {\n\t\t\tcontinue\n\t\t}\n\t\tconst { name, label } = row as FieldRow\n\t\tif (typeof name === 'string' && typeof label === 'string' && label.length > 0) {\n\t\t\tlabels.set(name.trim(), label)\n\t\t}\n\t}\n\tconst names = types ? fieldNamesOfType(data.fields, types) : fieldNames(data.fields)\n\treturn names.map((name) => ({\n\t\tlabel: labels.get(name) ?? name,\n\t\tvalue: name,\n\t}))\n}\n\n/**\n * The `Field` mounted on a text config field (e.g. an action's `toField`) that should be authored\n * by picking from the form's own fields rather than free-typing a name. Options come from the\n * sibling `fields` blocks array, filtered to `types` when given (every named field otherwise); the\n * stored value is kept selectable even if it no longer matches any field, so switching to this\n * component never silently drops data.\n */\nexport const FieldNameSelect = (props: FieldNameSelectProps) => {\n\tconst { path, setValue, value } = useField<string>({ path: props.path })\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst { t } = useTranslation()\n\tconst description = props.descriptionKey\n\t\t? t(props.descriptionKey)\n\t\t: toStaticLabel(props.field?.admin?.description)\n\n\tconst optionsJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(optionsFromData(reduceFieldsToValues(fields, true), props.types))\n\t)\n\tconst options = useMemo(() => JSON.parse(optionsJson) as ReactSelectOption[], [optionsJson])\n\n\tconst allOptions =\n\t\tvalue && !options.some((option) => option.value === value)\n\t\t\t? [...options, { label: value, value }]\n\t\t\t: options\n\n\tconst handleChange = (selected: ReactSelectOption | ReactSelectOption[] | null) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tsetValue(chosen ? (chosen.value as string) : '')\n\t}\n\n\tconst fieldStyle = props.field?.admin?.width\n\t\t? ({ '--field-width': props.field.admin.width } as CSSProperties)\n\t\t: undefined\n\n\treturn (\n\t\t<div className=\"field-type\" style={{ marginBlockEnd: '1rem', ...fieldStyle }}>\n\t\t\t<FieldLabel label={label} path={path} />\n\t\t\t<ReactSelect\n\t\t\t\toptions={allOptions}\n\t\t\t\tvalue={allOptions.find((option) => option.value === value) ?? undefined}\n\t\t\t\tisClearable\n\t\t\t\tonChange={handleChange}\n\t\t\t/>\n\t\t\t<FieldDescription description={description} path={path} />\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;;AAoCA,MAAM,mBAAmB,MAA+B,UAA0C;CACjG,MAAM,OAAO,MAAM,QAAQ,KAAK,MAAM,IAAK,KAAK,SAAuB,CAAC;CACxE,MAAM,yBAAS,IAAI,IAAoB;CACvC,KAAK,MAAM,OAAO,MAAM;EACvB,IAAI,CAAC,OAAO,OAAO,QAAQ,UAC1B;EAED,MAAM,EAAE,MAAM,UAAU;EACxB,IAAI,OAAO,SAAS,YAAY,OAAO,UAAU,YAAY,MAAM,SAAS,GAC3E,OAAO,IAAI,KAAK,KAAK,GAAG,KAAK;CAE/B;CAEA,QADc,QAAQ,iBAAiB,KAAK,QAAQ,KAAK,IAAI,WAAW,KAAK,MAAM,GACtE,KAAK,UAAU;EAC3B,OAAO,OAAO,IAAI,IAAI,KAAK;EAC3B,OAAO;CACR,EAAE;AACH;;;;;;;;AASA,MAAa,mBAAmB,UAAgC;CAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,SAAiB,EAAE,MAAM,MAAM,KAAK,CAAC;CACvE,MAAM,QAAQ,cAAc,MAAM,OAAO,SAAS,MAAM,KAAK;CAC7D,MAAM,EAAE,MAAMA,iBAAe;CAC7B,MAAM,cAAc,MAAM,iBACvB,EAAE,MAAM,cAAc,IACtB,cAAc,MAAM,OAAO,OAAO,WAAW;CAEhD,MAAM,cAAc,eAAe,CAAC,YACnC,KAAK,UAAU,gBAAgB,qBAAqB,QAAQ,IAAI,GAAG,MAAM,KAAK,CAAC,CAChF;CACA,MAAM,UAAU,cAAc,KAAK,MAAM,WAAW,GAA0B,CAAC,WAAW,CAAC;CAE3F,MAAM,aACL,SAAS,CAAC,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,IACtD,CAAC,GAAG,SAAS;EAAE,OAAO;EAAO;CAAM,CAAC,IACpC;CAEJ,MAAM,gBAAgB,aAA6D;EAClF,MAAM,SAAS,MAAM,QAAQ,QAAQ,IAAI,SAAS,KAAK;EACvD,SAAS,SAAU,OAAO,QAAmB,EAAE;CAChD;CAMA,OACC,qBAAC,OAAD;EAAK,WAAU;EAAa,OAAO;GAAE,gBAAgB;GAAQ,GAL3C,MAAM,OAAO,OAAO,QACnC,EAAE,iBAAiB,MAAM,MAAM,MAAM,MAAM,IAC5C,KAAA;EAGyE;YAA3E;GACC,oBAAC,YAAD;IAAmB;IAAa;GAAO,CAAA;GACvC,oBAAC,aAAD;IACC,SAAS;IACT,OAAO,WAAW,MAAM,WAAW,OAAO,UAAU,KAAK,KAAK,KAAA;IAC9D,aAAA;IACA,UAAU;GACV,CAAA;GACD,oBAAC,kBAAD;IAA+B;IAAmB;GAAO,CAAA;EACrD;;AAEP"}

package/dist/client/FlowBuilder.d.ts

@@ -1,5 +1,4 @@
 import { ConditionFieldType } from "../conditions/fieldTypes.js";
-
 //#region src/client/FlowBuilder.d.ts
 type FlowBuilderProps = {
   path?: string;
@@ -7,7 +6,8 @@ type FlowBuilderProps = {
     label?: unknown;
   };
   label?: unknown;
-  conditionTypes: Record<string, ConditionFieldType>;
+  conditionTypes: Record<string, ConditionFieldType>; /** Bare (nameless) block slugs to their display label: an i18n key or a literal. */
+  bareTypeLabels?: Record<string, string>;
 };
 declare const FlowBuilder: (props: FlowBuilderProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion