@plitzi/sdk-elements 0.38.11 → 0.38.12

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

@@ -1,121 +1,122 @@
-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 a from "@plitzi/plitzi-ui/Select";
+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";
+import o from "@plitzi/plitzi-ui/Select";
 //#region src/elements/structure/Container/Settings.tsx
-var o = ({ subType: o = "div", label: s = "", decorative: c = !1, onUpdate: l }) => {
-	let u = e((e) => (t) => l?.(e, t), [l]), d = e((e) => l?.("decorative", e.target.checked), [l]);
-	return /* @__PURE__ */ n("div", {
+var s = ({ subType: s = "div", label: c = "", decorative: l = !1, onUpdate: u }) => {
+	let d = e(u), f = t((e) => u?.("decorative", e.target.checked), [u]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ n(a, {
+			/* @__PURE__ */ r(o, {
 				label: "ContainerTag",
-				value: o,
-				onChange: u("subType"),
+				value: s,
+				onChange: d.text("subType"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "div",
 						children: "Div"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "header",
 						children: "Header"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "footer",
 						children: "Footer"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "nav",
 						children: "Nav"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "main",
 						children: "Main"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "section",
 						children: "Section"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "article",
 						children: "Article"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "aside",
 						children: "Aside"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "address",
 						children: "Address"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "figure",
 						children: "Figure"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "dl",
 						children: "DL"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "dt",
 						children: "DT"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "dd",
 						children: "DD"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "li",
 						children: "LI"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "h1",
 						children: "H1 (heading with parts)"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "h2",
 						children: "H2 (heading with parts)"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "h3",
 						children: "H3 (heading with parts)"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "h4",
 						children: "H4 (heading with parts)"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "h5",
 						children: "H5 (heading with parts)"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "h6",
 						children: "H6 (heading with parts)"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "span",
 						children: "Span (inline)"
 					})
 				]
 			}),
-			/* @__PURE__ */ t(i, {
-				value: s,
+			/* @__PURE__ */ n(a, {
+				value: c,
 				label: "Region Name",
 				placeholder: "e.g. Main navigation, Search results",
-				onChange: u("label"),
+				onChange: d.text("label"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(r, {
-				checked: c,
+			/* @__PURE__ */ n(i, {
+				checked: l,
 				label: "Decorative (hidden from screen readers)",
-				onChange: d,
+				onChange: f,
 				size: "xs"
 			})
 		]
 	});
 };
 //#endregion
-export { o as default };
+export { s as default };

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

@@ -8,7 +8,7 @@ export type ContainerAttributes = AuthorableAttributes<ContainerProps>;
  * hold (a heading, a list item) or refuse one outright, so a label on them would be read by nobody.
  */
 export declare const NAMEABLE_CONTAINER_TAGS: readonly NonNullable<ContainerProps['subType']>[];
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "container";
     readonly attributeValues: {
         readonly subType: readonly string[];
@@ -20,38 +20,14 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Container";
-            readonly type: "container";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            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 items: [];
         };
         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-crop-simple";
         };
         readonly defaultStyle: {
-            readonly name: "Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -59,9 +35,8 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     label?: string | undefined;
     title?: string | undefined;
     subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;

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

@@ -47,38 +47,17 @@ var n = [
 		attributes: { subType: "div" },
 		definition: {
 			label: "Container",
-			type: "container",
 			description: "Generic layout box (a div). The primary building block for structure: groups and positions child elements with flex/grid. Reach for it whenever you need to wrap or arrange other elements.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			items: []
 		},
 		market: {
 			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-crop-simple"
 		},
 		defaultStyle: {
-			name: "Container",
-			displayMode: "desktop",
 			style: { base: { default: {} } },
 			subTypes: {}
-		},
-		settings: {}
+		}
 	}
 });
 //#endregion

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

@@ -13,38 +13,14 @@ declare const Container: {
         };
         readonly definition: {
             readonly label: "Container";
-            readonly type: "container";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            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 items: [];
         };
         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-crop-simple";
         };
         readonly defaultStyle: {
-            readonly name: "Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -52,8 +28,9 @@ declare const Container: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     label?: string | undefined;
     title?: string | undefined;

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

@@ -1,13 +1,13 @@
 import { ReactNode, RefObject } from 'react';
 export type DialogContainerProps = {
-    ref: RefObject<HTMLElement>;
-    className: string;
-    children: ReactNode;
-    headerLabel: string;
-    acceptButtonLabel: string;
-    acceptButtonLabelLoading: string;
-    rejectButtonLabel: string;
-    autoHideAfterClick: boolean;
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
+    headerLabel?: string;
+    acceptButtonLabel?: string;
+    acceptButtonLabelLoading?: string;
+    rejectButtonLabel?: string;
+    autoHideAfterClick?: boolean;
 };
 declare const DialogContainer: ({ ref, className, children, headerLabel, acceptButtonLabel, acceptButtonLabelLoading, rejectButtonLabel, autoHideAfterClick }: DialogContainerProps) => import('react').JSX.Element;
 declare const _default: {

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 };