@verbb/plugin-kit-react 1.0.0

package/dist/forms/fields/DateTimeField.js

@@ -0,0 +1,53 @@
+import { DatePicker } from "../../components/DatePicker.js";
+import { TimePicker } from "../../components/TimePicker.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/forms/fields/DateTimeField.tsx
+var DateTimeField = ({ form, field }) => {
+	const { value, setValue, errors } = useEngineField(form, field.name);
+	const initialDate = value ? new Date(String(value)) : null;
+	const initialTime = initialDate ? initialDate.toTimeString().slice(0, 5) : "";
+	const [dateValue, setDateValue] = useState(initialDate);
+	const [timeValue, setTimeValue] = useState(initialTime);
+	useEffect(() => {
+		let nextValue = "";
+		if (dateValue && timeValue) nextValue = (/* @__PURE__ */ new Date(`${dateValue.toISOString().split("T")[0]}T${timeValue}`)).toISOString();
+		else if (dateValue) nextValue = (/* @__PURE__ */ new Date(`${dateValue.toISOString().split("T")[0]}T00:00:00`)).toISOString();
+		if (String(value ?? "") !== nextValue) setValue(nextValue);
+	}, [
+		dateValue,
+		timeValue,
+		setValue,
+		value
+	]);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(DatePicker, {
+				value: dateValue,
+				onValueChange: (nextValue) => {
+					setDateValue(nextValue ?? null);
+				},
+				isInvalid: errors.length > 0
+			}), /* @__PURE__ */ jsx(TimePicker, {
+				value: timeValue,
+				onValueChange: setTimeValue,
+				isInvalid: errors.length > 0
+			})]
+		})
+	});
+};
+//#endregion
+export { DateTimeField };
+
+//# sourceMappingURL=DateTimeField.js.map

package/dist/forms/fields/DateTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.js","names":[],"sources":["../../../src/forms/fields/DateTimeField.tsx"],"sourcesContent":["import { DatePicker, TimePicker } from '@verbb/plugin-kit-react/components';\nimport { useEffect, useState } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype DateTimeFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n    };\n};\n\nexport const DateTimeField = ({ form, field }: DateTimeFieldProps) => {\n    const { value, setValue, errors } = useEngineField(form, field.name);\n    const initialDate = value ? new Date(String(value)) : null;\n    const initialTime = initialDate ? initialDate.toTimeString().slice(0, 5) : '';\n\n    const [dateValue, setDateValue] = useState<Date | null>(initialDate);\n    const [timeValue, setTimeValue] = useState<string>(initialTime);\n\n    useEffect(() => {\n        let nextValue = '';\n\n        if (dateValue && timeValue) {\n            const combinedDateTime = new Date(`${dateValue.toISOString().split('T')[0]}T${timeValue}`);\n            nextValue = combinedDateTime.toISOString();\n        } else if (dateValue) {\n            const dateOnly = new Date(`${dateValue.toISOString().split('T')[0]}T00:00:00`);\n            nextValue = dateOnly.toISOString();\n        }\n\n        if (String(value ?? '') !== nextValue) {\n            setValue(nextValue);\n        }\n    }, [dateValue, timeValue, setValue, value]);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            <div className=\"flex gap-2\">\n                <DatePicker\n                    value={dateValue}\n                    onValueChange={(nextValue) => { setDateValue(nextValue ?? null); }}\n                    isInvalid={errors.length > 0}\n                />\n                <TimePicker\n                    value={timeValue}\n                    onValueChange={setTimeValue}\n                    isInvalid={errors.length > 0}\n                />\n            </div>\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EAAE,OAAO,UAAU,WAAW,eAAe,MAAM,MAAM,KAAK;CACpE,MAAM,cAAc,QAAQ,IAAI,KAAK,OAAO,MAAM,CAAC,GAAG;CACtD,MAAM,cAAc,cAAc,YAAY,cAAc,CAAC,MAAM,GAAG,EAAE,GAAG;CAE3E,MAAM,CAAC,WAAW,gBAAgB,SAAsB,YAAY;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAiB,YAAY;AAE/D,iBAAgB;EACZ,IAAI,YAAY;AAEhB,MAAI,aAAa,UAEb,8BAAY,IADiB,KAAK,GAAG,UAAU,aAAa,CAAC,MAAM,IAAI,CAAC,GAAG,GAAG,YAClE,EAAiB,aAAa;WACnC,UAEP,8BAAY,IADS,KAAK,GAAG,UAAU,aAAa,CAAC,MAAM,IAAI,CAAC,GAAG,WACvD,EAAS,aAAa;AAGtC,MAAI,OAAO,SAAS,GAAG,KAAK,UACxB,UAAS,UAAU;IAExB;EAAC;EAAW;EAAW;EAAU;EAAM,CAAC;AAE3C,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,qBAAC,OAAD;GAAK,WAAU;aAAf,CACI,oBAAC,YAAD;IACI,OAAO;IACP,gBAAgB,cAAc;AAAE,kBAAa,aAAa,KAAK;;IAC/D,WAAW,OAAO,SAAS;IAC7B,CAAA,EACF,oBAAC,YAAD;IACI,OAAO;IACP,eAAe;IACf,WAAW,OAAO,SAAS;IAC7B,CAAA,CACA;;EACI,CAAA"}

package/dist/forms/fields/EditableTableField.d.ts

