@plitzi/sdk-elements 0.37.1 → 0.37.3

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

@@ -1,9 +1,90 @@
 declare const DialogContainer: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DialogContainer').DialogContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DialogContainer').DialogContainerProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     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";
@@ -85,7 +166,7 @@ declare const DialogContainer: {
                         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/List/List.d.ts

@@ -7,9 +7,9 @@ export type ListProps<T = unknown> = {
     items?: T[];
     source?: 'none' | 'controlled';
 };
-declare const List: ({ ref, className, subType, children, items, source }: ListProps) => import("react").JSX.Element;
+declare const List: ({ ref, className, subType, children, items, source }: ListProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ListProps<unknown>>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ListProps<unknown>>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -4,9 +4,9 @@ export type ListItemProps = {
     className: string;
     children: ReactNode;
 };
-declare const ListItem: ({ ref, className, children }: ListItemProps) => import("react").JSX.Element;
+declare const ListItem: ({ ref, className, children }: ListItemProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<ListItemProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<ListItemProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -1,2 +1,2 @@
-declare const Settings: () => import("react").JSX.Element;
+declare const Settings: () => import('react').JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const ListItem: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./ListItem').ListItemProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./ListItem').ListItemProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "listItem";

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

@@ -3,5 +3,5 @@ type SettingsProps = {
     source?: 'none' | 'controlled';
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, source, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ subType, source, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -4,6 +4,10 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type ListAttributes = AuthorableAttributes<ListProps>;
 declare const declaration: {
     readonly type: "list";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+        readonly source: readonly string[];
+    };
     readonly sourceType: "list";
     readonly content: {
         readonly attributes: {

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

@@ -1,7 +1,11 @@
-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/List/declaration.ts
-var t = e()({
+var n = e()({
 	type: "list",
+	attributeValues: {
+		subType: t()(["ul", "ol"]),
+		source: t()(["none", "controlled"])
+	},
 	sourceType: "list",
 	content: {
 		attributes: {
@@ -70,4 +74,4 @@ var t = e()({
 	]
 });
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -1,10 +1,10 @@
 declare const List: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./List').ListProps<unknown>>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./List').ListProps<unknown>>): import('react').JSX.Element;
     displayName: string;
 } & {
     plugins: {
         listItem: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import("react").JSX.Element;
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import('react').JSX.Element;
             displayName: string;
         } & {
             readonly type: "listItem";
@@ -55,6 +55,10 @@ declare const List: {
         } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
     };
     type: "list";
+    attributeValues: {
+        readonly subType: readonly string[];
+        readonly source: readonly string[];
+    };
     sourceType: "list";
     content: {
         readonly attributes: {

package/dist/elements/structure/List/modes/ListBasic.d.ts

@@ -5,5 +5,5 @@ export type ListBasicProps = {
     subType?: 'ul' | 'ol';
     children?: ReactNode;
 };
-declare const ListBasic: ({ ref, className, subType, children }: ListBasicProps) => import("react").JSX.Element;
+declare const ListBasic: ({ ref, className, subType, children }: ListBasicProps) => import('react').JSX.Element;
 export default ListBasic;

package/dist/elements/structure/List/modes/ListControlled/ListControlled.d.ts

@@ -5,5 +5,5 @@ export type ListControlledProps<T = unknown> = {
     children: ReactNode;
     items: T[];
 };
-declare const ListControlled: ({ ref, className, children, items }: ListControlledProps) => import("react").JSX.Element;
+declare const ListControlled: ({ ref, className, children, items }: ListControlledProps) => import('react').JSX.Element;
 export default ListControlled;

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.d.ts

@@ -8,5 +8,5 @@ export type ListControlledItemProps<T = unknown> = {
     record: T;
     source: string;
 };
-declare const ListControlledItem: ({ children, className, isTemplate, index, record, source }: ListControlledItemProps) => import("react").JSX.Element;
+declare const ListControlledItem: ({ children, className, isTemplate, index, record, source }: ListControlledItemProps) => import('react').JSX.Element;
 export default ListControlledItem;

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

@@ -6,9 +6,9 @@ export type ModalContainerProps = {
     title?: string;
     autoHideAfterClick?: boolean;
 };
-declare const ModalContainer: ({ ref, className, children, title, autoHideAfterClick }: ModalContainerProps) => import("react").JSX.Element;
+declare const ModalContainer: ({ ref, className, children, title, autoHideAfterClick }: ModalContainerProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ModalContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ModalContainerProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/ModalContainer/ModalContainer.mjs

@@ -2,143 +2,128 @@ 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 "../../../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 i from "./useModalDialog.mjs";
+import a from "./declaration.mjs";
+import { metadataFromText as o } from "./metadataFromText.mjs";
+import { use as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import p from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as m } from "@plitzi/nexus/react";
+import { emptyObject as h } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import v from "clsx";
+import y from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import b from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/ModalContainer/ModalContainer.tsx
-var v = ({ ref: e, className: v = "", children: y, title: b = "Modal Header", autoHideAfterClick: x = !0 }) => {
-	let { id: S, definition: { styleSelectors: C, label: w = "Modal" }, elementState: T, setElementState: E } = t(), D = g(i.sourceType, S), { contexts: { InteractionsContext: O } } = u(), { interactionsManager: k } = a(O), [A, j] = l({}), M = o((e) => {
+var x = ({ ref: e, className: x = "", children: S, title: C = "Modal Header", autoHideAfterClick: w = !0 }) => {
+	let { id: T, rootId: E, visible: D, definition: { styleSelectors: O, label: k = "Modal" }, elementState: A, setElementState: j } = t(), M = y(a.sourceType, T), { settings: { previewMode: N }, contexts: { InteractionsContext: P } } = p(), { interactionsManager: F } = s(P), [I, L] = f({}), R = d(null), z = `${E}_${T}_title`, B = c((e) => {
 		let { metadata: t } = e;
-		if (t && typeof t == "object") j(t);
-		else if (typeof t == "string") try {
-			j(JSON.parse(t));
-		} catch {
-			j({ content: t });
-		}
-		else j(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
-		E((e) => ({
+		L(t && typeof t == "object" ? t : typeof t == "string" ? o(t) : typeof t == "boolean" || typeof t == "number" ? { content: t } : {}), j((e) => ({
 			...e,
 			visibility: !0
 		}));
-	}, [E, j]), N = o(() => {
-		k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
+	}, [j, L]), V = c(() => {
+		F.interactionTrigger(T, "onModalClose", { metadata: I }), L({}), j((e) => ({
 			...e,
 			visibility: !1
 		}));
 	}, [
-		k,
-		E,
+		F,
 		j,
-		A,
-		S
-	]), P = o(() => {
-		x && (k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
+		L,
+		I,
+		T
+	]), H = c(() => {
+		w && (F.interactionTrigger(T, "onModalClose", { metadata: I }), L({}), j((e) => ({
 			...e,
 			visibility: !1
 		})));
 	}, [
-		k,
-		x,
-		E,
+		F,
+		w,
 		j,
-		A,
-		S
-	]), F = c(() => ({
-		onModalOpen: {
-			action: "onModalOpen",
-			title: "On Modal Open",
-			type: "trigger",
-			params: { metadata: {
-				type: "text",
-				defaultValue: ""
-			} },
-			preview: { metadata: "" }
-		},
-		onModalClose: {
-			action: "onModalClose",
-			title: "On Modal Close",
-			type: "trigger",
-			preview: {},
-			params: {}
-		}
-	}), []), I = c(() => ({
+		L,
+		I,
+		T
+	]), U = u(() => ({
 		openModal: {
-			action: "openModal",
-			title: `Open ${w}`,
-			type: "callback",
-			callback: M,
-			params: { metadata: {
-				type: "text",
-				defaultValue: ""
-			} },
-			preview: { metadata: "" }
+			...a.callbacks.openModal,
+			title: `Open ${k}`,
+			callback: B
 		},
 		closeModal: {
-			action: "closeModal",
-			title: `Close ${w}`,
-			type: "callback",
-			callback: N,
-			params: {},
-			preview: {}
+			...a.callbacks.closeModal,
+			title: `Close ${k}`,
+			callback: V
 		}
 	}), [
-		N,
-		M,
-		w
+		V,
+		B,
+		k
 	]);
-	s(() => {
-		T.visibility !== !1 && k.interactionTrigger(S, "onModalOpen", { metadata: A });
+	i({
+		panelRef: R,
+		open: !!N && D,
+		onClose: V
+	}), l(() => {
+		A.visibility !== !1 && F.interactionTrigger(T, "onModalOpen", { metadata: I });
 	}, [
-		S,
-		k,
-		A,
-		T.visibility
+		T,
+		F,
+		I,
+		A.visibility
 	]);
-	let L = o(() => r(A), [A]);
-	_({
-		id: S,
-		source: D,
-		name: w || `Modal - ${S}`,
-		fields: L
+	let W = c(() => r(I), [I]);
+	b({
+		id: T,
+		source: M,
+		name: k || `Modal - ${T}`,
+		fields: W
 	});
-	let R = c(() => D ? { runtime: { sources: { [D]: A } } } : f, [D, A]);
-	return /* @__PURE__ */ m(n, {
+	let G = u(() => M ? { runtime: { sources: { [M]: I } } } : h, [M, I]);
+	return /* @__PURE__ */ _(n, {
 		ref: e,
-		className: h("plitzi-component__modal-container", v),
-		interactionTriggers: F,
-		interactionCallbacks: I,
-		children: [/* @__PURE__ */ p("div", {
-			className: h("modal-container__background", C.backgroundContainer),
-			onClick: P
-		}), /* @__PURE__ */ m("div", {
-			className: h("modal-container__root", C.rootContainer),
-			children: [/* @__PURE__ */ m("div", {
-				className: h("modal-container__header", C.headerContainer),
-				children: [/* @__PURE__ */ p("div", {
-					className: h("modal-container__header__title", C.headerTitle),
-					children: b || "Modal Header"
-				}), /* @__PURE__ */ p("i", {
-					className: h("fa-solid fa-xmark", C.headerCloseButton),
+		className: v("plitzi-component__modal-container", x),
+		interactionTriggers: a.triggers,
+		interactionCallbacks: U,
+		children: [/* @__PURE__ */ g("div", {
+			className: v("modal-container__background", O.backgroundContainer),
+			"aria-hidden": "true",
+			onClick: H
+		}), /* @__PURE__ */ _("div", {
+			ref: R,
+			className: v("modal-container__root", O.rootContainer),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": z,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ _("div", {
+				className: v("modal-container__header", O.headerContainer),
+				children: [/* @__PURE__ */ g("div", {
+					id: z,
+					className: v("modal-container__header__title", O.headerTitle),
+					children: C || "Modal Header"
+				}), /* @__PURE__ */ g("button", {
+					type: "button",
+					className: v("modal-container__close", O.headerCloseButton),
+					"aria-label": "Close",
 					title: "Close",
-					onClick: N
+					onClick: V,
+					children: /* @__PURE__ */ g("i", {
+						className: "fa-solid fa-xmark",
+						"aria-hidden": "true"
+					})
 				})]
-			}), /* @__PURE__ */ p("div", {
-				className: h("modal-container__body", C.bodyContainer),
-				children: /* @__PURE__ */ p(d, {
+			}), /* @__PURE__ */ g("div", {
+				className: v("modal-container__body", O.bodyContainer),
+				children: /* @__PURE__ */ g(m, {
 					inherit: "live",
-					name: `Modal:${S}`,
-					value: R,
-					children: y
+					name: `Modal:${T}`,
+					value: G,
+					children: S
 				})
 			})]
 		})]
 	});
-}, y = e(v);
+}, S = e(x);
 //#endregion
-export { v as ModalContainer, y as default };
+export { x as ModalContainer, S as default };

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

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

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

@@ -5,6 +5,52 @@ export type ModalContainerAttributes = AuthorableAttributes<ModalContainerProps>
 declare const declaration: {
     readonly type: "modalContainer";
     readonly sourceType: "modalContainer";
+    readonly triggers: {
+        readonly onModalOpen: {
+            readonly action: "onModalOpen";
+            readonly title: "On Modal Open";
+            readonly type: "trigger";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly onModalClose: {
+            readonly action: "onModalClose";
+            readonly title: "On Modal Close";
+            readonly type: "trigger";
+            readonly preview: {};
+            readonly params: {};
+        };
+    };
+    readonly callbacks: {
+        readonly openModal: {
+            readonly action: "openModal";
+            readonly title: "Open Modal";
+            readonly type: "callback";
+            readonly params: {
+                readonly metadata: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+            readonly preview: {
+                readonly metadata: "";
+            };
+        };
+        readonly closeModal: {
+            readonly action: "closeModal";
+            readonly title: "Close Modal";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly title: "Modal Header";
@@ -86,7 +132,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 'border-top-left-radius': "8px";
                         readonly 'border-top-right-radius': "8px";
@@ -100,7 +146,7 @@ declare const declaration: {
                         readonly 'align-items': "center";
                         readonly 'justify-content': "space-between";
                         readonly 'border-bottom-width': "1px";
-                        readonly 'border-bottom-color': "#d1d5db";
+                        readonly 'border-bottom-color': "light-dark(#d1d5db, oklch(0.37 0.013 285.805))";
                         readonly 'border-bottom-style': "solid";
                         readonly 'padding-left': "20px";
                         readonly 'padding-right': "20px";

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

@@ -3,6 +3,44 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 var t = e()({
 	type: "modalContainer",
 	sourceType: "modalContainer",
+	triggers: {
+		onModalOpen: {
+			action: "onModalOpen",
+			title: "On Modal Open",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onModalClose: {
+			action: "onModalClose",
+			title: "On Modal Close",
+			type: "trigger",
+			preview: {},
+			params: {}
+		}
+	},
+	callbacks: {
+		openModal: {
+			action: "openModal",
+			title: "Open Modal",
+			type: "callback",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		closeModal: {
+			action: "closeModal",
+			title: "Close Modal",
+			type: "callback",
+			params: {},
+			preview: {}
+		}
+	},
 	content: {
 		attributes: {
 			title: "Modal Header",
@@ -72,7 +110,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)",
 					"border-top-left-radius": "8px",
 					"border-top-right-radius": "8px",
@@ -84,7 +122,7 @@ var t = e()({
 					"align-items": "center",
 					"justify-content": "space-between",
 					"border-bottom-width": "1px",
-					"border-bottom-color": "#d1d5db",
+					"border-bottom-color": "light-dark(#d1d5db, oklch(0.37 0.013 285.805))",
 					"border-bottom-style": "solid",
 					"padding-left": "20px",
 					"padding-right": "20px",