@plitzi/sdk-elements 0.37.2 → 0.37.4

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

@@ -1,6 +1,6 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/form/FormControl/declaration.ts
-var t = {
+var n = {
 	width: "100%",
 	display: "flex",
 	"align-items": "center",
@@ -29,7 +29,7 @@ var t = {
 	"line-height": "20px",
 	outline: "none",
 	position: "relative"
-}, n = {
+}, r = {
 	display: "flex",
 	cursor: "pointer",
 	"font-weight": "600",
@@ -37,15 +37,29 @@ var t = {
 	"line-height": "18px",
 	color: "#6b7280",
 	"user-select": "none"
-}, r = {
-	...n,
-	"margin-bottom": "4px"
 }, i = {
+	...r,
+	"margin-bottom": "4px"
+}, a = {
 	display: "block",
 	color: "red",
 	"margin-top": "4px"
-}, a = e()({
+}, o = e()({
 	type: "formControl",
+	attributeValues: { subType: t()([
+		"text",
+		"number",
+		"email",
+		"password",
+		"date",
+		"time",
+		"checkbox",
+		"switch",
+		"select",
+		"textarea",
+		"hidden",
+		"color"
+	]) },
 	triggers: { onChange: {
 		action: "onChange",
 		title: "On Change",
@@ -61,9 +75,11 @@ var t = {
 			subType: "text",
 			name: "",
 			label: "Label",
+			hideLabel: !1,
 			placeholder: "",
 			defaultValue: "",
 			autoComplete: !0,
+			autoFocus: !1,
 			disabled: !1,
 			options: [],
 			required: !0,
@@ -120,8 +136,8 @@ var t = {
 					style: {
 						base: {},
 						input: { default: {} },
-						label: { default: r },
-						error: { default: i }
+						label: { default: i },
+						error: { default: a }
 					}
 				},
 				text: {
@@ -129,9 +145,9 @@ var t = {
 					displayMode: "desktop",
 					style: {
 						base: { default: {} },
-						input: { default: t },
-						label: { default: r },
-						error: { default: i }
+						input: { default: n },
+						label: { default: i },
+						error: { default: a }
 					}
 				},
 				password: {
@@ -139,9 +155,9 @@ var t = {
 					displayMode: "desktop",
 					style: {
 						base: { default: {} },
-						input: { default: t },
-						label: { default: r },
-						error: { default: i }
+						input: { default: n },
+						label: { default: i },
+						error: { default: a }
 					}
 				},
 				number: {
@@ -149,9 +165,9 @@ var t = {
 					displayMode: "desktop",
 					style: {
 						base: { default: {} },
-						input: { default: t },
-						label: { default: r },
-						error: { default: i }
+						input: { default: n },
+						label: { default: i },
+						error: { default: a }
 					}
 				},
 				email: {
@@ -159,9 +175,9 @@ var t = {
 					displayMode: "desktop",
 					style: {
 						base: { default: {} },
-						input: { default: t },
-						label: { default: r },
-						error: { default: i }
+						input: { default: n },
+						label: { default: i },
+						error: { default: a }
 					}
 				},
 				textarea: {
@@ -169,9 +185,9 @@ var t = {
 					displayMode: "desktop",
 					style: {
 						base: { default: {} },
-						input: { default: t },
-						label: { default: r },
-						error: { default: i }
+						input: { default: n },
+						label: { default: i },
+						error: { default: a }
 					}
 				},
 				checkbox: {
@@ -185,8 +201,8 @@ var t = {
 							"margin-left": "0px",
 							"margin-right": "4px"
 						} },
-						label: { default: n },
-						error: { default: i }
+						label: { default: r },
+						error: { default: a }
 					}
 				},
 				select: {
@@ -195,11 +211,11 @@ var t = {
 					style: {
 						base: { default: {} },
 						input: { default: {
-							...t,
+							...n,
 							cursor: "pointer"
 						} },
-						label: r,
-						error: { default: i }
+						label: i,
+						error: { default: a }
 					}
 				}
 			}
@@ -208,4 +224,4 @@ var t = {
 	}
 });
 //#endregion
-export { a as default };
+export { o as default };

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

@@ -1,97 +1,104 @@
 import { validateField as e } from "../helpers/validateField.mjs";
-import { useCallback as t, useEffect as n, useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as a } from "@plitzi/plitzi-ui/helpers";
-import { createStoreHook as o } from "@plitzi/nexus/react";
-import { getDisplayName as s } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as c } from "react/jsx-runtime";
+import { useCallback as t, useEffect as n, useMemo as r, useState as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as s } from "@plitzi/nexus/react";
+import { getDisplayName as c } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/elements/form/FormControl/hocs/withFieldValue.tsx
-var l = (l) => {
-	let u = (s) => {
-		let { ref: u, name: d = "", subType: f = "text", defaultValue: p = "", required: m = !0, requiredMessage: h = "", minLength: g = 0, minLengthMessage: _ = "", maxLength: v = 0, maxLengthMessage: y = "", formatMessage: b = "", pattern: x = "", patternMessage: S = "", matches: C = "", matchesMessage: w = "", previewError: T = !1 } = s, { settings: { previewMode: E } } = i(), { useStore: D } = o(), [O] = D("runtime.sources.form");
-		if (!O) return /* @__PURE__ */ c(l, { ...s });
-		let { setFieldValue: k, setFieldError: A, registerValidator: j, unregisterValidator: M, errors: N, values: P } = O, F = r(() => a(P, d, p), [
+var u = (u) => {
+	let d = (c) => {
+		let { ref: d, name: f = "", subType: p = "text", defaultValue: m = "", required: h = !0, requiredMessage: g = "", minLength: _ = 0, minLengthMessage: v = "", maxLength: y = 0, maxLengthMessage: b = "", formatMessage: x = "", pattern: S = "", patternMessage: C = "", matches: w = "", matchesMessage: T = "", previewError: E = !1 } = c, { settings: { previewMode: D } } = a(), { useStore: O } = s(), [k] = O("runtime.sources.form"), [A, j] = i(m), [M, N] = i(m);
+		!k && M !== m && (N(m), j(m));
+		let P = k?.values, F = r(() => k ? o(P, f, m) : A, [
+			k,
 			P,
-			d,
-			p
-		]), I = r(() => !E && T ? "This is an error message" : N[d], [
+			f,
+			m,
+			A
+		]), I = r(() => !D && E ? "This is an error message" : k?.errors[f] ?? "", [
+			D,
 			E,
-			T,
-			N,
-			d
+			k?.errors,
+			f
 		]), L = r(() => ({
-			required: m,
-			requiredMessage: h,
-			minLength: g,
-			minLengthMessage: _,
-			maxLength: v,
-			maxLengthMessage: y,
-			type: f,
-			formatMessage: b,
-			pattern: x,
-			patternMessage: S,
-			matches: C,
-			matchesMessage: w
+			required: h,
+			requiredMessage: g,
+			minLength: _,
+			minLengthMessage: v,
+			maxLength: y,
+			maxLengthMessage: b,
+			type: p,
+			formatMessage: x,
+			pattern: S,
+			patternMessage: C,
+			matches: w,
+			matchesMessage: T
 		}), [
-			m,
 			h,
 			g,
 			_,
 			v,
 			y,
-			f,
 			b,
+			p,
 			x,
 			S,
 			C,
-			w
-		]);
+			w,
+			T
+		]), R = k?.registerValidator, z = k?.unregisterValidator, B = k?.setFieldValue, V = k?.setFieldError;
 		n(() => {
-			if (d) return j(d, (t) => e(a(t, d, p), L, t)), () => M(d);
+			if (f && R && z) return R(f, (t) => e(o(t, f, m), L, t)), () => z(f);
 		}, [
-			d,
-			p,
+			f,
+			m,
 			L,
-			j,
-			M
+			R,
+			z
 		]), n(() => {
-			p && F && d && k(d, F);
+			B && m && F && f && B(f, F);
 		}, [
-			p,
-			d,
-			k,
+			m,
+			f,
+			B,
 			F
 		]);
-		let R = t((e) => {
-			e.target.type === "radio" || e.target.type === "checkbox" || f === "switch" ? k(d, e.target.checked) : k(d, e.target.value);
+		let H = t((e) => {
+			let t = e.target.type === "radio" || e.target.type === "checkbox" || p === "switch";
+			if (!B) {
+				j(t ? String(e.target.checked) : e.target.value);
+				return;
+			}
+			B(f, t ? e.target.checked : e.target.value);
 		}, [
-			k,
-			d,
-			f
-		]), z = t(() => A(d, e(F, L, P)), [
+			B,
+			f,
+			p
+		]), U = t(() => V?.(f, e(F, L, P ?? {})), [
 			F,
 			L,
 			P,
-			d,
-			A
+			f,
+			V
 		]);
-		return r(() => /* @__PURE__ */ c(l, {
-			...s,
-			ref: u,
+		return r(() => /* @__PURE__ */ l(u, {
+			...c,
+			ref: d,
 			value: F,
 			error: I,
-			handleChange: R,
-			handleValidate: z
+			handleChange: H,
+			handleValidate: U
 		}), [
-			s,
-			u,
+			c,
+			d,
 			I,
 			F,
-			R,
-			z
+			H,
+			U
 		]);
 	};
-	return u.displayName = `withFieldValue(${s(l)})`, u;
+	return d.displayName = `withFieldValue(${c(u)})`, d;
 };
 //#endregion
-export { l as default };
+export { u as default };

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

@@ -16,9 +16,11 @@ declare const FormControl: {
             readonly subType: "text";
             readonly name: "";
             readonly label: "Label";
+            readonly hideLabel: false;
             readonly placeholder: "";
             readonly defaultValue: "";
             readonly autoComplete: true;
+            readonly autoFocus: false;
             readonly disabled: false;
             readonly options: readonly [];
             readonly required: true;
@@ -495,6 +497,9 @@ declare const FormControl: {
         settings: {};
     };
     type: "formControl";
+    attributeValues: {
+        readonly subType: readonly string[];
+    };
     triggers: {
         readonly onChange: {
             readonly action: "onChange";

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

@@ -9,6 +9,11 @@ export type CheckboxProps = {
     disabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     onValidate?: () => void;
+    /**
+     * The id of the message saying what is wrong with the value, while something is: the field is then marked invalid
+     * and described by it, so a screen reader or a browser agent hears why the form would not send.
+     */
+    errorId?: string;
 };
-declare const Checkbox: ({ className, id, name, placeholder, value, required, disabled, onChange, onValidate }: CheckboxProps) => import('react').JSX.Element;
+declare const Checkbox: ({ className, id, name, placeholder, value, required, disabled, onChange, onValidate, errorId }: CheckboxProps) => import('react').JSX.Element;
 export default Checkbox;

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

@@ -2,11 +2,13 @@ import { useCallback as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
 import n from "clsx";
 //#region src/elements/form/FormControl/inputs/Checkbox.tsx
-var r = ({ className: r = "", id: i = "", name: a = "", placeholder: o = "", value: s = "", required: c = !0, disabled: l = !1, onChange: u, onValidate: d }) => {
-	let f = e(() => d?.(), [d]);
+var r = ({ className: r = "", id: i = "", name: a = "", placeholder: o = "", value: s = "", required: c = !0, disabled: l = !1, onChange: u, onValidate: d, errorId: f }) => {
+	let p = e(() => d?.(), [d]);
 	return /* @__PURE__ */ t("input", {
 		className: n("form-control__checkbox-container", r),
 		id: i,
+		"aria-invalid": f ? !0 : void 0,
+		"aria-describedby": f,
 		name: a,
 		type: "checkbox",
 		placeholder: o,
@@ -14,7 +16,7 @@ var r = ({ className: r = "", id: i = "", name: a = "", placeholder: o = "", val
 		required: c,
 		disabled: l,
 		onChange: u,
-		onBlur: f
+		onBlur: p
 	});
 };
 //#endregion

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

@@ -6,6 +6,8 @@ export type InputProps = {
     value?: string;
     type?: string;
     autoComplete?: boolean;
+    /** Takes the focus while true: as it becomes true, whether on mount or as the field is shown again. */
+    autoFocus?: boolean;
     required?: boolean;
     /** `0` for none. The one rule the browser enforces itself, and by the kindest means: it stops the typing. */
     maxLength?: number;
@@ -13,6 +15,11 @@ export type InputProps = {
     readOnly?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onValidate?: () => void;
+    /**
+     * The id of the message saying what is wrong with the value, while something is: the field is then marked invalid
+     * and described by it, so a screen reader or a browser agent hears why the form would not send.
+     */
+    errorId?: string;
 };
-declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, required, maxLength, disabled, readOnly, onChange, onValidate }: InputProps) => import('react').JSX.Element;
+declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, autoFocus, required, maxLength, disabled, readOnly, onChange, onValidate, errorId }: InputProps) => import('react').JSX.Element;
 export default Input;

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

@@ -1,43 +1,49 @@
-import { useCallback as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "clsx";
+import e from "./useFocusWhenShown.mjs";
+import { useCallback as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
 //#region src/elements/form/FormControl/inputs/Input.tsx
-var o = ({ className: o = "", id: s = "", name: c = "", placeholder: l = "", value: u = "", type: d = "text", autoComplete: f = !1, required: p = !0, maxLength: m = 0, disabled: h = !1, readOnly: g = !1, onChange: _, onValidate: v }) => {
-	let [y, b] = n(!1), x = t(null), S = e(() => b((e) => !e), [b]), C = e(() => {
-		x.current?.focus();
-	}, [x]), w = e(() => v?.(), [v]);
-	return /* @__PURE__ */ i("div", {
-		className: a("form-control__input-container", o),
-		onClick: C,
-		children: [
-			/* @__PURE__ */ r("input", {
-				ref: x,
-				className: "input-container__input",
-				id: s,
-				name: c,
-				type: d === "password" && y ? "text" : d,
-				placeholder: l,
-				value: u,
-				required: p,
-				maxLength: m > 0 ? m : void 0,
-				autoComplete: f ? "on" : "off",
-				disabled: h,
-				readOnly: g,
-				onChange: _,
-				onBlur: w
-			}),
-			d === "password" && !y && /* @__PURE__ */ r("div", {
-				className: "form-input__icon",
-				onClick: S,
-				children: /* @__PURE__ */ r("i", { className: "fa-solid fa-eye" })
-			}),
-			d === "password" && y && /* @__PURE__ */ r("div", {
-				className: "form-input__icon",
-				onClick: S,
-				children: /* @__PURE__ */ r("i", { className: "fa-solid fa-eye-slash" })
+var s = ({ className: s = "", id: c = "", name: l = "", placeholder: u = "", value: d = "", type: f = "text", autoComplete: p = !1, autoFocus: m = !1, required: h = !0, maxLength: g = 0, disabled: _ = !1, readOnly: v = !1, onChange: y, onValidate: b, errorId: x }) => {
+	let [S, C] = r(!1), w = n(null);
+	e(w, m);
+	let T = t(() => C((e) => !e), [C]), E = t((e) => {
+		let t = w.current;
+		if (t?.focus(), f === "color" && t && e.target !== t) try {
+			t.showPicker();
+		} catch {}
+	}, [w, f]), D = t(() => b?.(), [b]);
+	return /* @__PURE__ */ a("div", {
+		className: o("form-control__input-container", s),
+		onClick: E,
+		children: [/* @__PURE__ */ i("input", {
+			ref: w,
+			className: "input-container__input",
+			id: c,
+			"aria-invalid": x ? !0 : void 0,
+			"aria-describedby": x,
+			name: l,
+			type: f === "password" && S ? "text" : f,
+			placeholder: u,
+			value: d,
+			required: h,
+			maxLength: g > 0 ? g : void 0,
+			autoComplete: p ? "on" : "off",
+			disabled: _,
+			readOnly: v,
+			onChange: y,
+			onBlur: D
+		}), f === "password" && /* @__PURE__ */ i("button", {
+			type: "button",
+			className: "form-input__icon",
+			"aria-pressed": S,
+			title: "Show password",
+			onClick: T,
+			children: /* @__PURE__ */ i("i", {
+				className: S ? "fa-solid fa-eye-slash" : "fa-solid fa-eye",
+				"aria-hidden": "true"
 			})
-		]
+		})]
 	});
 };
 //#endregion
-export { o as default };
+export { s as default };

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

@@ -12,6 +12,11 @@ export type SelectProps = {
     disabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
     onValidate?: () => void;
+    /**
+     * The id of the message saying what is wrong with the value, while something is: the field is then marked invalid
+     * and described by it, so a screen reader or a browser agent hears why the form would not send.
+     */
+    errorId?: string;
 };
-declare const Select: ({ id, name, options, placeholder, value, className, disabled, onChange, onValidate }: SelectProps) => import('react').JSX.Element;
+declare const Select: ({ id, name, options, placeholder, value, className, disabled, onChange, onValidate, errorId }: SelectProps) => import('react').JSX.Element;
 export default Select;

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

@@ -2,12 +2,12 @@ import { useCallback as e, useMemo as t, useRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a from "clsx";
 //#region src/elements/form/FormControl/inputs/Select.tsx
-var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u = "", className: d = "", disabled: f = !1, onChange: p, onValidate: m }) => {
-	let h = n(null), g = e(() => {
-		h.current?.click();
-	}, [h]), _ = e((e) => {
+var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u = "", className: d = "", disabled: f = !1, onChange: p, onValidate: m, errorId: h }) => {
+	let g = n(null), _ = e(() => {
+		g.current?.click();
+	}, [g]), v = e((e) => {
 		e.stopPropagation();
-	}, []), v = e(() => m?.(), [m]), y = t(() => Array.isArray(c) ? c.map((e) => {
+	}, []), y = e(() => m?.(), [m]), b = t(() => Array.isArray(c) ? c.map((e) => {
 		if (typeof e == "string") return {
 			value: e,
 			label: e
@@ -26,21 +26,23 @@ var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u =
 	}) : [], [c]);
 	return /* @__PURE__ */ r("div", {
 		className: a("form-control__select-container", d),
-		onClick: g,
+		onClick: _,
 		children: /* @__PURE__ */ i("select", {
-			ref: h,
+			ref: g,
 			id: o,
+			"aria-invalid": h ? !0 : void 0,
+			"aria-describedby": h,
 			name: s,
 			onChange: p,
 			value: u,
 			className: "select-container__select",
 			disabled: f,
-			onClick: _,
-			onBlur: v,
+			onClick: v,
+			onBlur: y,
 			children: [l && /* @__PURE__ */ r("option", {
 				value: "",
 				children: l
-			}), y.map((e, t) => /* @__PURE__ */ r("option", {
+			}), b.map((e, t) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				children: e.label
 			}, t))]

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

@@ -5,6 +5,8 @@ export type TextareaProps = {
     name?: string;
     placeholder?: string;
     value?: string;
+    /** Takes the focus while true: as it becomes true, whether on mount or as the field is shown again. */
+    autoFocus?: boolean;
     required?: boolean;
     /** `0` for none. */
     maxLength?: number;
@@ -12,6 +14,11 @@ export type TextareaProps = {
     readOnly?: boolean;
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     onValidate?: () => void;
+    /**
+     * The id of the message saying what is wrong with the value, while something is: the field is then marked invalid
+     * and described by it, so a screen reader or a browser agent hears why the form would not send.
+     */
+    errorId?: string;
 };
-declare const Textarea: ({ className, id, name, placeholder, value, required, maxLength, disabled, readOnly, onChange, onValidate }: TextareaProps) => import('react').JSX.Element;
+declare const Textarea: ({ className, id, name, placeholder, value, autoFocus, required, maxLength, disabled, readOnly, onChange, onValidate, errorId }: TextareaProps) => import('react').JSX.Element;
 export default Textarea;

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

@@ -1,26 +1,31 @@
-import { useCallback as e, useRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import r from "clsx";
+import e from "./useFocusWhenShown.mjs";
+import { useCallback as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/form/FormControl/inputs/Textarea.tsx
-var i = ({ className: i = "", id: a = "", name: o = "", placeholder: s = "", value: c = "", required: l = !0, maxLength: u = 0, disabled: d = !1, readOnly: f = !1, onChange: p, onValidate: m }) => {
-	let h = t(null), g = e((e) => {
+var a = ({ className: a = "", id: o = "", name: s = "", placeholder: c = "", value: l = "", autoFocus: u = !1, required: d = !0, maxLength: f = 0, disabled: p = !1, readOnly: m = !1, onChange: h, onValidate: g, errorId: _ }) => {
+	let v = n(null);
+	e(v, u);
+	let y = t((e) => {
 		e.stopPropagation();
-	}, []), _ = e(() => m?.(), [m]);
-	return /* @__PURE__ */ n("textarea", {
-		ref: h,
-		className: r("form-control__textarea-container", i),
-		id: a,
-		name: o,
-		placeholder: s,
-		value: c,
-		readOnly: f,
-		required: l,
-		maxLength: u > 0 ? u : void 0,
-		disabled: d,
-		onChange: p,
-		onBlur: _,
-		onClick: g
+	}, []), b = t(() => g?.(), [g]);
+	return /* @__PURE__ */ r("textarea", {
+		ref: v,
+		className: i("form-control__textarea-container", a),
+		id: o,
+		"aria-invalid": _ ? !0 : void 0,
+		"aria-describedby": _,
+		name: s,
+		placeholder: c,
+		value: l,
+		readOnly: m,
+		required: d,
+		maxLength: f > 0 ? f : void 0,
+		disabled: p,
+		onChange: h,
+		onBlur: b,
+		onClick: y
 	});
 };
 //#endregion
-export { i as default };
+export { a as default };

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

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * A field that takes the focus each time it is shown: as it mounts, and again whenever it — or anything it is in — goes
+ * from hidden to shown. The native `autofocus` only acts on insertion, and a panel that hides keeps its field mounted.
+ */
+declare const useFocusWhenShown: (ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>, shown: boolean) => void;
+export default useFocusWhenShown;