@@ -0,0 +1,22 @@
+import { EditableTable } from '../../components';
+import { ComponentProps } from 'react';
+import { SchemaFormEngineApi } from '../engine/context';
+type EditableTableFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        required?: boolean;
+        columns: ComponentProps<typeof EditableTable>['columns'];
+        addRowLabel?: string;
+        allowReorder?: boolean;
+        allowAdd?: boolean;
+        allowDelete?: boolean;
+        newRowDefaults?: Record<string, unknown>;
+    };
+};
+export declare const EditableTableField: ({ form, field }: EditableTableFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableTableField.d.ts.map

package/dist/forms/fields/EditableTableField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableTableField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/EditableTableField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,uBAAuB,GAAG;IAC3B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;QACzD,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KAC5C,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,iBAAiB,uBAAuB,4CAoC1E,CAAC"}

package/dist/forms/fields/EditableTableField.js

@@ -0,0 +1,37 @@
+import { EditableTable } from "../../components/EditableTable.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEditableTableFieldBinding } from "../useEditableTableFieldBinding.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/EditableTableField.tsx
+var EditableTableField = ({ form, field }) => {
+	const { rows, setRows, errors, cellErrors, handleCellChange } = useEditableTableFieldBinding(form, field.name);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: /* @__PURE__ */ jsx(EditableTable, {
+			columns: field.columns,
+			rows,
+			onChange: setRows,
+			onCellChange: handleCellChange,
+			addRowLabel: field.addRowLabel,
+			allowReorder: field.allowReorder,
+			allowAdd: field.allowAdd,
+			allowDelete: field.allowDelete,
+			newRowDefaults: field.newRowDefaults,
+			className: "",
+			fieldName: field.name,
+			cellErrors,
+			modifyColumn: void 0
+		})
+	});
+};
+//#endregion
+export { EditableTableField };
+
+//# sourceMappingURL=EditableTableField.js.map

package/dist/forms/fields/EditableTableField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableTableField.js","names":[],"sources":["../../../src/forms/fields/EditableTableField.tsx"],"sourcesContent":["import { EditableTable } from '@verbb/plugin-kit-react/components';\nimport type { ComponentProps } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEditableTableFieldBinding } from '../useEditableTableFieldBinding';\n\ntype EditableTableFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n        columns: ComponentProps<typeof EditableTable>['columns'];\n        addRowLabel?: string;\n        allowReorder?: boolean;\n        allowAdd?: boolean;\n        allowDelete?: boolean;\n        newRowDefaults?: Record<string, unknown>;\n    };\n};\n\nexport const EditableTableField = ({ form, field }: EditableTableFieldProps) => {\n    const {\n        rows,\n        setRows,\n        errors,\n        cellErrors,\n        handleCellChange,\n    } = useEditableTableFieldBinding(form, field.name);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            <EditableTable\n                columns={field.columns}\n                rows={rows}\n                onChange={setRows}\n                onCellChange={handleCellChange}\n                addRowLabel={field.addRowLabel}\n                allowReorder={field.allowReorder}\n                allowAdd={field.allowAdd}\n                allowDelete={field.allowDelete}\n                newRowDefaults={field.newRowDefaults}\n                className=\"\"\n                fieldName={field.name}\n                cellErrors={cellErrors}\n                modifyColumn={undefined}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;AAuBA,IAAa,sBAAsB,EAAE,MAAM,YAAqC;CAC5E,MAAM,EACF,MACA,SACA,QACA,YACA,qBACA,6BAA6B,MAAM,MAAM,KAAK;AAElD,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,oBAAC,eAAD;GACI,SAAS,MAAM;GACT;GACN,UAAU;GACV,cAAc;GACd,aAAa,MAAM;GACnB,cAAc,MAAM;GACpB,UAAU,MAAM;GAChB,aAAa,MAAM;GACnB,gBAAgB,MAAM;GACtB,WAAU;GACV,WAAW,MAAM;GACL;GACZ,cAAc,KAAA;GAChB,CAAA;EACQ,CAAA"}

package/dist/forms/fields/ElementSelectField.d.ts

