@plitzi/sdk-elements 0.33.2 → 0.34.0

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

@@ -1,54 +1,17 @@
-import e, { Form as t } from "./Form.mjs";
-import { jsx as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/icons/Form";
+import e from "./declaration.mjs";
+import t, { Form as n } from "./Form.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/icons/Form";
 //#region src/elements/form/Form/index.tsx
-var i = Object.assign(e, {
-	type: "form",
+var a = Object.assign(t, {
+	...e,
 	content: {
-		attributes: {
-			method: "get",
-			actionUrl: "",
-			managedByInteractions: !1,
-			errors: {},
-			values: {}
-		},
-		definition: {
-			label: "Form",
-			type: "form",
-			description: "",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
+		...e.content,
 		market: {
-			category: "form",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: /* @__PURE__ */ n(r, {})
-		},
-		defaultStyle: {
-			name: "Form",
-			displayMode: "desktop",
-			style: { base: { default: {
-				"min-width": "50px",
-				"min-height": "50px"
-			} } }
-		},
-		settings: {}
+			...e.content.market,
+			icon: /* @__PURE__ */ r(i, {})
+		}
 	}
 });
 //#endregion
-export { t as Form, i as default };
+export { n as Form, a as default };

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

@@ -13,13 +13,31 @@ export type FormControlProps = {
         value: string;
     }[];
     required: boolean;
+    /**
+     * 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.
+     */
+    minLength: number;
+    maxLength: number;
+    pattern: string;
+    patternMessage: string;
+    /** The `name` of another control in the same form this one has to repeat — a password confirmation, typically. */
+    matches: string;
+    matchesMessage: string;
     readOnly: boolean;
     value: string;
     error: string;
-    handleChange: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>) => void;
-    handleValidate: () => void;
+    /**
+     * Supplied by `withFieldValue` — and only when there is a form to supply it.
+     *
+     * A control outside a form is a state that HOC handles explicitly (it renders the component with none of its
+     * additions), so these are optional in fact and were only ever required in the type. A select that filters a
+     * screen is exactly such a control: nothing to submit, and the change itself is the event.
+     */
+    handleChange?: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>) => void;
+    handleValidate?: () => void;
 };
