@plitzi/sdk-elements 0.38.5 → 0.38.7

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

@@ -4,22 +4,23 @@ import { RootElement as n } from "../../../Element/RootElement.mjs";
 import r from "./declaration.mjs";
 import { VISUALLY_HIDDEN as i } from "./components/visuallyHidden.mjs";
 import a from "./components/Label.mjs";
-import o from "./hocs/withFieldValue.mjs";
-import s from "./inputs/Checkbox.mjs";
-import c from "./inputs/Hidden.mjs";
-import l from "./inputs/Input.mjs";
-import u from "./inputs/Select.mjs";
-import d from "./inputs/Textarea.mjs";
-import { use as f, useCallback as p, useEffect as m } from "react";
-import h from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { createStoreHook as g } from "@plitzi/nexus/react";
+import { isChecked as o } from "./helpers/isChecked.mjs";
+import s from "./hocs/withFieldValue.mjs";
+import c from "./inputs/Checkbox.mjs";
+import l from "./inputs/Hidden.mjs";
+import u from "./inputs/Input.mjs";
+import d from "./inputs/Select.mjs";
+import f from "./inputs/Textarea.mjs";
+import { use as p, useCallback as m, useEffect as h } from "react";
+import g from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { createStoreHook as ee } from "@plitzi/nexus/react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import y from "clsx";
 //#region src/elements/form/FormControl/FormControl.tsx