@@ -0,0 +1,20 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type ElementSelectFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        required?: boolean;
+        elementType?: string;
+        sources?: string[];
+        criteria?: Record<string, unknown>;
+        limit?: number;
+        elementSelectOptionsAction?: string;
+        elementSelectStorageKeyPrefix?: string;
+    };
+};
+export declare const ElementSelectField: ({ form, field }: ElementSelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ElementSelectField.d.ts.map

package/dist/forms/fields/ElementSelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementSelectField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/ElementSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAW7D,KAAK,uBAAuB,GAAG;IAC3B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,6BAA6B,CAAC,EAAE,MAAM,CAAC;KAC1C,CAAC;CACL,CAAC;AAkEF,eAAO,MAAM,kBAAkB,GAAI,iBAAiB,uBAAuB,4CAsL1E,CAAC"}

package/dist/forms/fields/ElementSelectField.js

@@ -0,0 +1,215 @@
+import { cn } from "../../utils/classes.js";
+import { hostOpenElementSelector, hostRequest } from "../../utils/hostBridge.js";
+import "../../utils/index.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { Spinner } from "../../components/Spinner.js";
+import { Status } from "../../components/Status.js";
+import "../../components/index.js";
+import { Button } from "../../components/Button.js";
+import { FieldLayout } from "../Field.js";
+import useElementStoreV2 from "../store/element-store.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faXmark } from "@fortawesome/pro-solid-svg-icons";
+//#region src/forms/fields/ElementSelectField.tsx
+var isRecord = (value) => {
+	return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+};
+var isElementReference = (value) => {
+	return isRecord(value) && typeof value.id === "number" && typeof value.siteId === "number";
+};
+var normalizeSelectedElement = (element, elementType) => {
+	const url = typeof element.$element?.data === "function" ? element.$element.data("cp-url") : null;
+	return {
+		id: element.id,
+		siteId: element.siteId,
+		label: element.label,
+		url: typeof url === "string" ? url : null,
+		status: element.status ?? null,
+		elementType
+	};
+};
+var normalizeStoredElement = (value, elementType) => {
+	if (!isRecord(value) || typeof value.id !== "number" || typeof value.siteId !== "number") return null;
+	return {
+		id: value.id,
+		siteId: value.siteId,
+		label: typeof value.label === "string" ? value.label : `Element ${value.id}`,
+		url: typeof value.url === "string" ? value.url : null,
+		status: typeof value.status === "string" ? value.status : null,
+		elementType: typeof value.elementType === "string" ? value.elementType : elementType
+	};
+};
+var ElementSelectField = ({ form, field }) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const { getElementData, setElementData, hasElementData } = useElementStoreV2();
+	const t = useTranslation();
+	const selectedElements = getElementData(field.name) || [];
+	const errors = form?.getErrorMapFields?.()[field.name] || [];
+	const { elementSelectOptionsAction } = field;
+	const { elementSelectStorageKeyPrefix } = field;
+	const handleButtonClick = () => {
+		const elementType = field.elementType || "craft\\elements\\Entry";
+		if (!elementSelectStorageKeyPrefix) throw new Error(`ElementSelectField requires "elementSelectStorageKeyPrefix" for "${field.name}".`);
+		hostOpenElementSelector(elementType, {
+			storageKey: `${elementSelectStorageKeyPrefix}.${field.name}.${elementType}`,
+			sources: field.sources || ["*"],
+			criteria: field.criteria || {},
+			multiSelect: field.limit ? false : true,
+			limit: field.limit || null,
+			autoFocusSearchBox: false,
+			onShow: () => {
+				document.body.style.pointerEvents = "";
+			},
+			onSelect: (elements) => {
+				const newElements = elements.map((element) => {
+					return normalizeSelectedElement(element, elementType);
+				});
+				const updatedElements = [...selectedElements, ...newElements];
+				setElementData(field.name, updatedElements);
+				const formValue = updatedElements.map((element) => {
+					return {
+						id: element.id,
+						siteId: element.siteId
+					};
+				});
+				form.setFieldValue(field.name, formValue);
+			},
+			closeOtherModals: false
+		});
+	};
+	const removeElement = (elementId) => {
+		const updatedElements = selectedElements.filter((el) => {
+			return el.id !== elementId;
+		});
+		setElementData(field.name, updatedElements);
+		const formValue = updatedElements.map((element) => {
+			return {
+				id: element.id,
+				siteId: element.siteId
+			};
+		});
+		form.setFieldValue(field.name, formValue);
+	};
+	useEffect(() => {
+		const loadElements = async () => {
+			if (field.name && !hasElementData(field.name)) {
+				const currentValue = form.getFieldValue(field.name);
+				if (currentValue && Array.isArray(currentValue) && currentValue.length > 0) {
+					const currentReferences = currentValue.filter(isElementReference);
+					if (!currentReferences.length) return;
+					setIsLoading(true);
+					try {
+						if (!elementSelectOptionsAction) throw new Error(`ElementSelectField requires "elementSelectOptionsAction" for "${field.name}".`);
+						const response = await hostRequest("POST", elementSelectOptionsAction, { data: { elements: currentReferences } });
+						if (response.data && Array.isArray(response.data)) {
+							const normalizedElements = response.data.map((item) => {
+								return normalizeStoredElement(item, field.elementType || "craft\\elements\\Entry");
+							}).filter((item) => {
+								return item !== null;
+							});
+							setElementData(field.name, normalizedElements);
+						}
+					} catch {
+						const fallbackElements = currentReferences.map((item) => {
+							return {
+								id: item.id,
+								siteId: item.siteId,
+								label: `Element ${item.id}`,
+								url: null,
+								status: null,
+								elementType: field.elementType || "craft\\elements\\Entry"
+							};
+						});
+						setElementData(field.name, fallbackElements);
+					} finally {
+						setIsLoading(false);
+					}
+				}
+			}
+		};
+		loadElements();
+	}, [
+		form,
+		field.name,
+		field.elementType,
+		elementSelectOptionsAction,
+		getElementData,
+		setElementData,
+		hasElementData
+	]);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [
+				isLoading && /* @__PURE__ */ jsxs("div", {
+					className: "relative flex items-center text-sm text-gray-500 min-h-[34px]",
+					children: [/* @__PURE__ */ jsx(Spinner, {
+						size: "xs",
+						variant: "default",
+						className: "absolute left-0"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "ml-6",
+						children: t("Loading elements...")
+					})]
+				}),
+				selectedElements.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-2",
+					children: selectedElements.map((element) => {
+						return /* @__PURE__ */ jsxs("div", {
+							className: cn("flex items-center gap-1.5", "border border-gray-200 rounded-lg text-sm", "px-2 py-1.5", "bg-[rgb(243,247,252)]", "shadow-sm"),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [element.status && /* @__PURE__ */ jsx(Status, { status: element.status }), /* @__PURE__ */ jsx("a", {
+									href: element.url,
+									children: /* @__PURE__ */ jsx("span", { children: element.label })
+								})]
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "transparent",
+								size: "xs",
+								onClick: () => {
+									return removeElement(element.id);
+								},
+								className: cn("-mr-1"),
+								"aria-label": t("Remove element"),
+								children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+									icon: faXmark,
+									className: "size-[15px]"
+								})
+							})]
+						}, `${element.id}-${element.siteId}`);
+					})
+				}),
+				(!field.limit || selectedElements.length < field.limit) && !isLoading && /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "dashed",
+					"aria-label": t("Choose"),
+					className: cn("pl-1.5", errors.length > 0 && ["border-rose-600!", "focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!"]),
+					onClick: handleButtonClick,
+					children: [
+						/* @__PURE__ */ jsx(FontAwesomeIcon, {
+							icon: faPlus,
+							className: "size-[16px]"
+						}),
+						" ",
+						t("Choose")
+					]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ElementSelectField };
+
+//# sourceMappingURL=ElementSelectField.js.map

