@plitzi/sdk-elements 0.32.4 → 0.32.6

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @plitzi/sdk-elements
 
+## 0.32.6
+
+### Patch Changes
+
+- v0.32.6
+- Updated dependencies
+  - @plitzi/nexus@0.32.6
+  - @plitzi/sdk-auth@0.32.6
+  - @plitzi/sdk-dev-tools@0.32.6
+  - @plitzi/sdk-event-bridge@0.32.6
+  - @plitzi/sdk-interactions@0.32.6
+  - @plitzi/sdk-navigation@0.32.6
+  - @plitzi/sdk-schema@0.32.6
+  - @plitzi/sdk-shared@0.32.6
+
+## 0.32.5
+
+### Patch Changes
+
+- v0.32.4
+- Updated dependencies
+  - @plitzi/nexus@0.32.5
+  - @plitzi/sdk-auth@0.32.5
+  - @plitzi/sdk-dev-tools@0.32.5
+  - @plitzi/sdk-event-bridge@0.32.5
+  - @plitzi/sdk-interactions@0.32.5
+  - @plitzi/sdk-navigation@0.32.5
+  - @plitzi/sdk-schema@0.32.5
+  - @plitzi/sdk-shared@0.32.5
+
 ## 0.32.4
 
 ### Patch Changes

package/dist/Element/ElementContext.d.ts

