@plitzi/sdk-elements 0.32.1 → 0.32.3

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

@@ -1,15 +1,16 @@
-import e from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
-import { use as n, useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { getPathsFromObeject as c } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "clsx";
-import f from "@plitzi/sdk-shared/elements/hooks/useElement";
-import p from "@plitzi/nexus/StoreProvider";
+import e from "../../../Element/hooks/useElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { use as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
+import c from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as l } from "@plitzi/nexus/react";
+import { getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
 import m from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog Header", acceptButtonLabel: v = "Accept", acceptButtonLabelLoading: y = "Loading...", rejectButtonLabel: b = "Cancel", autoHideAfterClick: x = !0 }) => {
-	let { id: S, setElementState: C, definition: { styleSelectors: w, label: T = "Dialog" }, elementState: E } = f(), { contexts: { InteractionsContext: D } } = s(), { interactionsManager: O } = n(D), [k, A] = o({}), [j, M] = o(!1), N = r((e) => {
+//#region src/elements/structure/DialogContainer/DialogContainer.tsx
+var h = ({ ref: n, className: h = "", children: g, headerLabel: _ = "Dialog Header", acceptButtonLabel: v = "Accept", acceptButtonLabelLoading: y = "Loading...", rejectButtonLabel: b = "Cancel", autoHideAfterClick: x = !0 }) => {
+	let { id: S, setElementState: C, definition: { styleSelectors: w, label: T = "Dialog" }, elementState: E } = e(), { contexts: { InteractionsContext: D } } = c(), { interactionsManager: O } = r(D), [k, A] = s({}), [j, M] = s(!1), N = i((e) => {
 		let { metadata: t } = e;
 		if (t && typeof t == "object") A(t);
 		else if (typeof t == "string") try {
@@ -22,7 +23,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 			...e,
 			visibility: !0
 		}));
-	}, [C, A]), P = r(() => {
+	}, [C, A]), P = i(() => {
 		O.interactionTrigger(S, "onDialogClose", { metadata: k }), A({}), C((e) => ({
 			...e,
 			visibility: !1
@@ -33,7 +34,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 		A,
 		k,
 		S
-	]), F = r(() => {
+	]), F = i(() => {
 		x && (O.interactionTrigger(S, "onDialogClose", { metadata: k }), A({}), C((e) => ({
 			...e,
 			visibility: !1
@@ -46,7 +47,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 		k,
 		S
 	]);
-	r(async () => {
+	i(async () => {
 		M(!0), await O.interactionTrigger(S, "onDialogAccept", { metadata: k }), M(!1), C((e) => ({
 			...e,
 			visibility: !1
@@ -56,7 +57,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 		S,
 		k,
 		C
-	]), r(async () => {
+	]), i(async () => {
 		M(!0), await O.interactionTrigger(S, "onDialogReject", { metadata: k }), M(!1), C((e) => ({
 			...e,
 			visibility: !1
@@ -67,7 +68,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 		k,
 		C
 	]);
-	let I = a(() => ({
+	let I = o(() => ({
 		onDialogAccept: {
 			action: "onDialogAccept",
 			title: "On Dialog Accept",
@@ -108,7 +109,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 			} },
 			preview: { metadata: "" }
 		}
-	}), []), L = a(() => ({
+	}), []), L = o(() => ({
 		openDialog: {
 			action: "openDialog",
 			title: `Open ${T}`,
@@ -133,7 +134,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 		N,
 		T
 	]);
-	i(() => {
+	a(() => {
 		E.visibility !== !1 && O.interactionTrigger(S, "onDialogOpen", { metadata: k });
 	}, [
 		S,
@@ -141,7 +142,7 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 		k,
 		E.visibility
 	]);
-	let R = r(() => typeof k == "object" ? c(k).reduce((e, t) => {
+	let R = i(() => typeof k == "object" ? u(k).reduce((e, t) => {
 		let n = t.split(".");
 		return n.length > 1 ? [...e, {
 			path: t,
@@ -151,53 +152,55 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 			name: n[n.length - 1]
 		}];
 	}, []) : [], [k]);
-	return m({
+	m({
 		id: S,
 		source: `dialogContainer_${S}`,
 		name: T || `Dialog - ${S}`,
 		fields: R
-	}), /* @__PURE__ */ u(e, {
-		ref: t,
-		className: d("plitzi-component__dialog-container", h),
+	});
+	let z = o(() => ({ runtime: { sources: { [`dialogContainer_${S}`]: k } } }), [S, k]);
+	return /* @__PURE__ */ f(t, {
+		ref: n,
+		className: p("plitzi-component__dialog-container", h),
 		interactionTriggers: I,
 		interactionCallbacks: L,
-		children: [/* @__PURE__ */ l("div", {
-			className: d("dialog-container__background", w.backgroundContainer),
+		children: [/* @__PURE__ */ d("div", {
+			className: p("dialog-container__background", w.backgroundContainer),
 			onClick: F
-		}), /* @__PURE__ */ u("div", {
-			className: d("dialog-container__root", w.rootContainer),
+		}), /* @__PURE__ */ f("div", {
+			className: p("dialog-container__root", w.rootContainer),
 			children: [
-				/* @__PURE__ */ u("div", {
-					className: d("dialog-container__header", w.headerContainer),
-					children: [/* @__PURE__ */ l("div", {
-						className: d("dialog-container__header__title", w.headerTitle),
+				/* @__PURE__ */ f("div", {
+					className: p("dialog-container__header", w.headerContainer),
+					children: [/* @__PURE__ */ d("div", {
+						className: p("dialog-container__header__title", w.headerTitle),
 						children: _ || "Dialog Header"
-					}), /* @__PURE__ */ l("i", {
+					}), /* @__PURE__ */ d("i", {
 						className: "fa-solid fa-xmark",
 						title: "Close",
 						onClick: void 0
 					})]
 				}),
-				/* @__PURE__ */ l("div", {
-					className: d("dialog-container__body", w.body),
-					children: /* @__PURE__ */ l(p, {
+				/* @__PURE__ */ d("div", {
+					className: p("dialog-container__body", w.body),
+					children: /* @__PURE__ */ d(l, {
 						inherit: "live",
-						value: { runtime: { sources: { [`dialogContainer_${S}`]: k } } },
+						value: z,
 						children: g
 					})
 				}),
-				/* @__PURE__ */ u("div", {
-					className: d("dialog-container__footer", w.footerContainer),
-					children: [/* @__PURE__ */ u("button", {
-						className: d("footer__button button--accept", w.acceptButton),
+				/* @__PURE__ */ f("div", {
+					className: p("dialog-container__footer", w.footerContainer),
+					children: [/* @__PURE__ */ f("button", {
+						className: p("footer__button button--accept", w.acceptButton),
 						onClick: void 0,
 						disabled: j,
-						children: [j && /* @__PURE__ */ u("div", {
+						children: [j && /* @__PURE__ */ f("div", {
 							className: "button--accept__container",
-							children: [/* @__PURE__ */ l("i", { className: "fa-solid fa-rotate fa-spin" }), y]
+							children: [/* @__PURE__ */ d("i", { className: "fa-solid fa-rotate fa-spin" }), y]
 						}), !j && v]
-					}), /* @__PURE__ */ l("button", {
-						className: d("footer__button button--cancel", w.cancelButton),
+					}), /* @__PURE__ */ d("button", {
+						className: p("footer__button button--cancel", w.cancelButton),
 						onClick: void 0,
 						disabled: j,
 						children: b
@@ -206,6 +209,6 @@ var h = t(({ ref: t, className: h = "", children: g, headerLabel: _ = "Dialog He
 			]
 		})]
 	});
-});
+}, g = n(h);
 //#endregion
-export { h as default };
+export { h as DialogContainer, g 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-runtime").JSX.Element;
+declare const Settings: ({ acceptButtonLabel, acceptButtonLabelLoading, rejectButtonLabel, headerLabel, autoHideAfterClick, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

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

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

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-runtime").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-runtime").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ListProps<unknown>>): import("react").JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -2,7 +2,8 @@ import e from "./modes/ListBasic.mjs";
 import t from "./modes/ListControlled/index.mjs";
 import n from "../../../Element/hocs/withElement.mjs";
 import { jsx as r } from "react/jsx-runtime";
-var i = n(({ ref: n, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none" }) => {
+//#region src/elements/structure/List/List.tsx
+var i = ({ ref: n, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none" }) => {
 	switch (c) {
 		case "controlled": return /* @__PURE__ */ r(t, {
 			ref: n,
@@ -17,6 +18,6 @@ var i = n(({ ref: n, className: i = "", subType: a = "ul", children: o, items: s
 			children: o
 		});
 	}
-});
+}, a = n(i);
 //#endregion
-export { i as default };
+export { i as List, a as 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-runtime").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-runtime").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<ListItemProps>): import("react").JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -1,12 +1,13 @@
-import e from "../../../../Element/RootElement.mjs";
+import { RootElement as e } from "../../../../Element/RootElement.mjs";
 import t from "../../../../Element/hocs/withElement.mjs";
 import { jsx as n } from "react/jsx-runtime";
 import r from "clsx";
-var i = t(({ ref: t, className: i = "", children: a }) => /* @__PURE__ */ n(e, {
+//#region src/elements/structure/List/ListItem/ListItem.tsx
+var i = ({ ref: t, className: i = "", children: a }) => /* @__PURE__ */ n(e, {
 	tag: "li",
 	ref: t,
 	className: r("plitzi-component__list-item", i),
 	children: a
-}));
+}), a = t(i);
 //#endregion
-export { i as default };
+export { i as ListItem, a as default };

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

@@ -1,2 +1,2 @@
-declare const Settings: () => import("react/jsx-runtime").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-runtime").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./ListItem').ListItemProps>): import("react").JSX.Element;
     displayName: string;
 } & {
     type: string;

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-runtime").JSX.Element;
+declare const Settings: ({ subType, source, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const List: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./List').ListProps<unknown>>): import("react/jsx-runtime").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./List').ListProps<unknown>>): import("react").JSX.Element;
     displayName: string;
 } & {
     type: string;
@@ -86,7 +86,7 @@ declare const List: {
     initialItems: string[];
     plugins: {
         listItem: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import("react/jsx-runtime").JSX.Element;
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import("react").JSX.Element;
             displayName: string;
         } & {
             type: string;

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-runtime").JSX.Element;
+declare const ListBasic: ({ ref, className, subType, children }: ListBasicProps) => import("react").JSX.Element;
 export default ListBasic;

package/dist/elements/structure/List/modes/ListBasic.mjs

@@ -1,4 +1,4 @@
-import e from "../../../../Element/RootElement.mjs";
+import { RootElement as e } from "../../../../Element/RootElement.mjs";
 import { jsx as t } from "react/jsx-runtime";
 import n from "clsx";
 //#region src/elements/structure/List/modes/ListBasic.tsx

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-runtime").JSX.Element;
+declare const ListControlled: ({ ref, className, children, items }: ListControlledProps) => import("react").JSX.Element;
 export default ListControlled;

package/dist/elements/structure/List/modes/ListControlled/ListControlled.mjs

@@ -1,48 +1,48 @@
-import e from "../../../../../Element/RootElement.mjs";
-import t from "./ListControlledItem.mjs";
-import { useCallback as n, useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as a } from "@plitzi/plitzi-ui/helpers";
-import { getPathsFromObeject as o } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "clsx";
-import u from "@plitzi/sdk-shared/elements/hooks/useElement";
-import d from "@plitzi/nexus/StoreProvider";
+import e from "../../../../../Element/hooks/useElement.mjs";
+import { RootElement as t } from "../../../../../Element/RootElement.mjs";
+import n from "./ListControlledItem.mjs";
+import { useCallback as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { StoreProvider as s } from "@plitzi/nexus/react";
+import { getPathsFromObeject as c } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "clsx";
 import f from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/List/modes/ListControlled/ListControlled.tsx
 var p = ({ ref: p, className: m = "", children: h, items: g = [] }) => {
-	let { id: _, definition: { label: v } } = u(), { settings: { previewMode: y } } = i(), b = r(() => Array.isArray(g) ? g : [], [g]), x = n(() => o({
-		item: a(b, "0", {}),
+	let { id: _, definition: { label: v } } = e(), { settings: { previewMode: y } } = a(), b = i(() => Array.isArray(g) ? g : [], [g]), x = r(() => c({
+		item: o(b, "0", {}),
 		index: "0"
 	}).reduce((e, t) => [...e, {
 		path: t,
 		name: t
-	}], []), [b]), S = r(() => ({ items: b }), [b]);
+	}], []), [b]), S = i(() => ({ runtime: { sources: { [`list_${_}`]: { items: b } } } }), [_, b]);
 	return f({
 		id: _,
 		source: `list_${_}`,
 		name: v || `List - ${_}`,
 		fields: x
-	}), /* @__PURE__ */ c(e, {
+	}), /* @__PURE__ */ u(t, {
 		ref: p,
-		className: l("plitzi-component__controlled-list", m, { "controlled-list--build-mode": !y }),
-		children: [/* @__PURE__ */ s(d, {
+		className: d("plitzi-component__controlled-list", m, { "controlled-list--build-mode": !y }),
+		children: [/* @__PURE__ */ l(s, {
 			inherit: "live",
-			value: { runtime: { sources: { [`list_${_}`]: S } } },
-			children: b.map((e, n) => !h || Array.isArray(h) && h.length === 0 ? /* @__PURE__ */ s("div", {
+			value: S,
+			children: b.map((e, t) => !h || Array.isArray(h) && h.length === 0 ? /* @__PURE__ */ l("div", {
 				className: "plitzi-component__controlled-list-item controlled-list--empty",
-				children: /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ l("div", {
 					className: "controlled-list-item__counter",
-					children: `List Item - ${n + 1}`
+					children: `List Item - ${t + 1}`
 				})
-			}, n) : /* @__PURE__ */ s(t, {
-				itemCount: n + 1,
-				isTemplate: n !== 0 && !y,
+			}, t) : /* @__PURE__ */ l(n, {
+				itemCount: t + 1,
+				isTemplate: t !== 0 && !y,
 				record: e,
 				source: `list_${_}`,
 				children: h
-			}, n))
-		}), !y && b.length === 0 && /* @__PURE__ */ s("div", {
+			}, t))
+		}), !y && b.length === 0 && /* @__PURE__ */ l("div", {
 			className: "controlled-list controlled-list--empty",
 			children: "This list does not contain any items"
 		})]

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

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

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.mjs

@@ -1,29 +1,30 @@
 import e from "../../../../../Element/ReplicaProvider.mjs";
-import { useMemo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import i from "clsx";
-import a from "@plitzi/nexus/StoreProvider";
+import { useId as t, useMemo as n } from "react";
+import { StoreProvider as r } from "@plitzi/nexus/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
 //#region src/elements/structure/List/modes/ListControlled/ListControlledItem.tsx
-var o = ({ children: o, className: s = "", isTemplate: c = !1, itemCount: l = 0, record: u, source: d = "" }) => {
-	let f = t(() => ({
-		item: u,
-		index: `${l}`
-	}), [u, l]);
-	return c ? /* @__PURE__ */ r("div", {
-		className: i("plitzi-component__controlled-list-item", s),
-		children: [/* @__PURE__ */ n("div", {
-			className: "controlled-list-item__counter",
-			children: `List Item - ${l}`
-		}), /* @__PURE__ */ n(e, { children: /* @__PURE__ */ n(a, {
-			inherit: "live",
-			value: { runtime: { sources: { [d]: f } } },
-			children: o
-		}) })]
-	}) : /* @__PURE__ */ n(e, { children: /* @__PURE__ */ n(a, {
+var s = ({ children: s, className: c = "", isTemplate: l = !1, itemCount: u = 0, record: d, source: f = "" }) => {
+	let p = /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, {
 		inherit: "live",
-		value: { runtime: { sources: { [d]: f } } },
-		children: o
+		segment: t(),
+		value: n(() => ({ runtime: { sources: { [f]: {
+			item: d,
+			index: `${u}`
+		} } } }), [
+			f,
+			d,
+			u
+		]),
+		children: s
 	}) });
+	return l ? /* @__PURE__ */ a("div", {
+		className: o("plitzi-component__controlled-list-item", c),
+		children: [/* @__PURE__ */ i("div", {
+			className: "controlled-list-item__counter",
+			children: `List Item - ${u}`
+		}), p]
+	}) : p;
 };
 //#endregion
-export { o as default };
+export { s as default };

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-runtime").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-runtime").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

@@ -1,15 +1,16 @@
-import e from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
-import { use as n, useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { getPathsFromObeject as c } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "clsx";
-import f from "@plitzi/sdk-shared/elements/hooks/useElement";
-import p from "@plitzi/nexus/StoreProvider";
+import e from "../../../Element/hooks/useElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { use as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
+import c from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as l } from "@plitzi/nexus/react";
+import { getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
 import m from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header", autoHideAfterClick: v = !0 }) => {
-	let { id: y, definition: { styleSelectors: b, label: x = "Modal" }, elementState: S, setElementState: C } = f(), { contexts: { InteractionsContext: w } } = s(), { interactionsManager: T } = n(w), [E, D] = o({}), O = r((e) => {
+//#region src/elements/structure/ModalContainer/ModalContainer.tsx
+var h = ({ ref: n, className: h = "", children: g, title: _ = "Modal Header", autoHideAfterClick: v = !0 }) => {
+	let { id: y, definition: { styleSelectors: b, label: x = "Modal" }, elementState: S, setElementState: C } = e(), { contexts: { InteractionsContext: w } } = c(), { interactionsManager: T } = r(w), [E, D] = s({}), O = i((e) => {
 		let { metadata: t } = e;
 		if (t && typeof t == "object") D(t);
 		else if (typeof t == "string") try {
@@ -22,7 +23,7 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 			...e,
 			visibility: !0
 		}));
-	}, [C, D]), k = r(() => {
+	}, [C, D]), k = i(() => {
 		T.interactionTrigger(y, "onModalClose", { metadata: E }), D({}), C((e) => ({
 			...e,
 			visibility: !1
@@ -33,7 +34,7 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 		D,
 		E,
 		y
-	]), A = r(() => {
+	]), A = i(() => {
 		v && (T.interactionTrigger(y, "onModalClose", { metadata: E }), D({}), C((e) => ({
 			...e,
 			visibility: !1
@@ -45,7 +46,7 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 		D,
 		E,
 		y
-	]), j = a(() => ({
+	]), j = o(() => ({
 		onModalOpen: {
 			action: "onModalOpen",
 			title: "On Modal Open",
@@ -63,7 +64,7 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 			preview: {},
 			params: {}
 		}
-	}), []), M = a(() => ({
+	}), []), M = o(() => ({
 		openModal: {
 			action: "openModal",
 			title: `Open ${x}`,
@@ -88,7 +89,7 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 		O,
 		x
 	]);
-	i(() => {
+	a(() => {
 		S.visibility !== !1 && T.interactionTrigger(y, "onModalOpen", { metadata: E });
 	}, [
 		y,
@@ -96,7 +97,7 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 		E,
 		S.visibility
 	]);
-	let N = r(() => c(E).reduce((e, t) => {
+	let N = i(() => u(E).reduce((e, t) => {
 		let n = t.split(".");
 		return n.length > 1 ? [...e, {
 			path: t,
@@ -106,41 +107,43 @@ var h = t(({ ref: t, className: h = "", children: g, title: _ = "Modal Header",
 			name: n[n.length - 1]
 		}];
 	}, []), [E]);
-	return m({
+	m({
 		id: y,
 		source: `modalContainer_${y}`,
 		name: x || `Modal - ${y}`,
 		fields: N
-	}), /* @__PURE__ */ u(e, {
-		ref: t,
-		className: d("plitzi-component__modal-container", h),
+	});
+	let P = o(() => ({ runtime: { sources: { [`modalContainer_${y}`]: E } } }), [y, E]);
+	return /* @__PURE__ */ f(t, {
+		ref: n,
+		className: p("plitzi-component__modal-container", h),
 		interactionTriggers: j,
 		interactionCallbacks: M,
-		children: [/* @__PURE__ */ l("div", {
-			className: d("modal-container__background", b.backgroundContainer),
+		children: [/* @__PURE__ */ d("div", {
+			className: p("modal-container__background", b.backgroundContainer),
 			onClick: A
-		}), /* @__PURE__ */ u("div", {
-			className: d("modal-container__root", b.rootContainer),
-			children: [/* @__PURE__ */ u("div", {
-				className: d("modal-container__header", b.headerContainer),
-				children: [/* @__PURE__ */ l("div", {
-					className: d("modal-container__header__title", b.headerTitle),
+		}), /* @__PURE__ */ f("div", {
+			className: p("modal-container__root", b.rootContainer),
+			children: [/* @__PURE__ */ f("div", {
+				className: p("modal-container__header", b.headerContainer),
+				children: [/* @__PURE__ */ d("div", {
+					className: p("modal-container__header__title", b.headerTitle),
 					children: _ || "Modal Header"
-				}), /* @__PURE__ */ l("i", {
-					className: d("fa-solid fa-xmark", b.headerCloseButton),
+				}), /* @__PURE__ */ d("i", {
+					className: p("fa-solid fa-xmark", b.headerCloseButton),
 					title: "Close",
 					onClick: k
 				})]
-			}), /* @__PURE__ */ l("div", {
-				className: d("modal-container__body", b.bodyContainer),
-				children: /* @__PURE__ */ l(p, {
+			}), /* @__PURE__ */ d("div", {
+				className: p("modal-container__body", b.bodyContainer),
+				children: /* @__PURE__ */ d(l, {
 					inherit: "live",
-					value: { runtime: { sources: { [`modalContainer_${y}`]: E } } },
+					value: P,
 					children: g
 				})
 			})]
 		})]
 	});
-});
+}, g = n(h);
 //#endregion
-export { h as default };
+export { h as ModalContainer, g as default };