package/dist/forms/fields/ElementSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementSelectField.js","names":[],"sources":["../../../src/forms/fields/ElementSelectField.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Button, Spinner, Status } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport useElementStore from '../store/element-store';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport {\n    cn,\n    hostOpenElementSelector,\n    hostRequest,\n} from '@verbb/plugin-kit-react/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus, faXmark } from '@fortawesome/pro-solid-svg-icons';\n\ntype ElementSelectFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n        elementType?: string;\n        sources?: string[];\n        criteria?: Record<string, unknown>;\n        limit?: number;\n        elementSelectOptionsAction?: string;\n        elementSelectStorageKeyPrefix?: string;\n    };\n};\n\ntype Element = {\n    id: number;\n    siteId: number;\n    label: string;\n    url: string | null;\n    status: string | null;\n    elementType: string;\n};\n\ntype ElementReference = {\n    id: number;\n    siteId: number;\n};\n\ntype HostElementDataAccessor = {\n    data: (key: string) => unknown;\n};\n\ntype HostSelectedElement = {\n    id: number;\n    siteId: number;\n    label: string;\n    status?: string | null;\n    $element?: HostElementDataAccessor;\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> => {\n    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);\n};\n\nconst isElementReference = (value: unknown): value is ElementReference => {\n    return isRecord(value) && typeof value.id === 'number' && typeof value.siteId === 'number';\n};\n\nconst normalizeSelectedElement = (element: HostSelectedElement, elementType: string): Element => {\n    const url = typeof element.$element?.data === 'function'\n        ? element.$element.data('cp-url')\n        : null;\n\n    return {\n        id: element.id,\n        siteId: element.siteId,\n        label: element.label,\n        url: typeof url === 'string' ? url : null,\n        status: element.status ?? null,\n        elementType,\n    };\n};\n\nconst normalizeStoredElement = (value: unknown, elementType: string): Element | null => {\n    if (!isRecord(value) || typeof value.id !== 'number' || typeof value.siteId !== 'number') {\n        return null;\n    }\n\n    return {\n        id: value.id,\n        siteId: value.siteId,\n        label: typeof value.label === 'string' ? value.label : `Element ${value.id}`,\n        url: typeof value.url === 'string' ? value.url : null,\n        status: typeof value.status === 'string' ? value.status : null,\n        elementType: typeof value.elementType === 'string' ? value.elementType : elementType,\n    };\n};\n\nexport const ElementSelectField = ({ form, field }: ElementSelectFieldProps) => {\n    const [isLoading, setIsLoading] = useState(false);\n    const { getElementData, setElementData, hasElementData } = useElementStore();\n    const t = useTranslation();\n    const selectedElements = getElementData<Element[]>(field.name) || [];\n    const errors = form?.getErrorMapFields?.()[field.name] || [];\n    const { elementSelectOptionsAction } = field;\n    const { elementSelectStorageKeyPrefix } = field;\n\n    const handleButtonClick = () => {\n        const elementType = field.elementType || 'craft\\\\elements\\\\Entry';\n\n        if (!elementSelectStorageKeyPrefix) {\n            throw new Error(`ElementSelectField requires \"elementSelectStorageKeyPrefix\" for \"${field.name}\".`);\n        }\n\n        hostOpenElementSelector(elementType, {\n            storageKey: `${elementSelectStorageKeyPrefix}.${field.name}.${elementType}`,\n            sources: field.sources || ['*'],\n            criteria: field.criteria || {},\n            multiSelect: field.limit ? false : true,\n            limit: field.limit || null,\n            autoFocusSearchBox: false,\n            onShow: () => {\n                document.body.style.pointerEvents = '';\n            },\n            onSelect: (elements: HostSelectedElement[]) => {\n                const newElements = elements.map((element) => {\n                    return normalizeSelectedElement(element, elementType);\n                });\n\n                const updatedElements = [...selectedElements, ...newElements];\n                setElementData(field.name, updatedElements);\n\n                const formValue = updatedElements.map((element) => {\n                    return { id: element.id, siteId: element.siteId };\n                });\n\n                form.setFieldValue(field.name, formValue);\n            },\n            closeOtherModals: false,\n        });\n    };\n\n    const removeElement = (elementId: number) => {\n        const updatedElements = selectedElements.filter((el) => { return el.id !== elementId; });\n        setElementData(field.name, updatedElements);\n\n        const formValue = updatedElements.map((element) => {\n            return { id: element.id, siteId: element.siteId };\n        });\n\n        form.setFieldValue(field.name, formValue);\n    };\n\n    useEffect(() => {\n        const loadElements = async() => {\n            if (field.name && !hasElementData(field.name)) {\n                const currentValue = form.getFieldValue(field.name);\n\n                if (currentValue && Array.isArray(currentValue) && currentValue.length > 0) {\n                    const currentReferences = currentValue.filter(isElementReference);\n                    if (!currentReferences.length) {\n                        return;\n                    }\n\n                    setIsLoading(true);\n\n                    try {\n                        if (!elementSelectOptionsAction) {\n                            throw new Error(`ElementSelectField requires \"elementSelectOptionsAction\" for \"${field.name}\".`);\n                        }\n\n                        const response = await hostRequest('POST', elementSelectOptionsAction, {\n                            data: { elements: currentReferences },\n                        });\n\n                        if (response.data && Array.isArray(response.data)) {\n                            const normalizedElements = response.data\n                                .map((item) => { return normalizeStoredElement(item, field.elementType || 'craft\\\\elements\\\\Entry'); })\n                                .filter((item): item is Element => {\n                                return item !== null;\n                            });\n                            setElementData(field.name, normalizedElements);\n                        }\n                    } catch {\n                        const fallbackElements: Element[] = currentReferences.map((item) => {\n                            return {\n                                id: item.id,\n                                siteId: item.siteId,\n                                label: `Element ${item.id}`,\n                                url: null,\n                                status: null,\n                                elementType: field.elementType || 'craft\\\\elements\\\\Entry',\n                            };\n                        });\n                        setElementData(field.name, fallbackElements);\n                    } finally {\n                        setIsLoading(false);\n                    }\n                }\n            }\n        };\n\n        loadElements();\n    }, [form, field.name, field.elementType, elementSelectOptionsAction, getElementData, setElementData, hasElementData]);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            <div className=\"space-y-3\">\n                {isLoading && (\n                    <div className=\"relative flex items-center text-sm text-gray-500 min-h-[34px]\">\n                        <Spinner size=\"xs\" variant=\"default\" className=\"absolute left-0\" />\n                        <span className=\"ml-6\">{t('Loading elements...')}</span>\n                    </div>\n                )}\n\n                {selectedElements.length > 0 && (\n                    <div className=\"flex flex-wrap gap-2\">\n                        {selectedElements.map((element) => {\n                            return (\n                                <div\n                                    key={`${element.id}-${element.siteId}`}\n                                    className={cn(\n                                        'flex items-center gap-1.5',\n                                        'border border-gray-200 rounded-lg text-sm',\n                                        'px-2 py-1.5',\n                                        'bg-[rgb(243,247,252)]',\n                                        'shadow-sm',\n                                    )}\n                                >\n                                    <div className=\"flex items-center gap-2\">\n                                        {element.status && <Status status={element.status} />}\n                                        <a href={element.url}>\n                                            <span>{element.label}</span>\n                                        </a>\n                                    </div>\n\n                                    <Button\n                                        type=\"button\"\n                                        variant=\"transparent\"\n                                        size=\"xs\"\n                                        onClick={() => { return removeElement(element.id); }}\n                                        className={cn('-mr-1')}\n                                        aria-label={t('Remove element')}\n                                    >\n                                        <FontAwesomeIcon icon={faXmark} className=\"size-[15px]\" />\n                                    </Button>\n                                </div>\n                            );\n                        })}\n                    </div>\n                )}\n\n                {(!field.limit || selectedElements.length < field.limit) && !isLoading && (\n                    <Button\n                        type=\"button\"\n                        variant=\"dashed\"\n                        aria-label={t('Choose')}\n                        className={cn(\n                            'pl-1.5',\n                            errors.length > 0 && [\n                                'border-rose-600!',\n                                'focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!',\n                            ],\n                        )}\n                        onClick={handleButtonClick}\n                    >\n                        <FontAwesomeIcon icon={faPlus} className=\"size-[16px]\" /> {t('Choose')}\n                    </Button>\n                )}\n            </div>\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAyDA,IAAM,YAAY,UAAqD;AACnE,QAAO,QAAQ,MAAM,IAAI,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM;;AAG/E,IAAM,sBAAsB,UAA8C;AACtE,QAAO,SAAS,MAAM,IAAI,OAAO,MAAM,OAAO,YAAY,OAAO,MAAM,WAAW;;AAGtF,IAAM,4BAA4B,SAA8B,gBAAiC;CAC7F,MAAM,MAAM,OAAO,QAAQ,UAAU,SAAS,aACxC,QAAQ,SAAS,KAAK,SAAS,GAC/B;AAEN,QAAO;EACH,IAAI,QAAQ;EACZ,QAAQ,QAAQ;EAChB,OAAO,QAAQ;EACf,KAAK,OAAO,QAAQ,WAAW,MAAM;EACrC,QAAQ,QAAQ,UAAU;EAC1B;EACH;;AAGL,IAAM,0BAA0B,OAAgB,gBAAwC;AACpF,KAAI,CAAC,SAAS,MAAM,IAAI,OAAO,MAAM,OAAO,YAAY,OAAO,MAAM,WAAW,SAC5E,QAAO;AAGX,QAAO;EACH,IAAI,MAAM;EACV,QAAQ,MAAM;EACd,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,WAAW,MAAM;EACxE,KAAK,OAAO,MAAM,QAAQ,WAAW,MAAM,MAAM;EACjD,QAAQ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS;EAC1D,aAAa,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc;EAC5E;;AAGL,IAAa,sBAAsB,EAAE,MAAM,YAAqC;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,EAAE,gBAAgB,gBAAgB,mBAAmB,mBAAiB;CAC5E,MAAM,IAAI,gBAAgB;CAC1B,MAAM,mBAAmB,eAA0B,MAAM,KAAK,IAAI,EAAE;CACpE,MAAM,SAAS,MAAM,qBAAqB,CAAC,MAAM,SAAS,EAAE;CAC5D,MAAM,EAAE,+BAA+B;CACvC,MAAM,EAAE,kCAAkC;CAE1C,MAAM,0BAA0B;EAC5B,MAAM,cAAc,MAAM,eAAe;AAEzC,MAAI,CAAC,8BACD,OAAM,IAAI,MAAM,oEAAoE,MAAM,KAAK,IAAI;AAGvG,0BAAwB,aAAa;GACjC,YAAY,GAAG,8BAA8B,GAAG,MAAM,KAAK,GAAG;GAC9D,SAAS,MAAM,WAAW,CAAC,IAAI;GAC/B,UAAU,MAAM,YAAY,EAAE;GAC9B,aAAa,MAAM,QAAQ,QAAQ;GACnC,OAAO,MAAM,SAAS;GACtB,oBAAoB;GACpB,cAAc;AACV,aAAS,KAAK,MAAM,gBAAgB;;GAExC,WAAW,aAAoC;IAC3C,MAAM,cAAc,SAAS,KAAK,YAAY;AAC1C,YAAO,yBAAyB,SAAS,YAAY;MACvD;IAEF,MAAM,kBAAkB,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAC7D,mBAAe,MAAM,MAAM,gBAAgB;IAE3C,MAAM,YAAY,gBAAgB,KAAK,YAAY;AAC/C,YAAO;MAAE,IAAI,QAAQ;MAAI,QAAQ,QAAQ;MAAQ;MACnD;AAEF,SAAK,cAAc,MAAM,MAAM,UAAU;;GAE7C,kBAAkB;GACrB,CAAC;;CAGN,MAAM,iBAAiB,cAAsB;EACzC,MAAM,kBAAkB,iBAAiB,QAAQ,OAAO;AAAE,UAAO,GAAG,OAAO;IAAa;AACxF,iBAAe,MAAM,MAAM,gBAAgB;EAE3C,MAAM,YAAY,gBAAgB,KAAK,YAAY;AAC/C,UAAO;IAAE,IAAI,QAAQ;IAAI,QAAQ,QAAQ;IAAQ;IACnD;AAEF,OAAK,cAAc,MAAM,MAAM,UAAU;;AAG7C,iBAAgB;EACZ,MAAM,eAAe,YAAW;AAC5B,OAAI,MAAM,QAAQ,CAAC,eAAe,MAAM,KAAK,EAAE;IAC3C,MAAM,eAAe,KAAK,cAAc,MAAM,KAAK;AAEnD,QAAI,gBAAgB,MAAM,QAAQ,aAAa,IAAI,aAAa,SAAS,GAAG;KACxE,MAAM,oBAAoB,aAAa,OAAO,mBAAmB;AACjE,SAAI,CAAC,kBAAkB,OACnB;AAGJ,kBAAa,KAAK;AAElB,SAAI;AACA,UAAI,CAAC,2BACD,OAAM,IAAI,MAAM,iEAAiE,MAAM,KAAK,IAAI;MAGpG,MAAM,WAAW,MAAM,YAAY,QAAQ,4BAA4B,EACnE,MAAM,EAAE,UAAU,mBAAmB,EACxC,CAAC;AAEF,UAAI,SAAS,QAAQ,MAAM,QAAQ,SAAS,KAAK,EAAE;OAC/C,MAAM,qBAAqB,SAAS,KAC/B,KAAK,SAAS;AAAE,eAAO,uBAAuB,MAAM,MAAM,eAAe,yBAAyB;SAAI,CACtG,QAAQ,SAA0B;AACnC,eAAO,SAAS;SAClB;AACF,sBAAe,MAAM,MAAM,mBAAmB;;aAE9C;MACJ,MAAM,mBAA8B,kBAAkB,KAAK,SAAS;AAChE,cAAO;QACH,IAAI,KAAK;QACT,QAAQ,KAAK;QACb,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,QAAQ;QACR,aAAa,MAAM,eAAe;QACrC;QACH;AACF,qBAAe,MAAM,MAAM,iBAAiB;eACtC;AACN,mBAAa,MAAM;;;;;AAMnC,gBAAc;IACf;EAAC;EAAM,MAAM;EAAM,MAAM;EAAa;EAA4B;EAAgB;EAAgB;EAAe,CAAC;AAErH,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACK,aACG,qBAAC,OAAD;KAAK,WAAU;eAAf,CACI,oBAAC,SAAD;MAAS,MAAK;MAAK,SAAQ;MAAU,WAAU;MAAoB,CAAA,EACnE,oBAAC,QAAD;MAAM,WAAU;gBAAQ,EAAE,sBAAsB;MAAQ,CAAA,CACtD;;IAGT,iBAAiB,SAAS,KACvB,oBAAC,OAAD;KAAK,WAAU;eACV,iBAAiB,KAAK,YAAY;AAC/B,aACI,qBAAC,OAAD;OAEI,WAAW,GACP,6BACA,6CACA,eACA,yBACA,YACH;iBARL,CAUI,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACK,QAAQ,UAAU,oBAAC,QAAD,EAAQ,QAAQ,QAAQ,QAAU,CAAA,EACrD,oBAAC,KAAD;SAAG,MAAM,QAAQ;mBACb,oBAAC,QAAD,EAAA,UAAO,QAAQ,OAAa,CAAA;SAC5B,CAAA,CACF;WAEN,oBAAC,QAAD;QACI,MAAK;QACL,SAAQ;QACR,MAAK;QACL,eAAe;AAAE,gBAAO,cAAc,QAAQ,GAAG;;QACjD,WAAW,GAAG,QAAQ;QACtB,cAAY,EAAE,iBAAiB;kBAE/B,oBAAC,iBAAD;SAAiB,MAAM;SAAS,WAAU;SAAgB,CAAA;QACrD,CAAA,CACP;SA1BG,GAAG,QAAQ,GAAG,GAAG,QAAQ,SA0B5B;OAEZ;KACA,CAAA;KAGR,CAAC,MAAM,SAAS,iBAAiB,SAAS,MAAM,UAAU,CAAC,aACzD,qBAAC,QAAD;KACI,MAAK;KACL,SAAQ;KACR,cAAY,EAAE,SAAS;KACvB,WAAW,GACP,UACA,OAAO,SAAS,KAAK,CACjB,oBACA,8GACH,CACJ;KACD,SAAS;eAXb;MAaI,oBAAC,iBAAD;OAAiB,MAAM;OAAQ,WAAU;OAAgB,CAAA;;MAAE,EAAE,SAAS;MACjE;;IAEX;;EACI,CAAA"}

