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

package/dist/client/ConditionBuilder.js

@@ -0,0 +1,121 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { firstOperatorFor } from "../conditions/fieldTypes.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { operandFromRow } from "./synthesizeClientField.js";
+import { ConditionRow } from "./ConditionRow.js";
+import { reduceFieldsToValues, transformWhereQuery } from "payload/shared";
+import { Button, useFormFields } from "@payloadcms/ui";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/ConditionBuilder.tsx
+const toRow = (constraint) => {
+	const field = Object.keys(constraint)[0];
+	if (!field) return null;
+	const ops = constraint[field];
+	const operator = Object.keys(ops)[0];
+	if (!operator) return null;
+	return {
+		field,
+		operator,
+		value: ops[operator]
+	};
+};
+const fromRow = (row) => ({ [row.field]: { [row.operator]: row.value } });
+const readGroups = (value) => {
+	if (!value || Object.keys(value).length === 0) return [];
+	const canonical = transformWhereQuery(value);
+	return (Array.isArray(canonical.or) ? canonical.or : []).map((group) => {
+		return (Array.isArray(group.and) ? group.and : []).map((constraint) => toRow(constraint)).filter((row) => row !== null);
+	});
+};
+const writeGroups = (groups) => ({ or: groups.filter((group) => group.length > 0).map((group) => ({ and: group.map(fromRow) })) });
+const operandsFromData = (data, conditionTypes, selfName) => {
+	return (Array.isArray(data.fields) ? data.fields : []).map((row) => operandFromRow(row, conditionTypes)).filter((operand) => operand !== null && operand.name !== selfName);
+};
+const ConditionBuilder = ({ value, onChange, conditionTypes, selfName }) => {
+	const { t } = useTranslation$1();
+	const operandsJson = useFormFields(([fields]) => JSON.stringify(operandsFromData(reduceFieldsToValues(fields, true), conditionTypes, selfName)));
+	const operands = useMemo(() => JSON.parse(operandsJson), [operandsJson]);
+	const groups = readGroups(value);
+	const emit = (next) => onChange(writeGroups(next));
+	const addCondition = (groupIndex) => {
+		const first = operands[0];
+		if (!first) return;
+		const row = {
+			field: first.name,
+			operator: firstOperatorFor(first.conditionType),
+			value: void 0
+		};
+		emit(groups.length === 0 ? [[row]] : groups.map((group, index) => index === groupIndex ? [...group, row] : group));
+	};
+	const addOrGroup = () => {
+		const first = operands[0];
+		if (!first) return;
+		emit([...groups, [{
+			field: first.name,
+			operator: firstOperatorFor(first.conditionType),
+			value: void 0
+		}]]);
+	};
+	const updateRow = (groupIndex, rowIndex, row) => emit(groups.map((group, index) => index === groupIndex ? group.map((existing, position) => position === rowIndex ? row : existing) : group));
+	const removeRow = (groupIndex, rowIndex) => emit(groups.map((group, index) => index === groupIndex ? group.filter((_, position) => position !== rowIndex) : group).filter((group) => group.length > 0));
+	if (operands.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "fb-condition-builder__hint",
+		children: t(keys.conditionNoFields)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-condition-builder",
+		children: [groups.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "fb-condition-builder__hint",
+			children: t(keys.conditionEmpty)
+		}) : groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", {
+			className: "fb-condition-builder__group",
+			children: [
+				groupIndex > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "fb-condition-builder__or-label",
+					children: t(keys.conditionOr)
+				}) : null,
+				group.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", {
+					className: "fb-condition-builder__and-row",
+					children: [rowIndex > 0 ? /* @__PURE__ */ jsx("span", {
+						className: "fb-condition-builder__and-label",
+						children: t(keys.conditionAnd)
+					}) : null, /* @__PURE__ */ jsx(ConditionRow, {
+						condition: row,
+						operands,
+						onChange: (next) => updateRow(groupIndex, rowIndex, next),
+						onRemove: () => removeRow(groupIndex, rowIndex)
+					})]
+				}, rowIndex)),
+				/* @__PURE__ */ jsx("div", {
+					className: "fb-condition-builder__add-condition",
+					children: /* @__PURE__ */ jsx(Button, {
+						buttonStyle: "icon-label",
+						icon: "plus",
+						iconStyle: "with-border",
+						iconPosition: "left",
+						onClick: () => addCondition(groupIndex),
+						margin: false,
+						children: t(keys.conditionAddCondition)
+					})
+				})
+			]
+		}, groupIndex)), /* @__PURE__ */ jsx("div", {
+			className: "fb-condition-builder__actions",
+			children: /* @__PURE__ */ jsx(Button, {
+				buttonStyle: "icon-label",
+				icon: "plus",
+				iconStyle: "with-border",
+				iconPosition: "left",
+				onClick: () => groups.length === 0 ? addCondition(0) : addOrGroup(),
+				margin: false,
+				children: groups.length === 0 ? t(keys.conditionAddCondition) : t(keys.conditionAddOr)
+			})
+		})]
+	});
+};
+//#endregion
+export { ConditionBuilder };
+
+//# sourceMappingURL=ConditionBuilder.js.map

