@plitzi/sdk-elements 0.36.1 → 0.37.0

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

@@ -1,31 +1,36 @@
-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 "../LayoutContainer/index.mjs";
-import { use as i, useEffect as a, useMemo as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as c } from "@plitzi/sdk-shared/store";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "clsx";
-import { Helmet as f } from "@dr.pogodin/react-helmet";
+import e from "../../../Element/LayoutBody.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import n from "../../../Element/hooks/useElement.mjs";
+import { RootElement as r } from "../../../Element/RootElement.mjs";
+import i from "../LayoutContainer/index.mjs";
+import a from "../../../Element/hooks/useLayoutChain.mjs";
+import { use as o, useEffect as s, useMemo as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as u } from "@plitzi/sdk-shared/store";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
+import { Helmet as m } from "@dr.pogodin/react-helmet";
 //#region src/elements/internal/Page/Page.tsx
-var p = ({ ref: e, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescription: h = "Description", className: g = "", layout: _ = "", layoutContainer: v = "", children: y }) => {
-	let { id: b } = t(), { settings: { previewMode: x }, contexts: { InteractionsContext: S } } = s(), { interactionsManager: C } = i(S), [[w, T]] = c(["navigation.routeParams", "navigation.queryParams"]), E = o(() => ({
-		id: _,
-		rootId: b,
-		plitziElementLayout: {
-			bodyChildren: y,
-			containerId: v || _,
-			referenceId: b,
-			rootId: v || _,
-			type: "layout"
-		}
-	}), [
-		v,
-		_,
-		b,
-		y
-	]), D = o(() => ({ onPageLoad: {
+var h = (e) => e.map((e) => ({
+	...e,
+	plitziElementLayout: {
+		containerId: e.slot,
+		rootId: e.slot,
+		type: "layout"
+	}
+})), g = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ d(e, {
+	body: t,
+	children: /* @__PURE__ */ d(i, { internalProps: {
+		id: r,
+		rootId: n,
+		plitziElementLayout: o
+	} })
+}, a), r), _ = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: _ = "Description", className: v = "", layout: y = "", layoutContainer: b = "", children: x }) => {
+	let { id: S } = n(), { settings: { previewMode: C }, contexts: { InteractionsContext: w } } = l(), { interactionsManager: T } = o(w), [[E, D]] = u(["navigation.routeParams", "navigation.queryParams"]), O = a(y, b), k = c(() => h(O), [O]), A = c(() => g(k, S, x), [
+		k,
+		S,
+		x
+	]), j = c(() => ({ onPageLoad: {
 		action: "onPageLoad",
 		title: "On Page Load",
 		type: "trigger",
@@ -36,35 +41,31 @@ var p = ({ ref: e, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescrip
 			queryParams: ""
 		}
 	} }), []);
-	return a(() => {
+	return s(() => {
 		let e = !1;
 		return queueMicrotask(() => {
-			e || C.interactionTrigger(b, "onPageLoad", {
-				pageId: b,
-				routeParams: w,
-				queryParams: T
+			e || T.interactionTrigger(S, "onPageLoad", {
+				pageId: S,
+				routeParams: E,
+				queryParams: D
 			});
 		}), () => {
 			e = !0;
 		};
 	}, [
-		b,
-		C,
+		S,
 		T,
-		w
-	]), /* @__PURE__ */ u(n, {
+		D,
+		E
+	]), /* @__PURE__ */ f(r, {
 		ref: e,
-		className: d("plitzi-component__page", g),
-		interactionTriggers: D,
-		children: [
-			p && x && /* @__PURE__ */ u(f, { children: [!!m && /* @__PURE__ */ l("title", { children: m }), !!h && /* @__PURE__ */ l("meta", {
-				name: "description",
-				content: h
-			})] }),
-			_ && /* @__PURE__ */ l(r, { internalProps: E }, v || _),
-			!_ && y
-		]
+		className: p("plitzi-component__page", v),
+		interactionTriggers: j,
+		children: [t && C && /* @__PURE__ */ f(m, { children: [!!i && /* @__PURE__ */ d("title", { children: i }), !!_ && /* @__PURE__ */ d("meta", {
+			name: "description",
+			content: _
+		})] }), A]
 	});
-}, m = e(p);
+}, v = t(_);
 //#endregion
-export { p as Page, m as default };
+export { _ as Page, v as default };

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

@@ -1,228 +1,210 @@
-import { useCallback as e, useMemo as t } from "react";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { get as r, pick as i } from "@plitzi/plitzi-ui/helpers";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { getPageFullPath as c } from "@plitzi/sdk-navigation/NavigationHelper";
-import l from "@plitzi/plitzi-ui/Alert";
-import u from "@plitzi/plitzi-ui/Checkbox";
-import d from "@plitzi/plitzi-ui/Input";
-import f from "@plitzi/plitzi-ui/TextArea";
-import p from "@plitzi/plitzi-ui/Select";
-import m from "@plitzi/plitzi-ui/Select2";
+import e from "../LayoutPicker/index.mjs";
+import { useCallback as t, useMemo as n } from "react";
+import { useCommonStore as r } from "@plitzi/sdk-shared/store";
+import { get as i, pick as a } from "@plitzi/plitzi-ui/helpers";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { getPageFullPath as l } from "@plitzi/sdk-navigation/NavigationHelper";
+import u from "@plitzi/plitzi-ui/Alert";
+import d from "@plitzi/plitzi-ui/Checkbox";
+import f from "@plitzi/plitzi-ui/Input";
+import p from "@plitzi/plitzi-ui/TextArea";
+import m from "@plitzi/plitzi-ui/Select";
+import h from "@plitzi/plitzi-ui/Select2";
 //#region src/elements/internal/Page/Settings.tsx
-var h = ({ id: h = "", seoEnabled: g = !1, enabled: _ = !0, name: v = "", folder: y = "", seoPageTitle: b = "Title", seoPageDescription: x = "Description", slug: S = "", layout: C = "", layoutContainer: w = "", accessLevel: T = "", unauthorizedBehaviour: E = "", unauthorizedPageRedirect: D = "", onUpdate: O }) => {
-	let [[k, A, j]] = n([
+var g = ({ id: g = "", seoEnabled: _ = !1, enabled: v = !0, name: y = "", folder: b = "", seoPageTitle: x = "Title", seoPageDescription: S = "Description", slug: C = "", layout: w = "", layoutContainer: T = "", accessLevel: E = "", unauthorizedBehaviour: D = "", unauthorizedPageRedirect: O = "", onUpdate: k }) => {
+	let [[A, j, M]] = r([
 		"schema.flat",
 		"schema.pages",
 		"schema.pageFolders"
-	]), M = t(() => Object.values(k).filter((e) => r(e, "definition.type", "") === "layoutContainer"), [k]), N = t(() => C ? Object.values(k).filter((e) => r(e, "definition.type", "") === "container" && r(e, "definition.rootId", "") === C) : [], [k, C]), P = t(() => Object.values(i(k, A.filter((e) => e !== h))), [
-		k,
-		h,
-		A
-	]), F = e((e) => (t) => O?.(e, t), [O]), I = e((e) => {
-		O?.("name", e);
-		let t = v.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9]+)/gi, "");
-		(!S || S === t) && O?.("slug", e.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9-]+)/gi, ""));
+	]), N = n(() => Object.values(a(A, j.filter((e) => e !== g))), [
+		A,
+		g,
+		j
+	]), P = t((e) => (t) => k?.(e, t), [k]), F = t((e) => {
+		k?.("name", e);
+		let t = y.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9]+)/gi, "");
+		(!C || C === t) && k?.("slug", e.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9-]+)/gi, ""));
 	}, [
-		O,
-		S,
-		v
-	]), L = e((e) => {
+		k,
+		C,
+		y
+	]), I = t((e) => {
 		if (/^[a-zA-Z0-9:*/_-]+$/gim.test(e) || !e) {
 			let t = e.replaceAll("//", "/");
-			O?.("slug", t);
+			k?.("slug", t);
 		}
-	}, [O]), R = e((e) => {
-		O?.("layout", e), O?.("layoutContainer", "");
-	}, [O]), z = e((e) => {
-		O?.("accessLevel", e), O?.("unauthorizedBehaviour", ""), O?.("unauthorizedPageRedirect", "");
-	}, [O]), B = e((e) => O?.("seoEnabled", e.target.checked), [O]), V = e((e) => O?.("enabled", e.target.checked), [O]), H = e((e) => O?.("folder", e?.value ?? ""), [O]), U = t(() => [{
+	}, [k]), L = t((e) => {
+		k?.("accessLevel", e), k?.("unauthorizedBehaviour", ""), k?.("unauthorizedPageRedirect", "");
+	}, [k]), R = t((e) => k?.("seoEnabled", e.target.checked), [k]), z = t((e) => k?.("enabled", e.target.checked), [k]), B = t((e) => k?.("folder", e?.value ?? ""), [k]), V = n(() => [{
 		value: "",
 		label: "None"
-	}, ...j.map(({ id: e, name: t }) => ({
+	}, ...M.map(({ id: e, name: t }) => ({
 		value: e,
 		label: t
-	}))], [j]), W = t(() => c(k, j, h, !0), [
-		k,
-		j,
-		h
+	}))], [M]), H = n(() => l(A, M, g, !0), [
+		A,
+		M,
+		g
 	]);
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [
-			!_ && /* @__PURE__ */ o(l, {
+			!v && /* @__PURE__ */ s(u, {
 				intent: "info",
 				size: "xs",
 				solid: !1,
-				children: /* @__PURE__ */ o("span", {
+				children: /* @__PURE__ */ s("span", {
 					className: "text-xs",
 					children: "When this option is disable, this page wont be accesible"
 				})
 			}),
-			/* @__PURE__ */ o(u, {
+			/* @__PURE__ */ s(d, {
 				label: " Page Enabled",
-				checked: _,
-				onChange: V,
+				checked: v,
+				onChange: z,
 				size: "xs"
 			}),
-			/* @__PURE__ */ o(d, {
-				value: v,
+			/* @__PURE__ */ s(f, {
+				value: y,
 				label: "Page Name",
-				onChange: I,
+				onChange: F,
 				size: "xs"
 			}),
-			/* @__PURE__ */ o(l, {
+			/* @__PURE__ */ s(u, {
 				intent: "info",
 				size: "xs",
 				solid: !1,
-				children: /* @__PURE__ */ o("span", {
+				children: /* @__PURE__ */ s("span", {
 					className: "text-xs",
 					children: "Slug is a combination of letters, numbers and _ - : / *"
 				})
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ c("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ o(d, {
-					value: S,
-					onChange: L,
+				children: [/* @__PURE__ */ s(f, {
+					value: C,
+					onChange: I,
 					label: "Slug / Path",
 					className: { inputContainer: "rounded-none rounded-tl rounded-tr" },
 					size: "xs"
-				}), /* @__PURE__ */ s("div", {
+				}), /* @__PURE__ */ c("div", {
 					className: "truncate rounded-b border-x border-b border-gray-200 px-1 py-0.5 text-xs",
-					title: W,
-					children: ["Full Path: ", /* @__PURE__ */ o("span", {
+					title: H,
+					children: ["Full Path: ", /* @__PURE__ */ s("span", {
 						className: "font-bold",
-						children: W
+						children: H
 					})]
 				})]
 			}),
-			/* @__PURE__ */ o(m, {
+			/* @__PURE__ */ s(h, {
 				label: "Folder",
-				value: y,
-				options: U,
+				value: b,
+				options: V,
 				placeholder: "None",
-				onChange: H,
+				onChange: B,
 				size: "xs"
 			}),
-			/* @__PURE__ */ o(p, {
-				value: C,
-				placeholder: "None",
-				label: "Layout",
-				onChange: R,
-				size: "xs",
-				children: M.map(({ id: e, definition: { label: t } }) => /* @__PURE__ */ o("option", {
-					value: e,
-					children: t
-				}, e))
-			}),
-			C && /* @__PURE__ */ o(p, {
-				value: w,
-				placeholder: "None",
-				label: "Layout Container Body",
-				onChange: F("layoutContainer"),
-				size: "xs",
-				children: N.map(({ id: e, definition: { label: t } }) => /* @__PURE__ */ o("option", {
-					value: e,
-					children: t
-				}, e))
+			/* @__PURE__ */ s(e, {
+				layout: w,
+				layoutContainer: T,
+				onUpdate: k
 			}),
-			/* @__PURE__ */ s(p, {
-				value: T,
+			/* @__PURE__ */ c(m, {
+				value: E,
 				label: "Restrict Access",
-				onChange: z,
+				onChange: L,
 				placeholder: "None",
 				size: "xs",
-				children: [/* @__PURE__ */ o("option", {
+				children: [/* @__PURE__ */ s("option", {
 					value: "public",
 					children: "Public"
-				}), /* @__PURE__ */ o("option", {
+				}), /* @__PURE__ */ s("option", {
 					value: "authenticated",
 					children: "Authenticated"
 				})]
 			}),
-			T === "" && /* @__PURE__ */ o(l, {
+			E === "" && /* @__PURE__ */ s(u, {
 				intent: "info",
 				solid: !1,
 				size: "xs",
-				children: /* @__PURE__ */ o("span", {
+				children: /* @__PURE__ */ s("span", {
 					className: "text-xs",
 					children: "Anyone on the internet can access this page"
 				})
 			}),
-			T === "public" && /* @__PURE__ */ o(l, {
+			E === "public" && /* @__PURE__ */ s(u, {
 				intent: "info",
 				solid: !1,
 				size: "xs",
-				children: /* @__PURE__ */ o("span", {
+				children: /* @__PURE__ */ s("span", {
 					className: "text-xs",
 					children: "Only Guest can access this page"
 				})
 			}),
-			T !== "" && /* @__PURE__ */ o(p, {
+			E !== "" && /* @__PURE__ */ s(m, {
 				label: "Unauthorized Behaviour",
-				value: E,
-				onChange: F("unauthorizedBehaviour"),
+				value: D,
+				onChange: P("unauthorizedBehaviour"),
 				placeholder: "None",
 				size: "xs",
-				children: /* @__PURE__ */ o("option", {
+				children: /* @__PURE__ */ s("option", {
 					value: "redirect",
 					children: "Redirect"
 				})
 			}),
-			E === "redirect" && /* @__PURE__ */ o(p, {
-				value: D,
+			D === "redirect" && /* @__PURE__ */ s(m, {
+				value: O,
 				label: "Redirect Page",
-				onChange: F("unauthorizedPageRedirect"),
+				onChange: P("unauthorizedPageRedirect"),
 				placeholder: "None",
 				size: "xs",
-				children: P.map((e) => /* @__PURE__ */ o("option", {
+				children: N.map((e) => /* @__PURE__ */ s("option", {
 					value: e.id,
-					children: r(e, "attributes.name")
+					children: i(e, "attributes.name")
 				}, e.id))
 			}),
-			/* @__PURE__ */ o(u, {
+			/* @__PURE__ */ s(d, {
 				label: " SEO Enabled",
-				checked: g,
-				onChange: B,
+				checked: _,
+				onChange: R,
 				size: "xs"
 			}),
-			g && /* @__PURE__ */ s(a, { children: [
-				/* @__PURE__ */ o(d, {
-					value: b,
+			_ && /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ s(f, {
+					value: x,
 					label: "SEO Title",
-					onChange: F("seoPageTitle"),
+					onChange: P("seoPageTitle"),
 					size: "xs"
 				}),
-				/* @__PURE__ */ o(f, {
+				/* @__PURE__ */ s(p, {
 					label: "SEO Description",
-					value: x,
-					onChange: F("seoPageDescription"),
+					value: S,
+					onChange: P("seoPageDescription"),
 					rows: 3,
 					size: "xs"
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					className: "flex flex-col",
 					children: [
-						/* @__PURE__ */ o("p", {
+						/* @__PURE__ */ s("p", {
 							className: "mb-4 text-xs",
 							children: "Specify this page's title and description. You can see how they'll look in search engine results pages (SERPs) in the preview below."
 						}),
-						/* @__PURE__ */ o("label", { children: "Search Result Preview" }),
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ s("label", { children: "Search Result Preview" }),
+						/* @__PURE__ */ c("div", {
 							className: "rounded border border-gray-300 px-2 py-1",
 							children: [
-								/* @__PURE__ */ o("div", {
+								/* @__PURE__ */ s("div", {
 									className: "mb-1 pt-1 text-xl text-[#1a0dab]",
-									children: /* @__PURE__ */ o("label", { children: b })
+									children: /* @__PURE__ */ s("label", { children: x })
 								}),
-								/* @__PURE__ */ o("div", {
+								/* @__PURE__ */ s("div", {
 									className: "text-sm text-[#006621]",
-									children: /* @__PURE__ */ o("span", { children: "www.url.com" })
+									children: /* @__PURE__ */ s("span", { children: "www.url.com" })
 								}),
-								/* @__PURE__ */ o("div", {
+								/* @__PURE__ */ s("div", {
 									className: "settings-seo__description mb-1 pt-1 text-sm",
-									children: `${x.slice(0, 160)}...`
+									children: `${S.slice(0, 160)}...`
 								})
 							]
 						})
@@ -233,4 +215,4 @@ var h = ({ id: h = "", seoEnabled: g = !1, enabled: _ = !0, name: v = "", folder
 	});
 };
 //#endregion
-export { h as default };
+export { g as default };