package/dist/forms/fields/GroupField.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { SchemaFormEngineApi } from '../engine/context';
+import { SchemaRenderable } from '../engine/SchemaIndex';
+type GroupFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name?: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        required?: boolean;
+        schema?: SchemaRenderable;
+        children?: SchemaRenderable;
+    };
+    children?: ReactNode;
+};
+export declare const GroupField: ({ form, field, children }: GroupFieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=GroupField.d.ts.map

package/dist/forms/fields/GroupField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/GroupField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;KAC/B,CAAC;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAsCF,eAAO,MAAM,UAAU,GAAI,2BAA2B,eAAe,mDAsCpE,CAAC"}

package/dist/forms/fields/GroupField.js

@@ -0,0 +1,50 @@
+import { FieldLayout } from "../Field.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/GroupField.tsx
+var prefixGroupSchema = (schema, prefix, scopePath) => {
+	if (Array.isArray(schema)) return schema.map((item) => {
+		return prefixGroupSchema(item, prefix, scopePath);
+	});
+	if (!schema || typeof schema !== "object") return schema;
+	const nextSchema = { ...schema };
+	if (typeof scopePath === "string" && scopePath && !nextSchema._scopePath) nextSchema._scopePath = scopePath;
+	if (typeof nextSchema.name === "string" && nextSchema.name && nextSchema.$field) nextSchema.name = `${prefix}${nextSchema.name}`;
+	if (nextSchema.$field !== "group") {
+		if (Array.isArray(nextSchema.schema)) nextSchema.schema = prefixGroupSchema(nextSchema.schema, prefix, scopePath);
+		if (Array.isArray(nextSchema.children)) nextSchema.children = prefixGroupSchema(nextSchema.children, prefix, scopePath);
+	}
+	return nextSchema;
+};
+var GroupField = ({ form, field, children }) => {
+	const Renderer = form?.SchemaRenderer;
+	const prefix = field.name ? `${field.name}.` : "";
+	const scopedSchema = useMemo(() => {
+		const schema = field.schema ?? field.children ?? children ?? [];
+		if (!prefix) return schema;
+		return prefixGroupSchema(schema, prefix, field.name || "");
+	}, [
+		children,
+		field.children,
+		field.name,
+		field.schema,
+		prefix
+	]);
+	if (!Renderer) return null;
+	const errors = field.name ? form?.getGroupedErrorsForPath?.(field.name) ?? form?.getErrorMapFields?.()[field.name] ?? [] : [];
+	if (field.label || field.instructions || field.warning) return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name || "group",
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		withControl: false,
+		children: /* @__PURE__ */ jsx(Renderer, { schema: scopedSchema })
+	});
+	return /* @__PURE__ */ jsx(Renderer, { schema: scopedSchema });
+};
+//#endregion
+export { GroupField };
+
+//# sourceMappingURL=GroupField.js.map

