@plitzi/sdk-elements 0.38.10 → 0.38.12

package/dist/elements/structure/DialogContainer/DialogContainer.mjs

@@ -1,180 +1,61 @@
 import e from "./declaration.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 "../../../dataSource/pathFields.mjs";
-import a from "../ModalContainer/useModalDialog.mjs";
-import { use as o, useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import f from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { StoreProvider as p } from "@plitzi/nexus/react";
-import { emptyObject as m } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import _ from "clsx";
-import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import n from "../Overlay/OverlayShell.mjs";
+import r from "../Overlay/useOverlay.mjs";
+import { useCallback as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
 //#region src/elements/structure/DialogContainer/DialogContainer.tsx
-var b = ({ ref: t, className: b = "", children: x, headerLabel: S = "Dialog Header", acceptButtonLabel: C = "Accept", acceptButtonLabelLoading: w = "Loading...", rejectButtonLabel: T = "Cancel", autoHideAfterClick: E = !0 }) => {
-	let { id: D, rootId: O, visible: k, setElementState: A, definition: { styleSelectors: j, label: M = "Dialog" }, elementState: N } = n(), P = v(e.sourceType, D), { settings: { previewMode: F }, contexts: { InteractionsContext: I } } = f(), { interactionsManager: L } = o(I), [R, z] = d({}), [B, V] = d(!1), H = u(null), U = `${O}_${D}_title`, W = s((e) => {
-		let { metadata: t } = e;
-		if (t && typeof t == "object") z(t);
-		else if (typeof t == "string") try {
-			z(JSON.parse(t));
-		} catch {
-			z({ content: t });
-		}
-		else z(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
-		A((e) => ({
-			...e,
-			visibility: !0
-		}));
-	}, [A, z]), G = s(() => {
-		L.interactionTrigger(D, "onDialogClose", { metadata: R }), z({}), A((e) => ({
-			...e,
-			visibility: !1
-		}));
-	}, [
-		L,
-		A,
-		z,
-		R,
-		D
-	]), K = s(() => {
-		E && (L.interactionTrigger(D, "onDialogClose", { metadata: R }), z({}), A((e) => ({
-			...e,
-			visibility: !1
-		})));
-	}, [
-		L,
-		E,
-		A,
-		z,
-		R,
-		D
-	]), q = s(async () => {
-		V(!0), await L.interactionTrigger(D, "onDialogAccept", { metadata: R }), V(!1), A((e) => ({
-			...e,
-			visibility: !1
-		}));
-	}, [
-		L,
-		D,
-		R,
-		A
-	]), J = s(async () => {
-		V(!0), await L.interactionTrigger(D, "onDialogReject", { metadata: R }), V(!1), A((e) => ({
-			...e,
-			visibility: !1
-		}));
-	}, [
-		L,
-		D,
-		R,
-		A
-	]), Y = l(() => ({
-		openDialog: {
-			...e.callbacks.openDialog,
-			title: `Open ${M}`,
-			callback: W
+var l = ({ ref: t, className: l = "", children: u, headerLabel: d = "Dialog Header", acceptButtonLabel: f = "Accept", acceptButtonLabelLoading: p = "Loading...", rejectButtonLabel: m = "Cancel", autoHideAfterClick: h = !0 }) => {
+	let g = r({
+		name: "Dialog",
+		sourceType: e.sourceType,
+		callbacks: {
+			open: e.callbacks.openDialog,
+			close: e.callbacks.closeDialog
 		},
-		closeDialog: {
-			...e.callbacks.closeDialog,
-			title: `Close ${M}`,
-			callback: G
-		}
-	}), [
-		G,
-		W,
-		M
-	]);
-	a({
-		panelRef: H,
-		open: !!F && k,
-		onClose: () => void J()
-	}), c(() => {
-		N.visibility !== !1 && L.interactionTrigger(D, "onDialogOpen", { metadata: R });
-	}, [
-		D,
-		L,
-		R,
-		N.visibility
-	]);
-	let X = s(() => i(R), [R]);
-	y({
-		id: D,
-		source: P,
-		name: M || `Dialog - ${D}`,
-		fields: X
-	});
-	let Z = l(() => P ? { runtime: { sources: { [P]: R } } } : m, [P, R]);
-	return /* @__PURE__ */ g(r, {
+		events: {
+			open: "onDialogOpen",
+			close: "onDialogClose"
+		},
+		autoHideAfterClick: h
+	}), { styleSelectors: _, trigger: v, hide: y } = g, [b, x] = a(!1), S = i(async (e) => {
+		x(!0), await v(e), x(!1), y();
+	}, [y, v]), C = i(() => void S("onDialogAccept"), [S]), w = i(() => void S("onDialogReject"), [S]);
+	return /* @__PURE__ */ o(n, {
 		ref: t,
-		className: _("plitzi-component__dialog-container", b),
-		interactionTriggers: e.triggers,
-		interactionCallbacks: Y,
-		children: [/* @__PURE__ */ h("div", {
-			className: _("dialog-container__background", j.backgroundContainer),
-			"aria-hidden": "true",
-			onClick: K
-		}), /* @__PURE__ */ g("div", {
-			ref: H,
-			className: _("dialog-container__root", j.rootContainer),
-			role: "alertdialog",
-			"aria-modal": "true",
-			"aria-labelledby": U,
-			tabIndex: -1,
-			children: [
-				/* @__PURE__ */ g("div", {
-					className: _("dialog-container__header", j.headerContainer),
-					children: [/* @__PURE__ */ h("div", {
-						id: U,
-						className: _("dialog-container__header__title", j.headerTitle),
-						children: S || "Dialog Header"
-					}), /* @__PURE__ */ h("button", {
-						type: "button",
-						className: _("dialog-container__close", j.headerCloseButton),
-						"aria-label": "Close",
-						title: "Close",
-						onClick: J,
-						children: /* @__PURE__ */ h("i", {
-							className: "fa-solid fa-xmark",
-							"aria-hidden": "true"
-						})
-					})]
-				}),
-				/* @__PURE__ */ h("div", {
-					className: _("dialog-container__body", j.bodyContainer),
-					children: /* @__PURE__ */ h(p, {
-						inherit: "live",
-						name: `Dialog:${D}`,
-						value: Z,
-						children: x
-					})
-				}),
-				/* @__PURE__ */ g("div", {
-					className: _("dialog-container__footer", j.footerContainer),
-					children: [/* @__PURE__ */ g("button", {
-						type: "button",
-						className: _("footer__button button--accept", j.acceptButton),
-						onClick: q,
-						disabled: B,
-						children: [B && /* @__PURE__ */ g("div", {
-							className: "button--accept__container",
-							children: [/* @__PURE__ */ h("i", {
-								className: "fa-solid fa-rotate fa-spin",
-								"aria-hidden": "true"
-							}), w]
-						}), !B && C]
-					}), /* @__PURE__ */ h("button", {
-						type: "button",
-						className: _("footer__button button--cancel", j.cancelButton),
-						onClick: J,
-						disabled: B,
-						children: T
-					})]
-				})
-			]
-		})]
+		className: l,
+		block: "dialog-container",
+		role: "alertdialog",
+		storeName: "Dialog",
+		title: d || "Dialog Header",
+		overlay: g,
+		triggers: e.triggers,
+		onDismiss: w,
+		footer: /* @__PURE__ */ s("div", {
+			className: c("dialog-container__footer", _.footerContainer),
+			children: [/* @__PURE__ */ s("button", {
+				type: "button",
+				className: c("footer__button button--accept", _.acceptButton),
+				onClick: C,
+				disabled: b,
+				children: [b && /* @__PURE__ */ s("div", {
+					className: "button--accept__container",
+					children: [/* @__PURE__ */ o("i", {
+						className: "fa-solid fa-rotate fa-spin",
+						"aria-hidden": "true"
+					}), p]
+				}), !b && f]
+			}), /* @__PURE__ */ o("button", {
+				type: "button",
+				className: c("footer__button button--cancel", _.cancelButton),
+				onClick: w,
+				disabled: b,
+				children: m
+			})]
+		}),
+		children: u
 	});
-}, x = t(b);
+}, u = t(l);
 //#endregion
-export { b as DialogContainer, x as default };
+export { l as DialogContainer, u as default };

package/dist/elements/structure/DialogContainer/Settings.mjs

@@ -1,45 +1,46 @@
-import { useCallback as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Checkbox";
-import i from "@plitzi/plitzi-ui/Input";
+import e from "../../useSettingsUpdate.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Checkbox";
+import a from "@plitzi/plitzi-ui/Input";
 //#region src/elements/structure/DialogContainer/Settings.tsx
-var a = ({ acceptButtonLabel: a = "Accept", acceptButtonLabelLoading: o = "Loading...", rejectButtonLabel: s = "Cancel", headerLabel: c = "Dialog Header", autoHideAfterClick: l = !0, onUpdate: u }) => {
-	let d = e((e) => (t) => u?.(e, t), [u]), f = e((e) => u?.("autoHideAfterClick", e.target.checked), [u]);
-	return /* @__PURE__ */ n("div", {
+var o = ({ acceptButtonLabel: o = "Accept", acceptButtonLabelLoading: s = "Loading...", rejectButtonLabel: c = "Cancel", headerLabel: l = "Dialog Header", autoHideAfterClick: u = !0, onUpdate: d }) => {
+	let f = e(d), p = t((e) => d?.("autoHideAfterClick", e.target.checked), [d]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ t(i, {
+			/* @__PURE__ */ n(a, {
 				label: "Header Label",
-				value: c,
-				onChange: d("headerLabel"),
+				value: l,
+				onChange: f.text("headerLabel"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
+			/* @__PURE__ */ n(a, {
 				label: "Accept Label Button",
-				value: a,
-				onChange: d("acceptButtonLabel"),
+				value: o,
+				onChange: f.text("acceptButtonLabel"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
+			/* @__PURE__ */ n(a, {
 				label: "Reject Label Button",
-				value: s,
-				onChange: d("rejectButtonLabel"),
+				value: c,
+				onChange: f.text("rejectButtonLabel"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
+			/* @__PURE__ */ n(a, {
 				label: "Accept Label Button Loading",
-				value: o,
-				onChange: d("acceptButtonLabelLoading"),
+				value: s,
+				onChange: f.text("acceptButtonLabelLoading"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(r, {
+			/* @__PURE__ */ n(i, {
 				label: "Hide after click background",
-				checked: l,
-				onChange: f,
+				checked: u,
+				onChange: p,
 				size: "xs"
 			})
 		]
 	});
 };
 //#endregion
-export { a as default };
+export { o as default };

package/dist/elements/structure/DialogContainer/declaration.d.ts

@@ -2,7 +2,7 @@ import { DialogContainerProps } from './DialogContainer';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type DialogContainerAttributes = AuthorableAttributes<DialogContainerProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "dialogContainer";
     readonly sourceType: "dialogContainer";
     readonly triggers: {
@@ -95,13 +95,10 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Dialog Container";
-            readonly type: "dialogContainer";
             readonly description: "A native <dialog> container shown or hidden through interactions (e.g. an onClick open/close).";
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             readonly loadStrategy: "lazy";
             readonly styleSelectors: {
-                readonly base: "";
                 readonly backgroundContainer: "";
                 readonly rootContainer: "";
                 readonly headerContainer: "";
@@ -112,31 +109,12 @@ declare const declaration: {
                 readonly acceptButton: "";
                 readonly cancelButton: "";
             };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "structure";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-regular fa-message";
         };
         readonly defaultStyle: {
-            readonly name: "Dialog Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -282,14 +260,13 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["container"];
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    headerLabel: string;
-    acceptButtonLabel: string;
-    acceptButtonLabelLoading: string;
-    rejectButtonLabel: string;
-    autoHideAfterClick: boolean;
+}, Partial<{
+    autoHideAfterClick?: boolean | undefined;
+    headerLabel?: string | undefined;
+    acceptButtonLabel?: string | undefined;
+    acceptButtonLabelLoading?: string | undefined;
+    rejectButtonLabel?: string | undefined;
 }>>;
 export default declaration;

package/dist/elements/structure/DialogContainer/declaration.mjs

@@ -113,13 +113,10 @@ var t = { default: {
 		},
 		definition: {
 			label: "Dialog Container",
-			type: "dialogContainer",
 			description: "A native <dialog> container shown or hidden through interactions (e.g. an onClick open/close).",
 			items: [],
-			bindings: {},
 			loadStrategy: "lazy",
 			styleSelectors: {
-				base: "",
 				backgroundContainer: "",
 				rootContainer: "",
 				headerContainer: "",
@@ -129,30 +126,13 @@ var t = { default: {
 				footerContainer: "",
 				acceptButton: "",
 				cancelButton: ""
-			},
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			}
 		},
 		market: {
 			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-regular fa-message"
 		},
 		defaultStyle: {
-			name: "Dialog Container",
-			displayMode: "desktop",
 			style: {
 				base: { default: {
 					position: "fixed",
@@ -222,8 +202,7 @@ var t = { default: {
 				} }
 			},
 			subTypes: {}
-		},
-		settings: {}
+		}
 	},
 	initialItems: ["container"]
 });

package/dist/elements/structure/DialogContainer/index.d.ts

@@ -94,13 +94,10 @@ declare const DialogContainer: {
         };
         readonly definition: {
             readonly label: "Dialog Container";
-            readonly type: "dialogContainer";
             readonly description: "A native <dialog> container shown or hidden through interactions (e.g. an onClick open/close).";
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             readonly loadStrategy: "lazy";
             readonly styleSelectors: {
-                readonly base: "";
                 readonly backgroundContainer: "";
                 readonly rootContainer: "";
                 readonly headerContainer: "";
@@ -111,31 +108,12 @@ declare const DialogContainer: {
                 readonly acceptButton: "";
                 readonly cancelButton: "";
             };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "structure";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-regular fa-message";
         };
         readonly defaultStyle: {
-            readonly name: "Dialog Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -281,14 +259,15 @@ declare const DialogContainer: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["container"];
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    headerLabel: string;
-    acceptButtonLabel: string;
-    acceptButtonLabelLoading: string;
-    rejectButtonLabel: string;
-    autoHideAfterClick: boolean;
+    autoHideAfterClick?: boolean | undefined;
+    headerLabel?: string | undefined;
+    acceptButtonLabel?: string | undefined;
+    acceptButtonLabelLoading?: string | undefined;
+    rejectButtonLabel?: string | undefined;
 }>>;
 export default DialogContainer;

package/dist/elements/structure/List/ListItem/declaration.d.ts

@@ -2,51 +2,29 @@ import { ListItemProps } from './ListItem';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type ListItemAttributes = AuthorableAttributes<ListItemProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "listItem";
     readonly content: {
         readonly attributes: {};
         readonly definition: {
             readonly label: "List Item";
-            readonly type: "listItem";
             readonly description: "The List Item element lets you add more items to existing List elements. You can then add any content you would like to them, including links, images, etc.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly ["listItem"];
+            readonly itemsNotAllowed: ["listItem"];
         };
         readonly market: {
             readonly category: "structure";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-grip-lines";
         };
         readonly defaultStyle: {
-            readonly name: "List Item";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+}, unknown>;
 export default declaration;

package/dist/elements/structure/List/ListItem/declaration.mjs

@@ -6,37 +6,15 @@ var t = e()({
 		attributes: {},
 		definition: {
 			label: "List Item",
-			type: "listItem",
 			description: "The List Item element lets you add more items to existing List elements. You can then add any content you would like to them, including links, images, etc.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: ["listItem"]
+			items: []
 		},
+		builder: { itemsNotAllowed: ["listItem"] },
 		market: {
 			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-grip-lines"
 		},
-		defaultStyle: {
-			name: "List Item",
-			displayMode: "desktop",
-			style: { base: { default: {} } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: {} } } }
 	}
 });
 //#endregion

package/dist/elements/structure/List/ListItem/index.d.ts

@@ -7,45 +7,25 @@ declare const ListItem: {
         readonly attributes: {};
         readonly definition: {
             readonly label: "List Item";
-            readonly type: "listItem";
             readonly description: "The List Item element lets you add more items to existing List elements. You can then add any content you would like to them, including links, images, etc.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly ["listItem"];
+            readonly itemsNotAllowed: ["listItem"];
         };
         readonly market: {
             readonly category: "structure";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-grip-lines";
         };
         readonly defaultStyle: {
-            readonly name: "List Item";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
                 };
             };
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
 export default ListItem;