@plitzi/sdk-elements 0.37.1 → 0.37.3

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

@@ -1,7 +1,39 @@
-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/structure/Container/declaration.ts
-var t = e()({
+var n = [
+	"div",
+	"header",
+	"footer",
+	"nav",
+	"main",
+	"section",
+	"article",
+	"aside",
+	"figure"
+], r = e()({
 	type: "container",
+	attributeValues: { subType: t()([
+		"div",
+		"header",
+		"footer",
+		"nav",
+		"main",
+		"section",
+		"article",
+		"aside",
+		"address",
+		"figure",
+		"dl",
+		"dt",
+		"dd",
+		"li",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6"
+	]) },
 	content: {
 		attributes: { subType: "div" },
 		definition: {
@@ -41,4 +73,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as NAMEABLE_CONTAINER_TAGS, r as default };

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

@@ -1,8 +1,11 @@
 declare const Container: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Container').ContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Container').ContainerProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "container";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";
@@ -51,6 +54,8 @@ declare const Container: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
+    label?: string | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    decorative?: boolean | undefined;
 }>>;
 export default Container;

package/dist/elements/structure/Container/index.mjs

@@ -1,6 +1,6 @@
-import e from "./Container.mjs";
-import t from "./declaration.mjs";
+import e from "./declaration.mjs";
+import t from "./Container.mjs";
 //#region src/elements/structure/Container/index.ts
-var n = Object.assign(e, t);
+var n = Object.assign(t, e);
 //#endregion
 export { n as default };

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

@@ -9,9 +9,9 @@ export type DialogContainerProps = {
     rejectButtonLabel: string;
     autoHideAfterClick: boolean;
 };
-declare const DialogContainer: ({ ref, className, children, headerLabel, acceptButtonLabel, acceptButtonLabelLoading, rejectButtonLabel, autoHideAfterClick }: DialogContainerProps) => import("react").JSX.Element;
+declare const DialogContainer: ({ ref, className, children, headerLabel, acceptButtonLabel, acceptButtonLabelLoading, rejectButtonLabel, autoHideAfterClick }: DialogContainerProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<DialogContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<DialogContainerProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

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

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

@@ -6,5 +6,5 @@ type SettingsProps = {
     autoHideAfterClick?: boolean;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ acceptButtonLabel, acceptButtonLabelLoading, rejectButtonLabel, headerLabel, autoHideAfterClick, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ acceptButtonLabel, acceptButtonLabelLoading, rejectButtonLabel, headerLabel, autoHideAfterClick, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -5,6 +5,87 @@ export type DialogContainerAttributes = AuthorableAttributes<DialogContainerProp
 declare const declaration: {
     readonly type: "dialogContainer";
     readonly sourceType: "dialogContainer";
+    readonly triggers: {
+        readonly onDialogAccept: {
+            readonly action: "onDialogAccept";
+            readonly title: "On Dialog Accept";
+            readonly type: "trigger";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly onDialogReject: {
+            readonly action: "onDialogReject";
+            readonly title: "On Dialog Reject";
+            readonly type: "trigger";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly onDialogOpen: {
+            readonly action: "onDialogOpen";
+            readonly title: "On Dialog Open";
+            readonly type: "trigger";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly onDialogClose: {
+            readonly action: "onDialogClose";
+            readonly title: "On Dialog Close";
+            readonly type: "trigger";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+    };
+    readonly callbacks: {
+        readonly openDialog: {
+            readonly action: "openDialog";
+            readonly title: "Open Dialog";
+            readonly type: "callback";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly closeDialog: {
+            readonly action: "closeDialog";
+            readonly title: "Close Dialog";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {};
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly headerLabel: "Dialog Header";
@@ -86,7 +167,7 @@ declare const declaration: {
                         readonly left: "50%";
                         readonly width: "500px";
                         readonly height: "300px";
-                        readonly 'background-color': "white";
+                        readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
                         readonly transform: "translate3d(-50%, -50%, 0px)";
                         readonly 'padding-top': "20px";
                         readonly 'padding-bottom': "20px";

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

@@ -3,6 +3,67 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 var t = e()({
 	type: "dialogContainer",
 	sourceType: "dialogContainer",
+	triggers: {
+		onDialogAccept: {
+			action: "onDialogAccept",
+			title: "On Dialog Accept",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onDialogReject: {
+			action: "onDialogReject",
+			title: "On Dialog Reject",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onDialogOpen: {
+			action: "onDialogOpen",
+			title: "On Dialog Open",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onDialogClose: {
+			action: "onDialogClose",
+			title: "On Dialog Close",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		}
+	},
+	callbacks: {
+		openDialog: {
+			action: "openDialog",
+			title: "Open Dialog",
+			type: "callback",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		closeDialog: {
+			action: "closeDialog",
+			title: "Close Dialog",
+			type: "callback",
+			preview: {},
+			params: {}
+		}
+	},
 	content: {
 		attributes: {
 			headerLabel: "Dialog Header",
@@ -77,7 +138,7 @@ var t = e()({
 					left: "50%",
 					width: "500px",
 					height: "300px",
-					"background-color": "white",
+					"background-color": "light-dark(white, oklch(0.21 0.006 285.885))",
 					transform: "translate3d(-50%, -50%, 0px)",
 					"padding-top": "20px",
 					"padding-bottom": "20px",