package/dist/forms/fields/GroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupField.js","names":[],"sources":["../../../src/forms/fields/GroupField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode, SchemaRenderable } from '../engine/SchemaIndex';\n\ntype GroupFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name?: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n        schema?: SchemaRenderable;\n        children?: SchemaRenderable;\n    };\n    children?: ReactNode;\n};\n\nconst prefixGroupSchema = (schema: SchemaRenderable, prefix: string, scopePath: string): SchemaRenderable => {\n    if (Array.isArray(schema)) {\n        return schema.map((item) => {\n            return prefixGroupSchema(item, prefix, scopePath);\n        });\n    }\n\n    if (!schema || typeof schema !== 'object') {\n        return schema;\n    }\n\n    const nextSchema: SchemaNode = { ...schema };\n    const hasScope = typeof scopePath === 'string' && scopePath;\n\n    if (hasScope && !nextSchema._scopePath) {\n        nextSchema._scopePath = scopePath;\n    }\n\n    if (typeof nextSchema.name === 'string' && nextSchema.name && nextSchema.$field) {\n        nextSchema.name = `${prefix}${nextSchema.name}`;\n    }\n\n    // Let nested group fields scope their own descendants to avoid double-prefixing.\n    if (nextSchema.$field !== 'group') {\n        if (Array.isArray(nextSchema.schema)) {\n            nextSchema.schema = prefixGroupSchema(nextSchema.schema, prefix, scopePath);\n        }\n\n        if (Array.isArray(nextSchema.children)) {\n            nextSchema.children = prefixGroupSchema(nextSchema.children, prefix, scopePath);\n        }\n    }\n\n    return nextSchema;\n};\n\nexport const GroupField = ({ form, field, children }: GroupFieldProps) => {\n    const Renderer = form?.SchemaRenderer;\n    const prefix = field.name ? `${field.name}.` : '';\n    const scopedSchema = useMemo(() => {\n        const schema = field.schema ?? field.children ?? children ?? [];\n\n        if (!prefix) {\n            return schema;\n        }\n\n        return prefixGroupSchema(schema, prefix, field.name || '');\n    }, [children, field.children, field.name, field.schema, prefix]);\n\n    if (!Renderer) {\n        return null;\n    }\n\n    const errors = field.name\n        ? form?.getGroupedErrorsForPath?.(field.name) ?? form?.getErrorMapFields?.()[field.name] ?? []\n        : [];\n\n    if (field.label || field.instructions || field.warning) {\n        return (\n            <FieldLayout\n                name={field.name || 'group'}\n                label={field.label}\n                instructions={field.instructions}\n                warning={field.warning}\n                required={field.required}\n                errors={errors}\n                withControl={false}\n            >\n                <Renderer schema={scopedSchema} />\n            </FieldLayout>\n        );\n    }\n\n    return <Renderer schema={scopedSchema} />;\n};\n"],"mappings":";;;;AAoBA,IAAM,qBAAqB,QAA0B,QAAgB,cAAwC;AACzG,KAAI,MAAM,QAAQ,OAAO,CACrB,QAAO,OAAO,KAAK,SAAS;AACxB,SAAO,kBAAkB,MAAM,QAAQ,UAAU;GACnD;AAGN,KAAI,CAAC,UAAU,OAAO,WAAW,SAC7B,QAAO;CAGX,MAAM,aAAyB,EAAE,GAAG,QAAQ;AAG5C,KAFiB,OAAO,cAAc,YAAY,aAElC,CAAC,WAAW,WACxB,YAAW,aAAa;AAG5B,KAAI,OAAO,WAAW,SAAS,YAAY,WAAW,QAAQ,WAAW,OACrE,YAAW,OAAO,GAAG,SAAS,WAAW;AAI7C,KAAI,WAAW,WAAW,SAAS;AAC/B,MAAI,MAAM,QAAQ,WAAW,OAAO,CAChC,YAAW,SAAS,kBAAkB,WAAW,QAAQ,QAAQ,UAAU;AAG/E,MAAI,MAAM,QAAQ,WAAW,SAAS,CAClC,YAAW,WAAW,kBAAkB,WAAW,UAAU,QAAQ,UAAU;;AAIvF,QAAO;;AAGX,IAAa,cAAc,EAAE,MAAM,OAAO,eAAgC;CACtE,MAAM,WAAW,MAAM;CACvB,MAAM,SAAS,MAAM,OAAO,GAAG,MAAM,KAAK,KAAK;CAC/C,MAAM,eAAe,cAAc;EAC/B,MAAM,SAAS,MAAM,UAAU,MAAM,YAAY,YAAY,EAAE;AAE/D,MAAI,CAAC,OACD,QAAO;AAGX,SAAO,kBAAkB,QAAQ,QAAQ,MAAM,QAAQ,GAAG;IAC3D;EAAC;EAAU,MAAM;EAAU,MAAM;EAAM,MAAM;EAAQ;EAAO,CAAC;AAEhE,KAAI,CAAC,SACD,QAAO;CAGX,MAAM,SAAS,MAAM,OACf,MAAM,0BAA0B,MAAM,KAAK,IAAI,MAAM,qBAAqB,CAAC,MAAM,SAAS,EAAE,GAC5F,EAAE;AAER,KAAI,MAAM,SAAS,MAAM,gBAAgB,MAAM,QAC3C,QACI,oBAAC,aAAD;EACI,MAAM,MAAM,QAAQ;EACpB,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,oBAAC,UAAD,EAAU,QAAQ,cAAgB,CAAA;EACxB,CAAA;AAItB,QAAO,oBAAC,UAAD,EAAU,QAAQ,cAAgB,CAAA"}

package/dist/forms/fields/HandleField.d.ts

@@ -0,0 +1,20 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type HandleFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        source?: string;
+        reservedHandles?: string[];
+        reservedFieldValues?: string[];
+        maxLength?: number;
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const HandleField: ({ form, field }: HandleFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HandleField.d.ts.map

package/dist/forms/fields/HandleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/HandleField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;QAC3B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,iBAAiB,gBAAgB,4CAqE5D,CAAC"}

package/dist/forms/fields/HandleField.js

@@ -0,0 +1,70 @@
+import { cn } from "../../utils/classes.js";
+import { buildUniqueHandleFromSource } from "../../utils/handle.js";
+import "../../utils/index.js";
+import { Input } from "../../components/Input.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/forms/fields/HandleField.tsx
+var HandleField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors, isInvalid } = useEngineField(form, field.name);
+	const [rotate, setRotate] = useState(0);
+	const refreshHandle = (e) => {
+		e.preventDefault();
+		if (field.disabled) return;
+		setRotate((current) => {
+			return current + 180;
+		});
+		if (!field.source) return;
+		setValue(buildUniqueHandleFromSource({
+			sourceValue: form.getFieldValue(field.source),
+			values: form.store.state.values ?? {},
+			reservedHandles: field.reservedHandles || [],
+			reservedFieldValues: field.reservedFieldValues || [],
+			maxLength: field.maxLength
+		}));
+	};
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(Input, {
+				value: String(value ?? ""),
+				onChange: (event) => {
+					return setValue(event.target.value);
+				},
+				onBlur: setTouched,
+				placeholder: field.placeholder,
+				disabled: field.disabled,
+				"aria-invalid": isInvalid,
+				className: "font-mono text-[13px]"
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("absolute top-1/2 right-0 p-[7px_10px]", field.disabled ? "opacity-30 cursor-not-allowed" : "opacity-50 hover:opacity-100", "text-[#606d7b]", "transition-all duration-200 ease-in-out", "select-none", "transform", "transition-transform duration-500 ease-in-out", "[&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:block"),
+				style: { transform: `translateY(-50%) rotate(${rotate}deg)` },
+				onClick: refreshHandle,
+				children: /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					focusable: "false",
+					role: "img",
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 512 512",
+					children: /* @__PURE__ */ jsx("path", {
+						fill: "currentColor",
+						d: "M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+					})
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { HandleField };
+
+//# sourceMappingURL=HandleField.js.map

package/dist/forms/fields/HandleField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleField.js","names":[],"sources":["../../../src/forms/fields/HandleField.tsx"],"sourcesContent":["import { Input } from '@verbb/plugin-kit-react/components';\nimport { buildUniqueHandleFromSource, cn } from '@verbb/plugin-kit-react/utils';\nimport { MouseEvent, useState } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype HandleFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        source?: string;\n        reservedHandles?: string[];\n        reservedFieldValues?: string[];\n        maxLength?: number;\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const HandleField = ({ form, field }: HandleFieldProps) => {\n    const {\n        value, setValue, setTouched, errors, isInvalid,\n    } = useEngineField(form, field.name);\n    const [rotate, setRotate] = useState(0);\n\n    const refreshHandle = (e: MouseEvent) => {\n        e.preventDefault();\n\n        if (field.disabled) {\n            return;\n        }\n\n        setRotate((current) => { return current + 180; });\n\n        if (!field.source) {\n            return;\n        }\n\n        const uniqueHandle = buildUniqueHandleFromSource({\n            sourceValue: form.getFieldValue(field.source),\n            values: form.store.state.values ?? {},\n            reservedHandles: field.reservedHandles || [],\n            reservedFieldValues: field.reservedFieldValues || [],\n            maxLength: field.maxLength,\n        });\n        setValue(uniqueHandle);\n    };\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <div className=\"relative\">\n                <Input\n                    value={String(value ?? '')}\n                    onChange={(event) => { return setValue(event.target.value); }}\n                    onBlur={setTouched}\n                    placeholder={field.placeholder}\n                    disabled={field.disabled}\n                    aria-invalid={isInvalid}\n                    className=\"font-mono text-[13px]\"\n                />\n                <div\n                    className={cn(\n                        'absolute top-1/2 right-0 p-[7px_10px]',\n                        field.disabled ? 'opacity-30 cursor-not-allowed' : 'opacity-50 hover:opacity-100',\n                        'text-[#606d7b]',\n                        'transition-all duration-200 ease-in-out',\n                        'select-none',\n                        'transform',\n                        'transition-transform duration-500 ease-in-out',\n                        '[&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:block',\n                    )}\n                    style={{ transform: `translateY(-50%) rotate(${rotate}deg)` }}\n                    onClick={refreshHandle}\n                >\n                    <svg aria-hidden=\"true\" focusable=\"false\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n                        <path fill=\"currentColor\" d=\"M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z\" />\n                    </svg>\n                </div>\n            </div>\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;;;AAwBA,IAAa,eAAe,EAAE,MAAM,YAA8B;CAC9D,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;CACpC,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CAEvC,MAAM,iBAAiB,MAAkB;AACrC,IAAE,gBAAgB;AAElB,MAAI,MAAM,SACN;AAGJ,aAAW,YAAY;AAAE,UAAO,UAAU;IAAO;AAEjD,MAAI,CAAC,MAAM,OACP;AAUJ,WAPqB,4BAA4B;GAC7C,aAAa,KAAK,cAAc,MAAM,OAAO;GAC7C,QAAQ,KAAK,MAAM,MAAM,UAAU,EAAE;GACrC,iBAAiB,MAAM,mBAAmB,EAAE;GAC5C,qBAAqB,MAAM,uBAAuB,EAAE;GACpD,WAAW,MAAM;GACpB,CACQ,CAAa;;AAG1B,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,qBAAC,OAAD;GAAK,WAAU;aAAf,CACI,oBAAC,OAAD;IACI,OAAO,OAAO,SAAS,GAAG;IAC1B,WAAW,UAAU;AAAE,YAAO,SAAS,MAAM,OAAO,MAAM;;IAC1D,QAAQ;IACR,aAAa,MAAM;IACnB,UAAU,MAAM;IAChB,gBAAc;IACd,WAAU;IACZ,CAAA,EACF,oBAAC,OAAD;IACI,WAAW,GACP,yCACA,MAAM,WAAW,kCAAkC,gCACnD,kBACA,2CACA,eACA,aACA,iDACA,4CACH;IACD,OAAO,EAAE,WAAW,2BAA2B,OAAO,OAAO;IAC7D,SAAS;cAET,oBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAQ,MAAK;KAAM,OAAM;KAA6B,SAAQ;eAC5F,oBAAC,QAAD;MAAM,MAAK;MAAe,GAAE;MAAwnB,CAAA;KAClpB,CAAA;IACJ,CAAA,CACJ;;EACI,CAAA"}

package/dist/forms/fields/LightswitchField.d.ts

@@ -0,0 +1,14 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type LightswitchFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        required?: boolean;
+    };
+};
+export declare const LightswitchField: ({ form, field }: LightswitchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LightswitchField.d.ts.map

package/dist/forms/fields/LightswitchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightswitchField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/LightswitchField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,qBAAqB,GAAG;IACzB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,qBAAqB,4CAoBtE,CAAC"}