@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/declarations/index.mjs

@@ -0,0 +1,75 @@
+import e from "../advanced/BlockHtml/declaration.mjs";
+import t from "../advanced/BlockJsx/declaration.mjs";
+import n from "../advanced/Custom/declaration.mjs";
+import r from "../advanced/NodeHtml/declaration.mjs";
+import i from "../advanced/Reference/declaration.mjs";
+import a from "../basic/Button/declaration.mjs";
+import o from "../basic/Dropdown/declaration.mjs";
+import s from "../basic/Dropdown/DropdownPopup/declaration.mjs";
+import c from "../basic/Heading/declaration.mjs";
+import l from "../basic/Link/declaration.mjs";
+import u from "../basic/Markdown/declaration.mjs";
+import d from "../basic/Paragraph/declaration.mjs";
+import f from "../basic/RichText/declaration.mjs";
+import p from "../basic/Text/declaration.mjs";
+import m from "../basic/ThemeToggle/declaration.mjs";
+import h from "../form/Form/declaration.mjs";
+import g from "../form/FormControl/declaration.mjs";
+import _ from "../internal/LayoutContainer/declaration.mjs";
+import v from "../internal/Loading/declaration.mjs";
+import y from "../internal/NotFound/declaration.mjs";
+import b from "../internal/Page/declaration.mjs";
+import x from "../media/FontAwesome/declaration.mjs";
+import S from "../media/Image/declaration.mjs";
+import C from "../media/Video/declaration.mjs";
+import w from "../provider/ApiContainer/declaration.mjs";
+import T from "../structure/Container/declaration.mjs";
+import E from "../structure/DialogContainer/declaration.mjs";
+import D from "../structure/List/declaration.mjs";
+import O from "../structure/List/ListItem/declaration.mjs";
+import k from "../structure/ModalContainer/declaration.mjs";
+import A from "../structure/Pagination/declaration.mjs";
+import j from "../structure/TabContainer/declaration.mjs";
+import M from "../structure/TabContainer/TabContainerBody/declaration.mjs";
+import N from "../structure/TabContainer/TabContainerHeader/declaration.mjs";
+import P from "../structure/TabContainer/TabContainerItem/declaration.mjs";
+//#region src/elements/declarations/index.ts
+var F = {
+	ApiContainer: w,
+	BlockHtml: e,
+	BlockJsx: t,
+	Button: a,
+	Container: T,
+	Custom: n,
+	DialogContainer: E,
+	Dropdown: o,
+	DropdownPopup: s,
+	FontAwesome: x,
+	Form: h,
+	FormControl: g,
+	Heading: c,
+	Image: S,
+	LayoutContainer: _,
+	Link: l,
+	List: D,
+	ListItem: O,
+	Loading: v,
+	Markdown: u,
+	ModalContainer: k,
+	NodeHtml: r,
+	NotFound: y,
+	Page: b,
+	Pagination: A,
+	Paragraph: d,
+	Reference: i,
+	RichText: f,
+	TabContainer: j,
+	TabContainerBody: M,
+	TabContainerHeader: N,
+	TabContainerItem: P,
+	Text: p,
+	ThemeToggle: m,
+	Video: C
+};
+//#endregion
+export { w as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, T as ContainerDeclaration, n as CustomDeclaration, E as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, S as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, D as ListDeclaration, O as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, k as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, A as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, M as TabContainerBodyDeclaration, j as TabContainerDeclaration, N as TabContainerHeaderDeclaration, P as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, C as VideoDeclaration, F as elementDeclarations };

package/dist/elements/form/Form/Form.d.ts

@@ -15,11 +15,15 @@ export type Field = {
     name: string;
 };
 export type FieldValue = string | boolean | number;
+/** What a control says about the form's values as they stand: the sentence to show under it, or `''`. */
+export type FieldValidator = (values: Record<string, unknown>) => string;
 export type FormContextValue = {
     errors: Record<string, string>;
     values: Record<string, unknown>;
     registerField: (field: SourceField) => void;
     unregisterField: (name: string) => void;
+    registerValidator: (name: string, validate: FieldValidator) => void;
+    unregisterValidator: (name: string) => void;
     setFieldValue: (name: string, value: FieldValue | null) => void;
     setFieldError: (name: string, error: string) => void;
 };

package/dist/elements/form/Form/Form.mjs

