@plitzi/sdk-elements 0.35.1 → 0.35.3

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

@@ -13,28 +13,28 @@ 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 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) => ({
+var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
+	let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = t(), F = v(r.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
 		...t,
 		[e.name]: e
-	})), [O]);
-	o(() => (A.current = !1, () => {
-		A.current = !0;
+	})), [k]);
+	o(() => (j.current = !1, () => {
+		j.current = !0;
 	}), []);
-	let z = a((e) => {
-		A.current || (O((t) => _(t, (t) => {
+	let B = a((e) => {
+		j.current || (k((t) => _(t, (t) => {
 			t[e] && delete t[e];
-		})), e && N((t) => ({
+		})), e && P((t) => ({
 			...t,
 			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] ? {
+	}, [P]), V = a((e, t) => {
+		A.current.set(e, t);
+	}, []), H = a((e) => {
+		A.current.delete(e);
+	}, []), U = a((e, t = "") => {
+		e && (t === null && (t = ""), P((n) => n.errors && n.errors[e] ? {
 			...n,
 			values: {
 				...n.values,
@@ -48,8 +48,8 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 				[e]: t
 			}
 		}));
-	}, [N]), U = a((e, t) => {
-		e && N((n) => !t && !d(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
+	}, [P]), W = a((e, t) => {
+		e && P((n) => !t && !d(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
 			...n,
 			errors: f(n, [`errors.${e}`])
 		} : {
@@ -59,7 +59,7 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 				[e]: t
 			}
 		});
-	}, [N]), W = a(() => Object.values(D).filter((e) => !!e.name).reduce((e, t) => [
+	}, [P]), G = a(() => Object.values(O).filter((e) => !!e.name).reduce((e, t) => [
 		...e,
 		{
 			path: `fields.${t.name}.id`,
@@ -73,118 +73,118 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 			path: `errors.${t.name}`,
 			name: `${t.name} Error Message`
 		}
-	], []), [D]), G = s(() => ({ runtime: { sources: {
+	], []), [O]), K = s(() => ({ runtime: { sources: {
 		form: {
-			errors: T,
-			values: E,
-			registerField: R,
-			unregisterField: z,
-			registerValidator: B,
-			unregisterValidator: V,
-			setFieldValue: H,
-			setFieldError: U
+			errors: E,
+			values: D,
+			registerField: z,
+			unregisterField: B,
+			registerValidator: V,
+			unregisterValidator: H,
+			setFieldValue: U,
+			setFieldError: W
 		},
-		[P]: {
-			values: E,
-			errors: T
+		[F]: {
+			values: D,
+			errors: E
 		}
 	} } }), [
-		P,
-		T,
+		F,
 		E,
-		R,
+		D,
 		z,
 		B,
 		V,
 		H,
-		U
+		U,
+		W
 	]);
 	y({
-		id: j,
-		source: P,
-		name: M || `Form - ${j}`,
-		fields: W
+		id: M,
+		source: F,
+		name: N || `Form - ${M}`,
+		fields: G
 	});
-	let K = s(() => ({ onSubmit: {
+	let q = s(() => ({ onSubmit: {
 		action: "onSubmit",
 		title: "On Form Submit",
 		type: "trigger",
 		params: {},
 		preview: {
-			values: Object.values(D).reduce((e, t) => ({
+			values: Object.values(O).reduce((e, t) => ({
 				...e,
 				[t.name]: ""
 			}), {}),
 			actionUrl: "",
 			method: ""
 		}
-	} }), [D]), q = a((e) => {
-		let t = [...k.current].reduce((e, [t, n]) => {
-			let r = n(E);
+	} }), [O]), J = a((e) => {
+		let t = [...A.current].reduce((e, [t, n]) => {
+			let r = n(D);
 			return r ? {
 				...e,
 				[t]: r
 			} : e;
 		}, {});
-		if (N((e) => ({
+		if (P((e) => ({
 			...e,
 			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 }) => ({
+		if (!w || (e.stopPropagation(), e.preventDefault(), !I)) return;
+		let n = Object.values(O).reduce((e, { name: t }) => ({
 			...e,
-			[t]: E[t]
+			[t]: D[t]
 		}), {});
-		L.interactionTrigger(j, "onSubmit", {
+		R.interactionTrigger(M, "onSubmit", {
 			values: n,
 			actionUrl: C,
 			method: S
 		});
 	}, [
-		N,
+		P,
 		w,
-		F,
-		D,
-		L,
-		j,
+		I,
+		O,
+		R,
+		M,
 		C,
 		S,
-		E
-	]), J = a((e) => {
-		w && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), N((e) => ({
+		D
+	]), Y = a((e) => {
+		w && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), P((e) => ({
 			...e,
 			values: {},
 			errors: {}
 		})));
-	}, [N, w]), Y = a((e) => {
+	}, [P, w]), X = a((e) => {
 		let { name: t, value: n } = e;
-		H(t, n);
-	}, [H]), X = a((e) => {
-		let { name: t, error: n } = e;
 		U(t, n);
-	}, [U]), Z = s(() => ({
+	}, [U]), Z = a((e) => {
+		let { name: t, error: n } = e;
+		W(t, n);
+	}, [W]), Q = s(() => ({
 		performReset: {
 			action: "performReset",
-			title: `Reset ${M}`,
+			title: `Reset ${N}`,
 			type: "callback",
-			callback: J,
+			callback: Y,
 			params: {}
 		},
 		setFieldValue: {
 			action: "setFieldValue",
-			title: `Set Field Value ${M}`,
+			title: `Set Field Value ${N}`,
 			type: "callback",
-			callback: Y,
+			callback: X,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(D).map((e) => ({
+					options: Object.values(O).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -197,16 +197,16 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 		},
 		setFieldError: {
 			action: "setFieldError",
-			title: `Set Field Error ${M}`,
+			title: `Set Field Error ${N}`,
 			type: "callback",
-			callback: X,
+			callback: Z,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(D).map((e) => ({
+					options: Object.values(O).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -218,26 +218,27 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 			}
 		}
 	}), [
-		M,
-		J,
+		N,
 		Y,
-		D,
-		X
+		X,
+		O,
+		Z
 	]);
 	return /* @__PURE__ */ h(n, {
 		tag: "form",
 		ref: e,
+		noValidate: T,
 		method: S,
 		className: g("plitzi-component__form", b),
-		interactionTriggers: K,
-		interactionCallbacks: Z,
-		onSubmit: q,
-		onReset: J,
+		interactionTriggers: q,
+		interactionCallbacks: Q,
+		onSubmit: J,
+		onReset: Y,
 		action: C,
 		children: /* @__PURE__ */ h(p, {
 			inherit: "live",
-			name: `Form:${j}`,
-			value: G,
+			name: `Form:${M}`,
+			value: K,
 			children: x
 		})
 	});

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

@@ -1,8 +1,9 @@
 type SettingsProps = {
     method?: 'get' | 'post';
     managedByInteractions?: boolean;
+    noValidate?: boolean;
     actionUrl?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ method, managedByInteractions, actionUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ method, managedByInteractions, noValidate, actionUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

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

@@ -4,15 +4,15 @@ import r from "@plitzi/plitzi-ui/Checkbox";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/form/Form/Settings.tsx
-var o = ({ method: o = "get", managedByInteractions: s = !1, actionUrl: c = "", onUpdate: l }) => {
-	let u = e((e) => l?.("actionUrl", e), [l]), d = e((e) => l?.("method", e), [l]), f = e((e) => l?.("managedByInteractions", e.target.checked), [l]);
+var o = ({ method: o = "get", managedByInteractions: s = !1, noValidate: c = !1, actionUrl: l = "", onUpdate: u }) => {
+	let d = e((e) => u?.("actionUrl", e), [u]), f = e((e) => u?.("method", e), [u]), p = e((e) => u?.("managedByInteractions", e.target.checked), [u]), m = e((e) => u?.("noValidate", e.target.checked), [u]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ n(a, {
 				value: o,
 				label: "Form Method",
-				onChange: d,
+				onChange: f,
 				size: "xs",
 				children: [/* @__PURE__ */ t("option", {
 					value: "get",
@@ -23,16 +23,22 @@ var o = ({ method: o = "get", managedByInteractions: s = !1, actionUrl: c = "",
 				})]
 			}),
 			/* @__PURE__ */ t(i, {
-				value: c,
-				onChange: u,
+				value: l,
+				onChange: d,
 				label: "Action URL",
 				size: "xs"
 			}),
 			/* @__PURE__ */ t(r, {
 				checked: s,
-				onChange: f,
+				onChange: p,
 				label: "Managed By Interactions",
 				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				onChange: m,
+				label: "Skip Browser Validation (show only the field messages)",
+				size: "xs"
 			})
 		]
 	});

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

@@ -10,6 +10,7 @@ declare const declaration: {
             readonly method: "get";
             readonly actionUrl: "";
             readonly managedByInteractions: false;
+            readonly noValidate: false;
             readonly errors: {};
             readonly values: {};
         };
@@ -57,6 +58,7 @@ declare const declaration: {
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     values: Record<string, unknown>;
     method: "get" | "post";
+    noValidate: boolean;
     actionUrl: string;
     managedByInteractions: boolean;
     errors: Record<string, string>;

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

@@ -8,6 +8,7 @@ var t = e()({
 			method: "get",
 			actionUrl: "",
 			managedByInteractions: !1,
+			noValidate: !1,
 			errors: {},
 			values: {}
 		},

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

@@ -16,6 +16,7 @@ declare const Form: {
             readonly method: "get";
             readonly actionUrl: "";
             readonly managedByInteractions: false;
+            readonly noValidate: false;
             readonly errors: {};
             readonly values: {};
         };
@@ -57,6 +58,7 @@ declare const Form: {
     __attributes: Partial<{
         values: Record<string, unknown>;
         method: "get" | "post";
+        noValidate: boolean;
         actionUrl: string;
         managedByInteractions: boolean;
         errors: Record<string, string>;

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

@@ -2,7 +2,7 @@ import { ChangeEvent, RefObject } from 'react';
 export type FormControlProps = {
     ref: RefObject<HTMLElement>;
     className: string;
-    subType: 'text' | 'number' | 'email' | 'password' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden';
+    subType: 'text' | 'number' | 'email' | 'password' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden';
     name: string;
     label: string;
     placeholder: string;
@@ -16,9 +16,17 @@ export type FormControlProps = {
     /**
      * The rules a value has to meet before the form submits, checked by the form at submit time and by the control when
      * it loses focus. `0` and `''` mean no rule. See `validateField` for what each one says when it is broken.
+     *
+     * Each `…Message` is the sentence shown under the control when that rule is broken, in the site's language; empty
+     * falls back to an English one. `formatMessage` speaks for the shape the control's own type asks of its value — an
+     * address, for an `email` — so it is one attribute however many types come to have a shape.
      */
+    requiredMessage: string;
     minLength: number;
+    minLengthMessage: string;
     maxLength: number;
+    maxLengthMessage: string;
+    formatMessage: string;
     pattern: string;
     patternMessage: string;
     /** The `name` of another control in the same form this one has to repeat — a password confirmation, typically. */

package/dist/elements/form/FormControl/FormControl.mjs

@@ -105,6 +105,7 @@ var y = ({ ref: e, className: i = "", subType: y = "text", name: b = "", label:
 				"number",
 				"email",
 				"password",
+				"date",
 				"time"
 			].includes(y) && /* @__PURE__ */ g(s, {
 				id: `${P}_${N}`,

package/dist/elements/form/FormControl/Settings.d.ts

@@ -1,5 +1,5 @@
 type SettingsProps = {
-    subType?: 'text' | 'number' | 'time' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
+    subType?: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
     name?: string;
     label?: string;
     placeholder?: string;
@@ -7,8 +7,12 @@ type SettingsProps = {
     defaultValue?: string;
     options?: string[];
     required?: boolean;
+    requiredMessage?: string;
     minLength?: number;
+    minLengthMessage?: string;
     maxLength?: number;
+    maxLengthMessage?: string;
+    formatMessage?: string;
     pattern?: string;
     patternMessage?: string;
     matches?: string;
@@ -18,5 +22,5 @@ type SettingsProps = {
     previewError?: boolean;
     onUpdate?: (key: string, value: string | boolean | number | string[]) => void;
 };
-declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, minLength, maxLength, pattern, patternMessage, matches, matchesMessage, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, requiredMessage, minLength, minLengthMessage, maxLength, maxLengthMessage, formatMessage, pattern, patternMessage, matches, matchesMessage, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;