package/dist/client/ConditionBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.js","names":["useTranslation"],"sources":["../../src/client/ConditionBuilder.tsx"],"sourcesContent":["'use client'\n\nimport { Button, useFormFields } from '@payloadcms/ui'\nimport type { Operator, Where } from 'payload'\nimport { reduceFieldsToValues, transformWhereQuery } from 'payload/shared'\nimport { useMemo } from 'react'\nimport { type ConditionFieldType, firstOperatorFor } from '../conditions/fieldTypes'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { ConditionRow, type RowCondition } from './ConditionRow'\nimport { type ConditionOperand, type FieldRow, operandFromRow } from './synthesizeClientField'\n\nexport type ConditionBuilderProps = {\n\tvalue?: Where\n\tonChange: (next: Where) => void\n\tconditionTypes: Record<string, ConditionFieldType>\n\t/** This field's own machine name, excluded from the operand list (a field cannot condition on itself). */\n\tselfName?: string\n}\n\nconst toRow = (constraint: Record<string, unknown>): RowCondition | null => {\n\tconst field = Object.keys(constraint)[0]\n\tif (!field) {\n\t\treturn null\n\t}\n\tconst ops = constraint[field] as Record<string, unknown>\n\tconst operator = Object.keys(ops)[0] as Operator | undefined\n\tif (!operator) {\n\t\treturn null\n\t}\n\treturn { field, operator, value: ops[operator] }\n}\n\nconst fromRow = (row: RowCondition): Where => ({ [row.field]: { [row.operator]: row.value } })\n\nconst readGroups = (value: Where | undefined): RowCondition[][] => {\n\tif (!value || Object.keys(value).length === 0) {\n\t\treturn []\n\t}\n\tconst canonical = transformWhereQuery(value)\n\tconst or = Array.isArray(canonical.or) ? canonical.or : []\n\treturn or.map((group) => {\n\t\tconst and = Array.isArray((group as Where).and) ? ((group as Where).and as Where[]) : []\n\t\treturn and\n\t\t\t.map((constraint) => toRow(constraint as Record<string, unknown>))\n\t\t\t.filter((row): row is RowCondition => row !== null)\n\t})\n}\n\nconst writeGroups = (groups: RowCondition[][]): Where => ({\n\tor: groups.filter((group) => group.length > 0).map((group) => ({ and: group.map(fromRow) })),\n})\n\nconst operandsFromData = (\n\tdata: Record<string, unknown>,\n\tconditionTypes: Record<string, ConditionFieldType>,\n\tselfName: string | undefined\n): ConditionOperand[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows\n\t\t.map((row) => operandFromRow(row, conditionTypes))\n\t\t.filter((operand): operand is ConditionOperand => operand !== null && operand.name !== selfName)\n}\n\nexport const ConditionBuilder = ({\n\tvalue,\n\tonChange,\n\tconditionTypes,\n\tselfName,\n}: ConditionBuilderProps) => {\n\tconst { t } = useTranslation()\n\t// Serialize the operand list so the builder re-renders only when operands actually change (a field\n\t// added, renamed, retyped, or its options edited), not on every unrelated form-state update.\n\tconst operandsJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(operandsFromData(reduceFieldsToValues(fields, true), conditionTypes, selfName))\n\t)\n\tconst operands = useMemo(() => JSON.parse(operandsJson) as ConditionOperand[], [operandsJson])\n\n\tconst groups = readGroups(value)\n\tconst emit = (next: RowCondition[][]) => onChange(writeGroups(next))\n\n\tconst addCondition = (groupIndex: number) => {\n\t\tconst first = operands[0]\n\t\tif (!first) {\n\t\t\treturn\n\t\t}\n\t\tconst row: RowCondition = {\n\t\t\tfield: first.name,\n\t\t\toperator: firstOperatorFor(first.conditionType),\n\t\t\tvalue: undefined,\n\t\t}\n\t\temit(\n\t\t\tgroups.length === 0\n\t\t\t\t? [[row]]\n\t\t\t\t: groups.map((group, index) => (index === groupIndex ? [...group, row] : group))\n\t\t)\n\t}\n\n\tconst addOrGroup = () => {\n\t\tconst first = operands[0]\n\t\tif (!first) {\n\t\t\treturn\n\t\t}\n\t\temit([\n\t\t\t...groups,\n\t\t\t[{ field: first.name, operator: firstOperatorFor(first.conditionType), value: undefined }],\n\t\t])\n\t}\n\n\tconst updateRow = (groupIndex: number, rowIndex: number, row: RowCondition) =>\n\t\temit(\n\t\t\tgroups.map((group, index) =>\n\t\t\t\tindex === groupIndex\n\t\t\t\t\t? group.map((existing, position) => (position === rowIndex ? row : existing))\n\t\t\t\t\t: group\n\t\t\t)\n\t\t)\n\n\tconst removeRow = (groupIndex: number, rowIndex: number) =>\n\t\temit(\n\t\t\tgroups\n\t\t\t\t.map((group, index) =>\n\t\t\t\t\tindex === groupIndex ? group.filter((_, position) => position !== rowIndex) : group\n\t\t\t\t)\n\t\t\t\t.filter((group) => group.length > 0)\n\t\t)\n\n\tif (operands.length === 0) {\n\t\treturn <p className=\"fb-condition-builder__hint\">{t(keys.conditionNoFields)}</p>\n\t}\n\n\treturn (\n\t\t<div className=\"fb-condition-builder\">\n\t\t\t{groups.length === 0 ? (\n\t\t\t\t<p className=\"fb-condition-builder__hint\">{t(keys.conditionEmpty)}</p>\n\t\t\t) : (\n\t\t\t\tgroups.map((group, groupIndex) => (\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: groups are positional and never reordered\n\t\t\t\t\t<div key={groupIndex} className=\"fb-condition-builder__group\">\n\t\t\t\t\t\t{groupIndex > 0 ? (\n\t\t\t\t\t\t\t<div className=\"fb-condition-builder__or-label\">{t(keys.conditionOr)}</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{group.map((row, rowIndex) => (\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: rows are positional and never reordered\n\t\t\t\t\t\t\t<div key={rowIndex} className=\"fb-condition-builder__and-row\">\n\t\t\t\t\t\t\t\t{rowIndex > 0 ? (\n\t\t\t\t\t\t\t\t\t<span className=\"fb-condition-builder__and-label\">{t(keys.conditionAnd)}</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<ConditionRow\n\t\t\t\t\t\t\t\t\tcondition={row}\n\t\t\t\t\t\t\t\t\toperands={operands}\n\t\t\t\t\t\t\t\t\tonChange={(next) => updateRow(groupIndex, rowIndex, next)}\n\t\t\t\t\t\t\t\t\tonRemove={() => removeRow(groupIndex, rowIndex)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<div className=\"fb-condition-builder__add-condition\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\tonClick={() => addCondition(groupIndex)}\n\t\t\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{t(keys.conditionAddCondition)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))\n\t\t\t)}\n\t\t\t<div className=\"fb-condition-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={() => (groups.length === 0 ? addCondition(0) : addOrGroup())}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\t{groups.length === 0 ? t(keys.conditionAddCondition) : t(keys.conditionAddOr)}\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/ConditionRow.js

@@ -0,0 +1,150 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { conditionOperators, firstOperatorFor, operatorLabelKey, operatorValueShape } from "../conditions/fieldTypes.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { dateClientField, numberClientField, selectClientField, textClientField } from "./synthesizeClientField.js";
+import { Button, DateCondition, NumberCondition, ReactSelect, SelectCondition, TextCondition } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/ConditionRow.tsx
+/** ReactSelect's `onChange` hands back `Option | Option[]`; narrow it to the single chosen option. */
+const singleOption = (selected) => Array.isArray(selected) ? selected[0] : selected;
+const ConditionRow = ({ condition, operands, onChange, onRemove }) => {
+	const { t, i18n } = useTranslation$1();
+	const operand = operands.find((entry) => entry.name === condition.field);
+	const conditionType = operand?.conditionType ?? "text";
+	const operators = conditionOperators[conditionType];
+	const fieldOptions = operands.map((entry) => ({
+		label: entry.label,
+		value: entry.name
+	}));
+	const operatorOptions = operators.map((operator) => ({
+		label: i18n.t(operatorLabelKey(operator)),
+		value: operator
+	}));
+	const handleFieldChange = (selected) => {
+		const chosen = singleOption(selected);
+		const next = operands.find((entry) => entry.name === chosen?.value);
+		if (!next) return;
+		onChange({
+			field: next.name,
+			operator: firstOperatorFor(next.conditionType),
+			value: void 0
+		});
+	};
+	const handleOperatorChange = (selected) => {
+		const chosen = singleOption(selected);
+		if (!chosen) return;
+		const operator = chosen.value;
+		const keepValue = operatorValueShape(condition.operator) === operatorValueShape(operator);
+		onChange({
+			...condition,
+			operator,
+			value: keepValue ? condition.value : void 0
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-condition-row",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "fb-condition-row__field",
+				children: /* @__PURE__ */ jsx(ReactSelect, {
+					options: fieldOptions,
+					value: fieldOptions.find((option) => option.value === condition.field),
+					placeholder: t(keys.conditionSelectField),
+					isClearable: false,
+					onChange: handleFieldChange
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fb-condition-row__operator",
+				children: /* @__PURE__ */ jsx(ReactSelect, {
+					options: operatorOptions,
+					value: operatorOptions.find((option) => option.value === condition.operator),
+					disabled: !operand,
+					isClearable: false,
+					onChange: handleOperatorChange
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fb-condition-row__value",
+				children: /* @__PURE__ */ jsx(ConditionValue, {
+					conditionType,
+					operand,
+					operator: condition.operator,
+					value: condition.value,
+					onChange: (value) => onChange({
+						...condition,
+						value
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fb-condition-row__remove",
+				children: /* @__PURE__ */ jsx(Button, {
+					buttonStyle: "icon-label",
+					icon: "x",
+					onClick: onRemove,
+					"aria-label": t(keys.conditionRemove),
+					margin: false
+				})
+			})
+		]
+	});
+};
+const ConditionValue = ({ conditionType, operand, operator, value, onChange }) => {
+	const { t } = useTranslation$1();
+	if (conditionType === "checkbox" || operatorValueShape(operator) === "boolean") {
+		const options = [{
+			label: t(keys.conditionTrue),
+			value: "true"
+		}, {
+			label: t(keys.conditionFalse),
+			value: "false"
+		}];
+		const handleBooleanChange = (selected) => {
+			onChange(singleOption(selected)?.value === "true");
+		};
+		return /* @__PURE__ */ jsx(ReactSelect, {
+			options,
+			value: options.find((option) => String(option.value) === String(value)) ?? options[0],
+			isClearable: false,
+			onChange: handleBooleanChange
+		});
+	}
+	if (!operand) return null;
+	switch (conditionType) {
+		case "number": return /* @__PURE__ */ jsx(NumberCondition, {
+			disabled: false,
+			field: numberClientField(operand),
+			operator,
+			value,
+			onChange: (next) => onChange(next)
+		});
+		case "date": return /* @__PURE__ */ jsx(DateCondition, {
+			disabled: false,
+			field: dateClientField(operand),
+			operator,
+			value,
+			onChange: (next) => onChange(next)
+		});
+		case "select": return /* @__PURE__ */ jsx(SelectCondition, {
+			disabled: false,
+			field: selectClientField(operand),
+			operator,
+			options: operand.options ?? [],
+			value,
+			onChange: (next) => onChange(next)
+		});
+		default: return /* @__PURE__ */ jsx(TextCondition, {
+			disabled: false,
+			field: textClientField(operand),
+			operator,
+			value,
+			onChange: (next) => onChange(next)
+		});
+	}
+};
+//#endregion
+export { ConditionRow };
+
+//# sourceMappingURL=ConditionRow.js.map

package/dist/client/ConditionRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionRow.js","names":["useTranslation"],"sources":["../../src/client/ConditionRow.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tButton,\n\tDateCondition,\n\tNumberCondition,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tSelectCondition,\n\tTextCondition,\n} from '@payloadcms/ui'\nimport type { Operator } from 'payload'\nimport {\n\tconditionOperators,\n\tfirstOperatorFor,\n\toperatorLabelKey,\n\toperatorValueShape,\n} from '../conditions/fieldTypes'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport {\n\ttype ConditionOperand,\n\tdateClientField,\n\tnumberClientField,\n\tselectClientField,\n\ttextClientField,\n} from './synthesizeClientField'\n\nexport type RowCondition = { field: string; operator: Operator; value: unknown }\n\nexport type ConditionRowProps = {\n\tcondition: RowCondition\n\toperands: ConditionOperand[]\n\tonChange: (next: RowCondition) => void\n\tonRemove: () => void\n}\n\n/** ReactSelect's `onChange` hands back `Option | Option[]`; narrow it to the single chosen option. */\nconst singleOption = (\n\tselected: ReactSelectOption | ReactSelectOption[]\n): ReactSelectOption | undefined => (Array.isArray(selected) ? selected[0] : selected)\n\nexport const ConditionRow = ({ condition, operands, onChange, onRemove }: ConditionRowProps) => {\n\tconst { t, i18n } = useTranslation()\n\tconst operand = operands.find((entry) => entry.name === condition.field)\n\tconst conditionType = operand?.conditionType ?? 'text'\n\tconst operators = conditionOperators[conditionType]\n\n\tconst fieldOptions: ReactSelectOption[] = operands.map((entry) => ({\n\t\tlabel: entry.label,\n\t\tvalue: entry.name,\n\t}))\n\tconst operatorOptions: ReactSelectOption[] = operators.map((operator) => ({\n\t\tlabel: i18n.t(operatorLabelKey(operator)),\n\t\tvalue: operator,\n\t}))\n\n\tconst handleFieldChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = singleOption(selected)\n\t\tconst next = operands.find((entry) => entry.name === chosen?.value)\n\t\tif (!next) {\n\t\t\treturn\n\t\t}\n\t\tonChange({\n\t\t\tfield: next.name,\n\t\t\toperator: firstOperatorFor(next.conditionType),\n\t\t\tvalue: undefined,\n\t\t})\n\t}\n\n\tconst handleOperatorChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = singleOption(selected)\n\t\tif (!chosen) {\n\t\t\treturn\n\t\t}\n\t\tconst operator = chosen.value as Operator\n\t\tconst keepValue = operatorValueShape(condition.operator) === operatorValueShape(operator)\n\t\tonChange({ ...condition, operator, value: keepValue ? condition.value : undefined })\n\t}\n\n\treturn (\n\t\t<div className=\"fb-condition-row\">\n\t\t\t<div className=\"fb-condition-row__field\">\n\t\t\t\t<ReactSelect\n\t\t\t\t\toptions={fieldOptions}\n\t\t\t\t\tvalue={fieldOptions.find((option) => option.value === condition.field)}\n\t\t\t\t\tplaceholder={t(keys.conditionSelectField)}\n\t\t\t\t\tisClearable={false}\n\t\t\t\t\tonChange={handleFieldChange}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"fb-condition-row__operator\">\n\t\t\t\t<ReactSelect\n\t\t\t\t\toptions={operatorOptions}\n\t\t\t\t\tvalue={operatorOptions.find((option) => option.value === condition.operator)}\n\t\t\t\t\tdisabled={!operand}\n\t\t\t\t\tisClearable={false}\n\t\t\t\t\tonChange={handleOperatorChange}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"fb-condition-row__value\">\n\t\t\t\t<ConditionValue\n\t\t\t\t\tconditionType={conditionType}\n\t\t\t\t\toperand={operand}\n\t\t\t\t\toperator={condition.operator}\n\t\t\t\t\tvalue={condition.value}\n\t\t\t\t\tonChange={(value) => onChange({ ...condition, value })}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"fb-condition-row__remove\">\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\ticon=\"x\"\n\t\t\t\t\tonClick={onRemove}\n\t\t\t\t\taria-label={t(keys.conditionRemove)}\n\t\t\t\t\tmargin={false}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype ConditionValueProps = {\n\tconditionType: ConditionOperand['conditionType']\n\toperand?: ConditionOperand\n\toperator: Operator\n\tvalue: unknown\n\tonChange: (value: unknown) => void\n}\n\nconst ConditionValue = ({\n\tconditionType,\n\toperand,\n\toperator,\n\tvalue,\n\tonChange,\n}: ConditionValueProps) => {\n\tconst { t } = useTranslation()\n\tif (conditionType === 'checkbox' || operatorValueShape(operator) === 'boolean') {\n\t\tconst options: ReactSelectOption[] = [\n\t\t\t{ label: t(keys.conditionTrue), value: 'true' },\n\t\t\t{ label: t(keys.conditionFalse), value: 'false' },\n\t\t]\n\t\tconst handleBooleanChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\t\tconst chosen = singleOption(selected)\n\t\t\tonChange(chosen?.value === 'true')\n\t\t}\n\t\treturn (\n\t\t\t<ReactSelect\n\t\t\t\toptions={options}\n\t\t\t\tvalue={options.find((option) => String(option.value) === String(value)) ?? options[0]}\n\t\t\t\tisClearable={false}\n\t\t\t\tonChange={handleBooleanChange}\n\t\t\t/>\n\t\t)\n\t}\n\tif (!operand) {\n\t\treturn null\n\t}\n\tswitch (conditionType) {\n\t\tcase 'number':\n\t\t\treturn (\n\t\t\t\t<NumberCondition\n\t\t\t\t\tdisabled={false}\n\t\t\t\t\tfield={numberClientField(operand)}\n\t\t\t\t\toperator={operator}\n\t\t\t\t\tvalue={value as number | number[]}\n\t\t\t\t\tonChange={(next: string) => onChange(next)}\n\t\t\t\t/>\n\t\t\t)\n\t\tcase 'date':\n\t\t\treturn (\n\t\t\t\t<DateCondition\n\t\t\t\t\tdisabled={false}\n\t\t\t\t\tfield={dateClientField(operand)}\n\t\t\t\t\toperator={operator}\n\t\t\t\t\tvalue={value as Date | string}\n\t\t\t\t\tonChange={(next: Date | string) => onChange(next)}\n\t\t\t\t/>\n\t\t\t)\n\t\tcase 'select':\n\t\t\treturn (\n\t\t\t\t<SelectCondition\n\t\t\t\t\tdisabled={false}\n\t\t\t\t\tfield={selectClientField(operand)}\n\t\t\t\t\toperator={operator}\n\t\t\t\t\toptions={operand.options ?? []}\n\t\t\t\t\tvalue={value as string}\n\t\t\t\t\tonChange={(next: string) => onChange(next)}\n\t\t\t\t/>\n\t\t\t)\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<TextCondition\n\t\t\t\t\tdisabled={false}\n\t\t\t\t\tfield={textClientField(operand)}\n\t\t\t\t\toperator={operator}\n\t\t\t\t\tvalue={value as string | string[]}\n\t\t\t\t\tonChange={(next: string) => onChange(next)}\n\t\t\t\t/>\n\t\t\t)\n\t}\n}\n"],"mappings":"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"}

package/dist/client/FlowBuilder.d.ts

@@ -0,0 +1,15 @@
+import { ConditionFieldType } from "../conditions/fieldTypes.js";
+
+//#region src/client/FlowBuilder.d.ts
+type FlowBuilderProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+  };
+  label?: unknown;
+  conditionTypes: Record<string, ConditionFieldType>;
+};
+declare const FlowBuilder: (props: FlowBuilderProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FlowBuilder };
+//# sourceMappingURL=FlowBuilder.d.ts.map