@@ -2,6 +2,7 @@ import { Element, ElementLayout } from '@plitzi/sdk-shared';
 import { CSSProperties } from 'react';
 export type ElementContextValue<T extends 'skipHOC' | 'full' = 'full'> = {
     id: string;
+    idRef?: string;
     rootId?: string;
 } & (T extends 'skipHOC' ? {
     plitziJsxSkipHOC: true;

package/dist/Element/hocs/withElement.mjs

@@ -29,9 +29,10 @@ var m = (m) => {
 			previewMode: S
 		}), { attributes: k, definition: A, style: j, plitziElementLayout: M, elementState: N, setElementState: P } = E;
 		c("element", o(() => ({ [`${v}_setState`]: P }), [v, P]));
-		let F = /* @__PURE__ */ p(e, {
+		let F = T.idRef, I = /* @__PURE__ */ p(e, {
 			value: o(() => ({
 				id: v,
+				idRef: F,
 				rootId: y,
 				attributes: k,
 				definition: A,
@@ -44,6 +45,7 @@ var m = (m) => {
 				A,
 				N,
 				v,
+				F,
 				M,
 				y,
 				j,
@@ -98,10 +100,10 @@ var m = (m) => {
 			return f.recordProps(v, d(_.current, e)), _.current = e, /* @__PURE__ */ p(i, {
 				id: v,
 				onRender: f.onRender,
-				children: F
+				children: I
 			});
 		}
-		return F;
+		return I;
 	};
 	return g.displayName = `withElement(${h})`, g;
 };

package/dist/Element/hooks/useElementDataSource.mjs

@@ -4,7 +4,12 @@ import { useCommonStore as t } from "@plitzi/sdk-shared/store";
 var n = ({ bindings: n, sources: r }) => {
 	let i = e(() => {
 		let e = new Set(r ?? []);
-		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) for (let { source: n } of t) n && e.add(n);
+		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) {
+			for (let { source: n } of t) if (n) {
+				let t = n.indexOf(".");
+				e.add(t > -1 ? n.substring(0, t) : n);
+			}
+		}
 		return e.size > 0 && !e.has("variables") && e.add("variables"), [...e];
 	}, [n, r]), [a] = t(e(() => i.map((e) => `runtime.sources.${e}`), [i]));
 	return e(() => {

package/dist/Element/hooks/useElementState.mjs

@@ -4,7 +4,7 @@ import { get as a, omit as o } from "@plitzi/plitzi-ui/helpers";
 import { useStoreById as s } from "@plitzi/nexus/react";
 //#region src/Element/hooks/useElementState.ts
 var c = {}, l = (e, t) => t ? `runtime.elements.${e}.${t}` : `runtime.elements.${e}`, u = ({ id: u, bindings: d, previewMode: f }) => {
-	let { scopePath: p } = s(), m = n(() => l(u, p), [u, p]), [h] = r(m), g = h ?? c, _ = i(), v = n(() => (d?.attributes && Array.isArray(d.attributes) ? d.attributes : []).filter((e) => e.enabled !== !1).map((e) => a(e, "toPath", "")), [d]), y = e((e) => f ? (_(m, (t) => {
+	let { scopePath: p } = s(), m = n(() => l(u, p), [u, p]), [h] = r(m), g = h ?? c, _ = i(), v = n(() => (d?.attributes && Array.isArray(d.attributes) ? d.attributes : []).filter((e) => e.enabled !== !1).map((e) => a(e, "to", "")), [d]), y = e((e) => f ? (_(m, (t) => {
 		if (!e) return {};
 		let n = typeof e == "function" ? e(t ?? c) : e;
 		return v.length && (n = o(n, v)), n;

package/dist/Element/hooks/useRootElementInteractions.mjs

@@ -9,60 +9,60 @@ import f from "clsx";
 import { pConsole as p } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
 //#region src/Element/hooks/useRootElementInteractions.ts
 var m = ({ elementContext: m, InteractionsContext: h, previewMode: g, debugMode: _, baseElementId: v, className: y, interactionTriggers: b, interactionCallbacks: x, otherProps: S }) => {
-	let { id: C, className: w, attributes: T, definition: E, definition: { interactions: D }, plitziElementLayout: O, elementState: k, setElementState: A } = m, { interactionsManager: j, useInteractions: M } = i(h), N = a((e, t, n, r, i = !1) => {
-		i || e.preventDefault(), r && r(e), j.interactionTrigger(t, n, { event: e });
-	}, [j]), P = s(() => !g || !D ? {} : Object.values(D).filter((e) => e.type === "trigger" && e.action && r.includes(e.action) && e.enabled).reduce((e, t) => {
+	let { id: C, idRef: w, className: T, attributes: E, definition: D, definition: { interactions: O }, plitziElementLayout: k, elementState: A, setElementState: j } = m, { interactionsManager: M, useInteractions: N } = i(h), P = a((e, t, n, r, i = !1) => {
+		i || e.preventDefault(), r && r(e), M.interactionTrigger(t, n, { event: e });
+	}, [M]), F = s(() => !g || !O || !w ? {} : Object.values(O).filter((e) => e.type === "trigger" && e.action && r.includes(e.action) && e.enabled).reduce((e, t) => {
 		let n = u(t, "params.propagateEvent", !1);
 		return {
 			...e,
-			[t.action]: (e) => N(e, C, t.action, S[t.action], n)
+			[t.action]: (e) => P(e, w, t.action, S[t.action], n)
 		};
 	}, {}), [
-		C,
-		D,
+		w,
+		O,
 		S,
 		g,
-		N
-	]), [F = d] = l("runtime.sources", { enabled: _ || !!(D && Object.keys(D).length) }), I = c({});
-	I.current = F;
-	let L = a(() => ({ dataSource: I.current }), [I]), R = s(() => ({
+		P
+	]), [I = d] = l("runtime.sources", { enabled: _ || !!(O && Object.keys(O).length) }), L = c({});
+	L.current = I;
+	let R = a(() => ({ dataSource: L.current }), [L]), z = s(() => ({
 		...n,
 		...b
-	}), [b]), z = e({
-		attributes: T,
-		definition: E,
-		setElementState: A
+	}), [b]), B = e({
+		attributes: E,
+		definition: D,
+		setElementState: j
 	});
-	return M({
-		id: C,
-		interactions: D,
-		triggers: R,
+	return N({
+		id: w,
+		interactions: O,
+		triggers: z,
 		callbacks: s(() => ({
 			...x,
-			...z
-		}), [x, z]),
-		getAdditionalParams: L
+			...B
+		}), [x, B]),
+		getAdditionalParams: R
 	}), o(() => {
-		!g || !D || !Object.keys(D).length || j.interactionTrigger(C, "onLoad", {});
+		!g || !w || !O || !Object.keys(O).length || M.interactionTrigger(w, "onLoad", {});
 	}, []), o(() => {
-		if (_) return p.addProviderMethod(`getElementDataSource-${C}`, () => I.current), () => {
+		if (_) return p.addProviderMethod(`getElementDataSource-${C}`, () => L.current), () => {
 			p.removeProviderMethod(`getElementDataSource-${C}`);
 		};
 	}, [
 		_,
-		I,
+		L,
 		C
 	]), {
-		className: f(w, t({
+		className: f(T, t({
 			id: C,
 			className: y,
 			previewMode: g,
 			baseElementId: v,
-			definition: E,
-			elementState: k,
-			plitziElementLayout: O
+			definition: D,
+			elementState: A,
+			plitziElementLayout: k
 		})),
-		events: P
+		events: F
 	};
 };
 //#endregion

package/dist/dataSource/getSourcesByElementId.mjs

@@ -3,7 +3,7 @@ import e from "@plitzi/sdk-schema/helpers/FlatMap";
 var t = (t = {}, n, r) => {
 	if (!r || !n) return {};
 	let i = e.parentTree(n, r);
-	return Object.values(t).filter((e) => e.meta.id && i.includes(e.meta.id) || e.meta.id === "global").reduce((e, t) => ({
+	return Object.values(t).filter((e) => e.meta.id === "global" || !!e.meta.id && i.includes(e.meta.id)).reduce((e, t) => ({
 		...e,
 		[t.id]: t
 	}), {});

package/dist/elements/advanced/Reference/Reference.mjs

@@ -105,6 +105,7 @@ var _ = ({ ref: r, children: _, className: v = "", referenceType: y = "element",
 	});
 	let { element: z, elementType: B, referenceContextData: V } = P;
 	return T && z && y === "element" ? /* @__PURE__ */ m(p, {
+		name: `Reference:${S}`,
 		value: V,
 		children: /* @__PURE__ */ m(n, {
 			type: B,
@@ -116,6 +117,7 @@ var _ = ({ ref: r, children: _, className: v = "", referenceType: y = "element",
 		className: g("plitzi-component__reference", v, { "reference--build-mode": !T }),
 		children: [
 			/* @__PURE__ */ m(p, {
+				name: `Reference:${S}`,
 				value: V,
 				children: z && /* @__PURE__ */ m(n, {
 					type: B,

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

@@ -9,22 +9,23 @@ 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/hooks/useRegisterSource";
+import h from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import g from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/form/Form/Form.tsx
-var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl: y = "", managedByInteractions: b = !1, errors: x = d, values: S = d }) => {
-	let [C, w] = o({}), { id: T, definition: { label: E = "Form" }, setElementState: D } = e(), { settings: { previewMode: O }, contexts: { InteractionsContext: k } } = s(), { interactionsManager: A } = r(k), j = i((e) => w((t) => ({
+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) => ({
 		...t,
 		[e.name]: e
-	})), [w]), M = i((e) => {
-		w((t) => m(t, (t) => {
+	})), [T]), F = i((e) => {
+		T((t) => m(t, (t) => {
 			t[e] && delete t[e];
-		})), e && D((t) => ({
+		})), e && k((t) => ({
 			...t,
 			values: l(t, `values.${e}`),
 			errors: l(t, `errors.${e}`)
 		}));
-	}, [D]), N = i((e, t = "") => {
-		e && (t === null && (t = ""), D((n) => n.errors && n.errors[e] ? {
+	}, [k]), I = i((e, t = "") => {
+		e && (t === null && (t = ""), k((n) => n.errors && n.errors[e] ? {
 			...n,
 			values: {
 				...n.values,
@@ -38,8 +39,8 @@ var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl:
 				[e]: t
 			}
 		}));
-	}, [D]), P = i((e, t) => {
-		e && D((n) => !t && !c(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
+	}, [k]), L = i((e, t) => {
+		e && k((n) => !t && !c(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
 			...n,
 			errors: l(n, [`errors.${e}`])
 		} : {
@@ -49,7 +50,7 @@ var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl:
 				[e]: t
 			}
 		});
-	}, [D]), F = i(() => Object.values(C).filter((e) => !!e.name).reduce((e, t) => [
+	}, [k]), R = i(() => Object.values(w).filter((e) => !!e.name).reduce((e, t) => [
 		...e,
 		{
 			path: `fields.${t.name}.id`,
@@ -63,96 +64,96 @@ var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl:
 			path: `errors.${t.name}`,
 			name: `${t.name} Error Message`
 		}
-	], []), [C]), I = a(() => ({ runtime: { sources: { form: {
-		errors: x,
-		values: S,
-		registerField: j,
-		unregisterField: M,
-		setFieldValue: N,
-		setFieldError: P
+	], []), [w]), z = a(() => ({ runtime: { sources: { form: {
+		errors: S,
+		values: C,
+		registerField: P,
+		unregisterField: F,
+		setFieldValue: I,
+		setFieldError: L
 	} } } }), [
-		x,
 		S,
-		j,
-		M,
-		N,
-		P
+		C,
+		P,
+		F,
+		I,
+		L
 	]);
-	h({
-		id: T,
-		source: "form",
-		name: E || `Form - ${T}`,
-		fields: F
+	g({
+		id: E,
+		source: A,
+		name: O || `Form - ${E}`,
+		fields: R
 	});
-	let L = a(() => ({ onSubmit: {
+	let B = a(() => ({ onSubmit: {
 		action: "onSubmit",
 		title: "On Form Submit",
 		type: "trigger",
 		params: {},
 		preview: {
-			values: Object.values(C).reduce((e, t) => ({
+			values: Object.values(w).reduce((e, t) => ({
 				...e,
 				[t.name]: ""
 			}), {}),
 			actionUrl: "",
 			method: ""
 		}
-	} }), [C]), R = i((e) => {
-		if (D((e) => ({
+	} }), [w]), V = i((e) => {
+		if (k((e) => ({
 			...e,
 			errors: {}
-		})), !b || (e.stopPropagation(), e.preventDefault(), !O)) return;
-		let t = Object.values(C).reduce((e, { name: t }) => ({
+		})), !x || (e.stopPropagation(), e.preventDefault(), !j)) return;
+		let t = Object.values(w).reduce((e, { name: t }) => ({
 			...e,
-			[t]: S[t]
+			[t]: C[t]
 		}), {});
-		A.interactionTrigger(T, "onSubmit", {
+		N.interactionTrigger(D, "onSubmit", {
 			values: t,
-			actionUrl: y,
-			method: v
+			actionUrl: b,
+			method: y
 		});
 	}, [
+		k,
+		x,
+		j,
+		w,
+		N,
 		D,
 		b,
-		O,
-		C,
-		A,
-		T,
 		y,
-		v,
-		S
-	]), z = i((e) => {
-		b && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), D((e) => ({
+		C
+	]), H = i((e) => {
+		x && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), k((e) => ({
 			...e,
 			values: {},
 			errors: {}
 		})));
-	}, [D, b]), B = i((e) => {
+	}, [k, x]), U = i((e) => {
 		let { name: t, value: n } = e;
-		N(t, n);
-	}, [N]), V = i((e) => {
+		I(t, n);
+	}, [I]), W = i((e) => {
 		let { name: t, error: n } = e;
-		P(t, n);
-	}, [P]), H = a(() => ({
+		L(t, n);
+	}, [L]), G = a(() => ({
 		performReset: {
 			action: "performReset",
-			title: `Reset ${E}`,
+			title: `Reset ${O}`,
 			type: "callback",
-			callback: z,
+			callback: H,
 			params: {}
 		},
 		setFieldValue: {
 			action: "setFieldValue",
-			title: `Set Field Value ${E}`,
+			title: `Set Field Value ${O}`,
 			type: "callback",
-			callback: B,
+			callback: U,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(C).map((e) => ({
+					options: Object.values(w).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -165,16 +166,16 @@ var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl:
 		},
 		setFieldError: {
 			action: "setFieldError",
-			title: `Set Field Error ${E}`,
+			title: `Set Field Error ${O}`,
 			type: "callback",
-			callback: V,
+			callback: W,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(C).map((e) => ({
+					options: Object.values(w).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -186,28 +187,29 @@ var g = ({ ref: n, className: g = "", children: _, method: v = "get", actionUrl:
 			}
 		}
 	}), [
-		E,
-		z,
-		B,
-		C,
-		V
+		O,
+		H,
+		U,
+		w,
+		W
 	]);
 	return /* @__PURE__ */ f(t, {
 		tag: "form",
 		ref: n,
-		method: v,
-		className: p("plitzi-component__form", g),
-		interactionTriggers: L,
-		interactionCallbacks: H,
-		onSubmit: R,
-		onReset: z,
-		action: y,
+		method: y,
+		className: p("plitzi-component__form", _),
+		interactionTriggers: B,
+		interactionCallbacks: G,
+		onSubmit: V,
+		onReset: H,
+		action: b,
 		children: /* @__PURE__ */ f(u, {
 			inherit: "live",
-			value: I,
-			children: _
+			name: `Form:${E}`,
+			value: z,
+			children: v
 		})
 	});
-}, _ = n(g);
+}, v = n(_);
 //#endregion
-export { g as Form, _ as default };
+export { _ as Form, v as default };

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

@@ -89,7 +89,7 @@ var g = ({ ref: r, className: l = "", subType: g = "text", name: _ = "", label:
 				type: g,
 				className: j.input,
 				placeholder: y,
-				autoComplete: g === "password" ? !1 : b,
+				autoComplete: g !== "password" && b,
 				required: C,
 				disabled: x,
 				readOnly: w || !M,

package/dist/elements/internal/Page/Page.mjs

@@ -8,7 +8,7 @@ import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import u from "clsx";
 //#region src/elements/internal/Page/Page.tsx
 var d = ({ ref: r, seoEnabled: d = !1, seoPageTitle: f = "Title", seoPageDescription: p = "Description", className: m = "", layout: h = "", layoutContainer: g = "", children: _ }) => {
-	let { id: v } = e(), { settings: { previewMode: y }, contexts: { NavigationContext: b, InteractionsContext: x } } = s(), { interactionsManager: S } = i(x), { Helmet: C, routeParams: w, queryParams: T } = i(b), E = o(() => ({
+	let { id: v, idRef: y } = e(), { settings: { previewMode: b }, contexts: { NavigationContext: x, InteractionsContext: S } } = s(), { interactionsManager: C } = i(S), { Helmet: w, routeParams: T, queryParams: E } = i(x), D = o(() => ({
 		id: h,
 		rootId: v,
 		plitziElementLayout: {
@@ -23,7 +23,7 @@ var d = ({ ref: r, seoEnabled: d = !1, seoPageTitle: f = "Title", seoPageDescrip
 		h,
 		v,
 		_
-	]), D = o(() => ({ onPageLoad: {
+	]), O = o(() => ({ onPageLoad: {
 		action: "onPageLoad",
 		title: "On Page Load",
 		type: "trigger",
@@ -35,26 +35,27 @@ var d = ({ ref: r, seoEnabled: d = !1, seoPageTitle: f = "Title", seoPageDescrip
 		}
 	} }), []);
 	return a(() => {
-		S.interactionTrigger(v, "onPageLoad", {
+		C.interactionTrigger(y, "onPageLoad", {
 			pageId: v,
-			routeParams: w,
-			queryParams: T
+			routeParams: T,
+			queryParams: E
 		});
 	}, [
 		v,
-		S,
-		T,
-		w
+		y,
+		C,
+		E,
+		T
 	]), /* @__PURE__ */ l(t, {
 		ref: r,
 		className: u("plitzi-component__page", m),
-		interactionTriggers: D,
+		interactionTriggers: O,
 		children: [
-			d && y && C && /* @__PURE__ */ l(C, { children: [!!f && /* @__PURE__ */ c("title", { children: f }), !!p && /* @__PURE__ */ c("meta", {
+			d && b && w && /* @__PURE__ */ l(w, { children: [!!f && /* @__PURE__ */ c("title", { children: f }), !!p && /* @__PURE__ */ c("meta", {
 				name: "description",
 				content: p
 			})] }),
-			h && /* @__PURE__ */ c(n, { internalProps: E }),
+			h && /* @__PURE__ */ c(n, { internalProps: D }),
 			!h && _
 		]
 	});