@@ -1,37 +1,46 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "../../../Element/hocs/withElement.mjs";
-import { use as r, useCallback as i, useMemo as a, useState as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as c, omit as l } from "@plitzi/plitzi-ui/helpers";
-import { StoreProvider as u } from "@plitzi/nexus/react";
-import { emptyObject as d } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as f } from "react/jsx-runtime";
-import p from "clsx";
-import { produce as m } from "immer";
-import h from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import g from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "./declaration.mjs";
+import { use as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as d, omit as f } from "@plitzi/plitzi-ui/helpers";
+import { StoreProvider as p } from "@plitzi/nexus/react";
+import { emptyObject as m } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as h } from "react/jsx-runtime";
+import g from "clsx";
+import { produce as _ } from "immer";
+import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/form/Form/Form.tsx
-var _ = ({ ref: n, className: _ = "", children: v, method: y = "get", actionUrl: b = "", managedByInteractions: x = !1, errors: S = d, values: C = d }) => {
-	let [w, T] = o({}), { id: E, idRef: D, definition: { label: O = "Form" }, setElementState: k } = e(), A = h("apiContainer", { idRef: D }), { settings: { previewMode: j }, contexts: { InteractionsContext: M } } = s(), { interactionsManager: N } = r(M), P = i((e) => T((t) => ({
+var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, errors: T = m, values: E = m }) => {
+	let [D, O] = l({}), k = c(/* @__PURE__ */ new Map()), A = c(!1), { id: j, definition: { label: M = "Form" }, setElementState: N } = t(), P = v(r.sourceType, j), { settings: { previewMode: F }, contexts: { InteractionsContext: I } } = u(), { interactionsManager: L } = i(I), R = a((e) => O((t) => ({
 		...t,
 		[e.name]: e
-	})), [T]), F = i((e) => {
-		T((t) => m(t, (t) => {
+	})), [O]);
+	o(() => (A.current = !1, () => {
+		A.current = !0;
+	}), []);
+	let z = a((e) => {
+		A.current || (O((t) => _(t, (t) => {
 			t[e] && delete t[e];
-		})), e && k((t) => ({
+		})), e && N((t) => ({
 			...t,
-			values: l(t, `values.${e}`),
-			errors: l(t, `errors.${e}`)
-		}));
-	}, [k]), I = i((e, t = "") => {
-		e && (t === null && (t = ""), k((n) => n.errors && n.errors[e] ? {
+			values: f(t, `values.${e}`),
+			errors: f(t, `errors.${e}`)
+		})));
+	}, [N]), B = a((e, t) => {
+		k.current.set(e, t);
+	}, []), V = a((e) => {
+		k.current.delete(e);
+	}, []), H = a((e, t = "") => {
+		e && (t === null && (t = ""), N((n) => n.errors && n.errors[e] ? {
 			...n,
 			values: {
 				...n.values,
 				[e]: t
 			},
-			errors: l(n.errors, [e])
+			errors: f(n.errors, [e])
 		} : {
 			...n,
 			values: {
@@ -39,10 +48,10 @@ var _ = ({ ref: n, className: _ = "", children: v, method: y = "get", actionUrl:
 				[e]: t
 			}
 		}));
-	}, [k]), L = i((e, t) => {
-		e && k((n) => !t && !c(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
+	}, [N]), U = a((e, t) => {
+		e && N((n) => !t && !d(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
 			...n,
-			errors: l(n, [`errors.${e}`])
+			errors: f(n, [`errors.${e}`])
 		} : {
 			...n,
 			errors: {
@@ -50,7 +59,7 @@ var _ = ({ ref: n, className: _ = "", children: v, method: y = "get", actionUrl:
 				[e]: t
 			}
 		});
-	}, [k]), R = i(() => Object.values(w).filter((e) => !!e.name).reduce((e, t) => [
+	}, [N]), W = a(() => Object.values(D).filter((e) => !!e.name).reduce((e, t) => [
 		...e,
 		{
 			path: `fields.${t.name}.id`,
@@ -64,96 +73,118 @@ var _ = ({ ref: n, className: _ = "", children: v, method: y = "get", actionUrl:
 			path: `errors.${t.name}`,
 			name: `${t.name} Error Message`
 		}
-	], []), [w]), z = a(() => ({ runtime: { sources: { form: {
-		errors: S,
-		values: C,
-		registerField: P,
-		unregisterField: F,
-		setFieldValue: I,
-		setFieldError: L
-	} } } }), [
-		S,
-		C,
+	], []), [D]), G = s(() => ({ runtime: { sources: {
+		form: {
+			errors: T,
+			values: E,
+			registerField: R,
+			unregisterField: z,
+			registerValidator: B,
+			unregisterValidator: V,
+			setFieldValue: H,
+			setFieldError: U
+		},
+		[P]: {
+			values: E,
+			errors: T
+		}
+	} } }), [
 		P,
-		F,
-		I,
-		L
+		T,
+		E,
+		R,
+		z,
+		B,
+		V,
+		H,
+		U
 	]);
-	g({
-		id: E,
-		source: A,
-		name: O || `Form - ${E}`,
-		fields: R
+	y({
+		id: j,
+		source: P,
+		name: M || `Form - ${j}`,
+		fields: W
 	});
-	let B = a(() => ({ onSubmit: {
+	let K = s(() => ({ onSubmit: {
 		action: "onSubmit",
 		title: "On Form Submit",
 		type: "trigger",
 		params: {},
 		preview: {
-			values: Object.values(w).reduce((e, t) => ({
+			values: Object.values(D).reduce((e, t) => ({
 				...e,
 				[t.name]: ""
 			}), {}),
 			actionUrl: "",
 			method: ""
 		}
-	} }), [w]), V = i((e) => {
-		if (k((e) => ({
+	} }), [D]), q = a((e) => {
+		let t = [...k.current].reduce((e, [t, n]) => {
+			let r = n(E);
+			return r ? {
+				...e,
+				[t]: r
+			} : e;
+		}, {});
+		if (N((e) => ({
 			...e,
-			errors: {}
-		})), !x || (e.stopPropagation(), e.preventDefault(), !j)) return;
-		let t = Object.values(w).reduce((e, { name: t }) => ({
+			errors: t
+		})), Object.keys(t).length > 0) {
+			e.stopPropagation(), e.preventDefault();
+			return;
+		}
+		if (!w || (e.stopPropagation(), e.preventDefault(), !F)) return;
+		let n = Object.values(D).reduce((e, { name: t }) => ({
 			...e,
-			[t]: C[t]
+			[t]: E[t]
 		}), {});
-		N.interactionTrigger(D, "onSubmit", {
-			values: t,
-			actionUrl: b,
-			method: y
+		L.interactionTrigger(j, "onSubmit", {
+			values: n,
+			actionUrl: C,
+			method: S
 		});
 	}, [
-		k,
-		x,
-		j,
-		w,
 		N,
+		w,
+		F,
 		D,
-		b,
-		y,
-		C
-	]), H = i((e) => {
-		x && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), k((e) => ({
+		L,
+		j,
+		C,
+		S,
+		E
+	]), J = a((e) => {
+		w && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), N((e) => ({
 			...e,
 			values: {},
 			errors: {}
 		})));
-	}, [k, x]), U = i((e) => {
+	}, [N, w]), Y = a((e) => {
 		let { name: t, value: n } = e;
-		I(t, n);
-	}, [I]), W = i((e) => {
+		H(t, n);
+	}, [H]), X = a((e) => {
 		let { name: t, error: n } = e;
-		L(t, n);
-	}, [L]), G = a(() => ({
+		U(t, n);
+	}, [U]), Z = s(() => ({
 		performReset: {
 			action: "performReset",
-			title: `Reset ${O}`,
+			title: `Reset ${M}`,
 			type: "callback",
-			callback: H,
+			callback: J,
 			params: {}
 		},
 		setFieldValue: {
 			action: "setFieldValue",
-			title: `Set Field Value ${O}`,
+			title: `Set Field Value ${M}`,
 			type: "callback",
-			callback: U,
+			callback: Y,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(w).map((e) => ({
+					options: Object.values(D).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -166,16 +197,16 @@ var _ = ({ ref: n, className: _ = "", children: v, method: y = "get", actionUrl:
 		},
 		setFieldError: {
 			action: "setFieldError",
-			title: `Set Field Error ${O}`,
+			title: `Set Field Error ${M}`,
 			type: "callback",
-			callback: W,
+			callback: X,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(w).map((e) => ({
+					options: Object.values(D).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -187,29 +218,29 @@ var _ = ({ ref: n, className: _ = "", children: v, method: y = "get", actionUrl:
 			}
 		}
 	}), [
-		O,
-		H,
-		U,
-		w,
-		W
+		M,
+		J,
+		Y,
+		D,
+		X
 	]);
-	return /* @__PURE__ */ f(t, {
+	return /* @__PURE__ */ h(n, {
 		tag: "form",
-		ref: n,
-		method: y,
-		className: p("plitzi-component__form", _),
-		interactionTriggers: B,
-		interactionCallbacks: G,
-		onSubmit: V,
-		onReset: H,
-		action: b,
-		children: /* @__PURE__ */ f(u, {
+		ref: e,
+		method: S,
+		className: g("plitzi-component__form", b),
+		interactionTriggers: K,
+		interactionCallbacks: Z,
+		onSubmit: q,
+		onReset: J,
+		action: C,
+		children: /* @__PURE__ */ h(p, {
 			inherit: "live",
-			name: `Form:${E}`,
-			value: z,
-			children: v
+			name: `Form:${j}`,
+			value: G,
+			children: x
 		})
 	});
-}, v = n(_);
+}, x = e(b);
 //#endregion
-export { _ as Form, v as default };
+export { b as Form, x as default };

package/dist/elements/form/Form/declaration.d.ts

@@ -0,0 +1,64 @@
+import { FormProps } from './Form';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type FormAttributes = AuthorableAttributes<FormProps>;
+declare const declaration: {
+    readonly type: "form";
+    readonly sourceType: "apiContainer";
+    readonly content: {
+        readonly attributes: {
+            readonly method: "get";
+            readonly actionUrl: "";
+            readonly managedByInteractions: false;
+            readonly errors: {};
+            readonly values: {};
+        };
+        readonly definition: {
+            readonly label: "Form";
+            readonly type: "form";
+            readonly description: "A <form> that groups form controls and handles submission; wire its submit through an interaction flow.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "form";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+        };
+        readonly defaultStyle: {
+            readonly name: "Form";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    values: Record<string, unknown>;
+    method: "get" | "post";
+    actionUrl: string;
+    managedByInteractions: boolean;
+    errors: Record<string, string>;
+}>>;
+export default declaration;

package/dist/elements/form/Form/declaration.mjs

@@ -0,0 +1,49 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/form/Form/declaration.ts
+var t = e()({
+	type: "form",
+	sourceType: "apiContainer",
+	content: {
+		attributes: {
+			method: "get",
+			actionUrl: "",
+			managedByInteractions: !1,
+			errors: {},
+			values: {}
+		},
+		definition: {
+			label: "Form",
+			type: "form",
+			description: "A <form> that groups form controls and handles submission; wire its submit through an interaction flow.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "form",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee"
+		},
+		defaultStyle: {
+			name: "Form",
+			displayMode: "desktop",
+			style: { base: { default: {} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/form/Form/index.d.ts

@@ -2,60 +2,65 @@ declare const Form: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Form').FormProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
     content: {
+        market: {
+            icon: import("react").JSX.Element;
+            category: "form";
+            owner: "Plitzi";
+            verified: true;
+            license: "MIT";
+            website: "https://plitzi.com";
+            backgroundColor: "#4422ee";
+        };
         attributes: {
-            method: string;
-            actionUrl: string;
-            managedByInteractions: boolean;
-            errors: {};
-            values: {};
+            readonly method: "get";
+            readonly actionUrl: "";
+            readonly managedByInteractions: false;
+            readonly errors: {};
+            readonly values: {};
         };
         definition: {
-            label: string;
-            type: string;
-            description: string;
-            items: never[];
-            bindings: {};
-            styleSelectors: {
-                base: string;
+            readonly label: "Form";
+            readonly type: "form";
+            readonly description: "A <form> that groups form controls and handles submission; wire its submit through an interaction flow.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
         builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
-        };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: import("react").JSX.Element;
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
         defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        'min-width': string;
-                        'min-height': string;
-                    };
+            readonly name: "Form";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
                 };
             };
         };
         settings: {};
     };
+    type: "form";
+    sourceType: "apiContainer";
+    __attributes: Partial<{
+        values: Record<string, unknown>;
+        method: "get" | "post";
+        actionUrl: string;
+        managedByInteractions: boolean;
+        errors: Record<string, string>;
+    }>;
 };
 export * from './Form';
 export default Form;