-var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !0, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
-	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = h(), { interactionsManager: H } = f(V), { useStore: U } = g(), [W] = U("runtime.sources.form"), G = p((e) => {
+var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !0, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
+	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
 		if (P?.(e), !B) return;
-		let { target: t } = e, n = t instanceof HTMLInputElement && (t.type === "checkbox" || b === "switch") ? t.checked : t.value;
+		let { target: t } = e, n = t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked : t.value;
 		H.interactionTrigger(I, "onChange", {
 			value: n,
 			name: x
@@ -27,12 +28,22 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 	}, [
 		P,
 		B,
-		b,
 		H,
 		I,
 		x
-	]), K = W?.registerField, q = W?.unregisterField, J = ["checkbox", "switch"].includes(b), Y = b === "hidden", X = E && B && R, Z = N && B ? `${L}_${I}_error` : void 0;
-	return m(() => {
+	]), K = W?.registerField, q = W?.unregisterField, J = ["checkbox", "switch"].includes(b), Y = b === "hidden", X = E && B && R, Z = C && B, Q = N && B ? `${L}_${I}_error` : void 0, $ = J && /* @__PURE__ */ _(c, {
+		variant: b === "switch" ? "switch" : "checkbox",
+		id: `${L}_${I}`,
+		name: x,
+		checked: o(M),
+		className: z.input,
+		required: k,
+		disabled: D,
+		onChange: G,
+		onValidate: F,
+		errorId: Q
+	});
+	return h(() => {
 		if (K && q) return K({
 			name: x,
 			path: x
@@ -47,51 +58,35 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 		className: y("plitzi-component__form-control", {
 			"form-control--invalid": N && B,
 			[`plitzi-component__form-control-${b}`]: b
-		}, o),
+		}, s),
 		children: [
 			!J && !Y && S && /* @__PURE__ */ _(a, {
 				targetInput: `${L}_${I}`,
 				previewMode: B,
 				className: z.label,
+				requiredClassName: z.requiredMark,
 				type: b,
 				required: k,
-				hidden: C && B,
+				hidden: Z,
 				children: S
 			}),
 			J && S && /* @__PURE__ */ v(a, {
 				targetInput: `${L}_${I}`,
 				previewMode: B,
 				className: z.label,
+				requiredClassName: z.requiredMark,
 				type: b,
 				required: k,
-				children: [b === "checkbox" && /* @__PURE__ */ _(s, {
-					id: `${L}_${I}`,
-					name: x,
-					value: M,
-					className: z.input,
-					placeholder: w,
-					required: k,
-					disabled: D,
-					onChange: G,
-					onValidate: F,
-					errorId: Z
-				}), C && B ? /* @__PURE__ */ _("span", {
-					style: i,
-					children: S
-				}) : S]
-			}),
-			b === "checkbox" && !S && /* @__PURE__ */ _(s, {
-				id: `${L}_${I}`,
-				name: x,
-				value: M,
-				className: z.input,
-				placeholder: w,
-				required: k,
-				disabled: D,
-				onChange: G,
-				onValidate: F,
-				errorId: Z
+				children: [
+					$,
+					Z && /* @__PURE__ */ _("span", {
+						style: i,
+						children: S
+					}),
+					!Z && S
+				]
 			}),
+			J && !S && $,
 			[
 				"text",
 				"number",
@@ -103,12 +98,14 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 				"date",
 				"time",
 				"color"
-			].includes(b) && /* @__PURE__ */ _(l, {
+			].includes(b) && /* @__PURE__ */ _(u, {
 				id: `${L}_${I}`,
 				name: x,
 				value: M,
 				type: b,
 				className: z.input,
+				fieldClassName: z.field,
+				iconClassName: z.icon,
 				placeholder: w,
 				autoComplete: b !== "password" && T,
 				autoFocus: X,
@@ -118,9 +115,9 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 				readOnly: j || !B,
 				onChange: G,
 				onValidate: F,
-				errorId: Z
+				errorId: Q
 			}),
-			b === "hidden" && /* @__PURE__ */ _(c, {
+			b === "hidden" && /* @__PURE__ */ _(l, {
 				id: `${L}_${I}`,
 				name: x,
 				value: M,
@@ -128,19 +125,20 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 				disabled: D,
 				previewMode: B
 			}),
-			b === "select" && /* @__PURE__ */ _(u, {
+			b === "select" && /* @__PURE__ */ _(d, {
 				id: `${L}_${I}`,
 				name: x,
 				onChange: G,
 				onValidate: F,
-				errorId: Z,
+				errorId: Q,
 				value: M,
 				className: z.input,
+				fieldClassName: z.field,
 				placeholder: w,
 				disabled: D,
 				options: O
 			}),
-			b === "textarea" && /* @__PURE__ */ _(d, {
+			b === "textarea" && /* @__PURE__ */ _(f, {
 				id: `${L}_${I}`,
 				name: x,
 				value: M,
@@ -153,16 +151,16 @@ var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label:
 				readOnly: j,
 				onChange: G,
 				onValidate: F,
-				errorId: Z
+				errorId: Q
 			}),
 			N && /* @__PURE__ */ _("div", {
-				id: Z,
+				id: Q,
 				role: "alert",
 				className: y("form-control__error-message", z.error),
 				children: N
 			})
 		]
 	});
-}, x = e(o(b));
+}, x = e(s(b));
 //#endregion
 export { b as FormControl, x as default };

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

@@ -105,6 +105,10 @@ var l = (e) => {
 						value: "checkbox",
 						children: "Checkbox"
 					}),
+					/* @__PURE__ */ r("option", {
+						value: "switch",
+						children: "Switch"
+					}),
 					/* @__PURE__ */ r("option", {
 						value: "textarea",
 						children: "Long Text"

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

@@ -9,6 +9,8 @@ export type LabelProps = {
     required: boolean;
     /** Named for assistive technology only: the field's design shows what it is for some other way. */
     hidden?: boolean;
+    /** The class of the `*` a required field's label ends with — the `requiredMark` slot. */
+    requiredClassName?: string;
 };
-declare const Label: ({ ref, children, targetInput, type, previewMode, required, hidden, className }: LabelProps) => import('react').JSX.Element;
+declare const Label: ({ ref, children, targetInput, type, previewMode, required, hidden, className, requiredClassName }: LabelProps) => import('react').JSX.Element;
 export default Label;

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

@@ -3,8 +3,8 @@ import { useCallback as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import i from "clsx";
 //#region src/elements/form/FormControl/components/Label.tsx
-var a = ({ ref: a, children: o, targetInput: s = "", type: c = "text", previewMode: l = !0, required: u = !0, hidden: d = !1, className: f = "" }) => {
-	let p = t((e) => {
+var a = ({ ref: a, children: o, targetInput: s = "", type: c = "text", previewMode: l = !0, required: u = !0, hidden: d = !1, className: f = "", requiredClassName: p }) => {
+	let m = t((e) => {
 		l || e.preventDefault();
 	}, [l]);
 	return l ? /* @__PURE__ */ r("label", {
@@ -13,15 +13,15 @@ var a = ({ ref: a, children: o, targetInput: s = "", type: c = "text", previewMo
 		htmlFor: s,
 		style: d ? e : void 0,
 		children: [o, u && o && /* @__PURE__ */ n("span", {
-			className: "form-control__label--required",
+			className: i("form-control__label--required", p),
 			children: "*"
 		})]
 	}) : /* @__PURE__ */ r("label", {
 		ref: a,
 		className: i(`form-control__label-${c}`, f),
-		onClick: p,
+		onClick: m,
 		children: [o, u && o && /* @__PURE__ */ n("span", {
-			className: "form-control__label--required",
+			className: i("form-control__label--required", p),
 			children: "*"
 		})]
 	});