-declare const FormControl: ({ ref, className, subType, name, label, placeholder, autoComplete, disabled, options, required, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import("react").JSX.Element | null;
+declare const FormControl: ({ ref, className, subType, name, label, placeholder, autoComplete, disabled, options, required, maxLength, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import("react").JSX.Element | null;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<FormControlProps>>): import("react").JSX.Element;
     displayName: string;

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

@@ -1,80 +1,104 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "./components/Label.mjs";
-import r from "./hocs/withFieldValue.mjs";
-import i from "./inputs/Checkbox.mjs";
-import a from "./inputs/Hidden.mjs";
-import o from "./inputs/Input.mjs";
-import s from "./inputs/Select.mjs";
-import c from "./inputs/Textarea.mjs";
-import l from "../../../Element/hocs/withElement.mjs";
-import { useEffect as u } from "react";
-import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { createStoreHook as f } from "@plitzi/nexus/react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import h from "clsx";
+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 "./components/Label.mjs";
+import i from "./hocs/withFieldValue.mjs";
+import a from "./inputs/Checkbox.mjs";
+import o from "./inputs/Hidden.mjs";
+import s from "./inputs/Input.mjs";
+import c from "./inputs/Select.mjs";
+import l from "./inputs/Textarea.mjs";
+import { use as u, useCallback as d, useEffect as f, useMemo as p } from "react";
+import m from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { createStoreHook as h } from "@plitzi/nexus/react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import v from "clsx";
 //#region src/elements/form/FormControl/FormControl.tsx
-var g = ({ ref: r, className: l = "", subType: g = "text", name: _ = "", label: v = "Label", placeholder: y = "", autoComplete: b = !0, disabled: x = !1, options: S = [], required: C = !0, readOnly: w = !1, value: T = "", error: E = "", handleChange: D, handleValidate: O }) => {
-	let { id: k, rootId: A, definition: { styleSelectors: j } } = e(), { settings: { previewMode: M } } = d(), { useStore: N } = f(), [P] = N("runtime.sources.form");
-	if (!P && !M) return /* @__PURE__ */ p(t, {
-		ref: r,
-		className: h("plitzi-component__form-input", { "form-input--out-of-context": !M }, l),
-		children: /* @__PURE__ */ p("div", { children: "Form Input Only Works inside Form element" })
+var y = ({ ref: e, className: i = "", subType: y = "text", name: b = "", label: x = "Label", placeholder: S = "", autoComplete: C = !0, disabled: w = !1, options: T = [], required: E = !0, maxLength: D = 0, readOnly: O = !1, value: k = "", error: A = "", handleChange: j, handleValidate: M }) => {
+	let { id: N, rootId: P, definition: { styleSelectors: F } } = t(), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = m(), { interactionsManager: R } = u(L), { useStore: z } = h(), [B] = z("runtime.sources.form"), V = p(() => ({ onChange: {
+		action: "onChange",
+		title: "On Change",
+		type: "trigger",
+		params: {},
+		preview: {
+			value: "",
+			name: ""
+		}
+	} }), []), H = d((e) => {
+		if (j?.(e), !I) return;
+		let t = e.target, n = t.type === "checkbox" || y === "switch" ? t.checked : t.value;
+		R.interactionTrigger(N, "onChange", {
+			value: n,
+			name: b
+		});
+	}, [
+		j,
+		I,
+		y,
+		R,
+		N,
+		b
+	]);
+	if (!B && !I) return /* @__PURE__ */ g(n, {
+		ref: e,
+		className: v("plitzi-component__form-input", { "form-input--out-of-context": !I }, i),
+		children: /* @__PURE__ */ g("div", { children: "Form Input Only Works inside Form element" })
 	});
-	if (!P && M) return null;
-	let { registerField: F, unregisterField: I } = P, L = ["checkbox", "switch"].includes(g);
-	return u(() => (F && F({
-		name: _,
-		path: _
+	if (!B && I) return null;
+	let { registerField: U, unregisterField: W } = B, G = ["checkbox", "switch"].includes(y), K = y === "hidden";
+	return f(() => (U && U({
+		name: b,
+		path: b
 	}), () => {
-		I && I(_);
+		W && W(b);
 	}), [
-		_,
-		F,
-		I
-	]), /* @__PURE__ */ m(t, {
-		ref: r,
-		className: h("plitzi-component__form-control", {
-			"form-control--invalid": E && M,
-			[`plitzi-component__form-control-${g}`]: g
-		}, l),
+		b,
+		U,
+		W
+	]), /* @__PURE__ */ _(n, {
+		ref: e,
+		interactionTriggers: V,
+		className: v("plitzi-component__form-control", {
+			"form-control--invalid": A && I,
+			[`plitzi-component__form-control-${y}`]: y
+		}, i),
 		children: [
-			!L && v && /* @__PURE__ */ p(n, {
-				targetInput: `${A}_${k}`,
-				previewMode: M,
-				className: j.label,
-				type: g,
-				required: C,
-				children: v
+			!G && !K && x && /* @__PURE__ */ g(r, {
+				targetInput: `${P}_${N}`,
+				previewMode: I,
+				className: F.label,
+				type: y,
+				required: E,
+				children: x
 			}),
-			L && v && /* @__PURE__ */ m(n, {
-				targetInput: `${A}_${k}`,
-				previewMode: M,
-				className: j.label,
-				type: g,
-				required: C,
-				children: [g === "checkbox" && /* @__PURE__ */ p(i, {
-					id: `${A}_${k}`,
-					name: _,
-					value: T,
-					className: j.input,
-					placeholder: y,
-					required: C,
-					disabled: x,
-					onChange: D,
-					onValidate: O
-				}), v]
+			G && x && /* @__PURE__ */ _(r, {
+				targetInput: `${P}_${N}`,
+				previewMode: I,
+				className: F.label,
+				type: y,
+				required: E,
+				children: [y === "checkbox" && /* @__PURE__ */ g(a, {
+					id: `${P}_${N}`,
+					name: b,
+					value: k,
+					className: F.input,
+					placeholder: S,
+					required: E,
+					disabled: w,
+					onChange: H,
+					onValidate: M
+				}), x]
 			}),
-			g === "checkbox" && !v && /* @__PURE__ */ p(i, {
-				id: `${A}_${k}`,
-				name: _,
-				value: T,
-				className: j.input,
-				placeholder: y,
-				required: C,
-				disabled: x,
-				onChange: D,
-				onValidate: O
+			y === "checkbox" && !x && /* @__PURE__ */ g(a, {
+				id: `${P}_${N}`,
+				name: b,
+				value: k,
+				className: F.input,
+				placeholder: S,
+				required: E,
+				disabled: w,
+				onChange: H,
+				onValidate: M
 			}),
 			[
 				"text",
@@ -82,57 +106,59 @@ var g = ({ ref: r, className: l = "", subType: g = "text", name: _ = "", label:
 				"email",
 				"password",
 				"time"
-			].includes(g) && /* @__PURE__ */ p(o, {
-				id: `${A}_${k}`,
-				name: _,
-				value: T,
-				type: g,
-				className: j.input,
-				placeholder: y,
-				autoComplete: g !== "password" && b,
-				required: C,
-				disabled: x,
-				readOnly: w || !M,
-				onChange: D,
-				onValidate: O
+			].includes(y) && /* @__PURE__ */ g(s, {
+				id: `${P}_${N}`,
+				name: b,
+				value: k,
+				type: y,
+				className: F.input,
+				placeholder: S,
+				autoComplete: y !== "password" && C,
+				required: E,
+				maxLength: D,
+				disabled: w,
+				readOnly: O || !I,
+				onChange: H,
+				onValidate: M
 			}),
-			g === "hidden" && /* @__PURE__ */ p(a, {
-				id: `${A}_${k}`,
-				name: _,
-				value: T,
-				required: C,
-				disabled: x,
-				previewMode: M
+			y === "hidden" && /* @__PURE__ */ g(o, {
+				id: `${P}_${N}`,
+				name: b,
+				value: k,
+				required: E,
+				disabled: w,
+				previewMode: I
 			}),
-			g === "select" && /* @__PURE__ */ p(s, {
-				id: `${A}_${k}`,
-				name: _,
-				onChange: D,
-				onValidate: O,
-				value: T,
-				className: j.input,
-				placeholder: y,
-				disabled: x,
-				options: S
+			y === "select" && /* @__PURE__ */ g(c, {
+				id: `${P}_${N}`,
+				name: b,
+				onChange: H,
+				onValidate: M,
+				value: k,
+				className: F.input,
+				placeholder: S,
+				disabled: w,
+				options: T
 			}),
-			g === "textarea" && /* @__PURE__ */ p(c, {
-				id: `${A}_${k}`,
-				name: _,
-				value: T,
-				className: j.input,
-				placeholder: y,
-				required: C,
-				disabled: x,
-				readOnly: w,
-				onChange: D,
-				onValidate: O
+			y === "textarea" && /* @__PURE__ */ g(l, {
+				id: `${P}_${N}`,
+				name: b,
+				value: k,
+				className: F.input,
+				placeholder: S,
+				required: E,
+				maxLength: D,
+				disabled: w,
+				readOnly: O,
+				onChange: H,
+				onValidate: M
 			}),
-			E && /* @__PURE__ */ p("div", {
-				className: h("form-control__error-message", j.error),
-				children: E
+			A && /* @__PURE__ */ g("div", {
+				className: v("form-control__error-message", F.error),
+				children: A
 			})
 		]
 	});
-}, _ = l(r(g));
+}, b = e(i(y));
 //#endregion
-export { g as FormControl, _ as default };
+export { y as FormControl, b as default };

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

@@ -7,10 +7,16 @@ type SettingsProps = {
     defaultValue?: string;
     options?: string[];
     required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    patternMessage?: string;
+    matches?: string;
+    matchesMessage?: string;
     readOnly?: boolean;
     disabled?: boolean;
     previewError?: boolean;
     onUpdate?: (key: string, value: string | boolean | number | string[]) => void;
 };
-declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react").JSX.Element;
+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;
 export default Settings;

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

@@ -5,40 +5,49 @@ import a from "@plitzi/plitzi-ui/Input";
 import o from "@plitzi/plitzi-ui/TextArea";
 import s from "@plitzi/plitzi-ui/Select";
 //#region src/elements/form/FormControl/Settings.tsx
-var c = ({ subType: c = "text", name: l = "", label: u = "Label", defaultValue: d = "", placeholder: f = "", autoComplete: p = !0, options: m, required: h = !0, readOnly: g = !1, disabled: _ = !1, previewError: v = !1, onUpdate: y }) => {
-	let b = e((e) => y?.("name", e), [y]), x = e((e) => y?.("label", e), [y]), S = e((e) => y?.("placeholder", e), [y]), C = e((e) => {
-		y?.("subType", e), y?.("defaultValue", "");
-	}, [y]), w = e((e) => y?.("defaultValue", e), [y]), T = e((e) => y?.("autoComplete", e.target.checked), [y]), E = e((e) => y?.("required", e.target.checked), [y]), D = e((e) => y?.("readOnly", e.target.checked), [y]), O = e((e) => y?.("disabled", e.target.checked), [y]), k = e((e) => y?.("previewError", e.target.checked), [y]), A = e((e) => {
+var c = (e) => {
+	let t = parseInt(e, 10);
+	return Number.isNaN(t) || t < 0 ? 0 : t;
+}, l = ({ subType: l = "text", name: u = "", label: d = "Label", defaultValue: f = "", placeholder: p = "", autoComplete: m = !0, options: h, required: g = !0, minLength: _ = 0, maxLength: v = 0, pattern: y = "", patternMessage: b = "", matches: x = "", matchesMessage: S = "", readOnly: C = !1, disabled: w = !1, previewError: T = !1, onUpdate: E }) => {
+	let D = [
+		"text",
+		"textarea",
+		"number",
+		"email",
+		"password"
+	].includes(l), O = e((e) => E?.("name", e), [E]), k = e((e) => E?.("label", e), [E]), A = e((e) => E?.("placeholder", e), [E]), j = e((e) => {
+		E?.("subType", e), E?.("defaultValue", "");
+	}, [E]), M = e((e) => E?.("defaultValue", e), [E]), N = e((e) => E?.("autoComplete", e.target.checked), [E]), P = e((e) => E?.("required", e.target.checked), [E]), F = e((e) => E?.("minLength", c(e)), [E]), I = e((e) => E?.("maxLength", c(e)), [E]), L = e((e) => E?.("pattern", e), [E]), R = e((e) => E?.("patternMessage", e), [E]), z = e((e) => E?.("matches", e), [E]), B = e((e) => E?.("matchesMessage", e), [E]), V = e((e) => E?.("readOnly", e.target.checked), [E]), H = e((e) => E?.("disabled", e.target.checked), [E]), U = e((e) => E?.("previewError", e.target.checked), [E]), W = e((e) => {
 		if (!e) {
-			y?.("options", []);
+			E?.("options", []);
 			return;
 		}
-		y?.("options", e.split("\n"));
-	}, [y]), j = t(() => Array.isArray(m) ? m.join("\n") : "", [m]);
+		E?.("options", e.split("\n"));
+	}, [E]), G = t(() => Array.isArray(h) ? h.join("\n") : "", [h]);
 	return /* @__PURE__ */ r("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ n(a, {
-				value: l,
+				value: u,
 				label: "Input Name",
-				onChange: b,
+				onChange: O,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(a, {
-				value: u,
+				value: d,
 				label: "Label",
-				onChange: x,
+				onChange: k,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(a, {
-				value: f,
+				value: p,
 				label: "Placeholder",
-				onChange: S,
+				onChange: A,
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(s, {
-				value: c,
-				onChange: C,
+				value: l,
+				onChange: j,
 				label: "Input Type",
 				size: "xs",
 				children: [
@@ -81,49 +90,85 @@ var c = ({ subType: c = "text", name: l = "", label: u = "Label", defaultValue:
 				]
 			}),
 			/* @__PURE__ */ n(o, {
-				value: d,
+				value: f,
 				label: "Default Value",
-				onChange: w,
+				onChange: M,
 				size: "xs"
 			}),
-			c === "text" && /* @__PURE__ */ n(i, {
-				checked: p,
+			l === "text" && /* @__PURE__ */ n(i, {
+				checked: m,
 				label: "Auto Complete",
-				onChange: T,
+				onChange: N,
 				size: "xs"
 			}),
-			(c === "text" || c === "textarea" || c === "number" || c === "email" || c === "password") && /* @__PURE__ */ n(i, {
-				checked: g,
+			D && /* @__PURE__ */ n(i, {
+				checked: C,
 				label: "Read Only",
-				onChange: D,
+				onChange: V,
 				size: "xs"
 			}),
-			c === "select" && /* @__PURE__ */ n(o, {
-				value: j,
+			l === "select" && /* @__PURE__ */ n(o, {
+				value: G,
 				label: "Options",
-				onChange: A,
+				onChange: W,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(i, {
-				checked: h,
+				checked: g,
 				label: "Required",
-				onChange: E,
+				onChange: P,
+				size: "xs"
+			}),
+			D && /* @__PURE__ */ n(a, {
+				value: _ ? String(_) : "",
+				label: "Min Length",
+				onChange: F,
+				size: "xs"
+			}),
+			D && /* @__PURE__ */ n(a, {
+				value: v ? String(v) : "",
+				label: "Max Length",
+				onChange: I,
+				size: "xs"
+			}),
+			D && /* @__PURE__ */ n(a, {
+				value: y,
+				label: "Pattern (regular expression)",
+				onChange: L,
+				size: "xs"
+			}),
+			D && y && /* @__PURE__ */ n(a, {
+				value: b,
+				label: "Pattern Message",
+				onChange: R,
+				size: "xs"
+			}),
+			D && /* @__PURE__ */ n(a, {
+				value: x,
+				label: "Must Match Field",
+				onChange: z,
+				size: "xs"
+			}),
+			D && x && /* @__PURE__ */ n(a, {
+				value: S,
+				label: "Mismatch Message",
+				onChange: B,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(i, {
-				checked: _,
+				checked: w,
 				label: "Disabled",
-				onChange: O,
+				onChange: H,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(i, {
-				checked: v,
+				checked: T,
 				label: "Preview Error Message",
-				onChange: k,
+				onChange: U,
 				size: "xs"
 			})
 		]
 	});
 };
 //#endregion
-export { c as default };
+export { l as default };