@plitzi/sdk-elements 0.38.11 → 0.38.13

package/dist/elements/structure/Pagination/Pagination.mjs

@@ -4,77 +4,78 @@ import n from "../../../Element/hooks/useElement.mjs";
 import { RootElement as r } from "../../../Element/RootElement.mjs";
 import i from "./buildPageWindow.mjs";
 import { use as a, useCallback as o, useMemo as s } from "react";
-import c from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import c from "@plitzi/sdk-shared/hooks/usePlitzi";
 import { useSdkStore as l } from "@plitzi/sdk-shared/store";
 import { emptyObject as u } from "@plitzi/sdk-shared/helpers/utils";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import m from "clsx";
+import h from "@plitzi/sdk-interactions/InteractionsContext";
 //#region src/elements/structure/Pagination/Pagination.tsx
-var h = (e, t) => {
+var g = (e, t) => {
 	if (typeof window > "u") return "";
 	let n = new URL(window.location.href);
 	return t <= 1 ? n.searchParams.delete(e) : n.searchParams.set(e, String(t)), `${n.pathname}${n.search}`;
-}, g = ({ ref: t, className: g = "", children: _, pageInfo: v = u, mode: y = "pages", pageParam: b = "page", target: x = "url", windowSize: S = 5, previousLabel: C = "Previous", nextLabel: w = "Next", loadMoreLabel: T = "Load more", label: E = "Pagination" }) => {
-	let { id: D, definition: { styleSelectors: O } } = n(), { settings: { previewMode: k }, contexts: { InteractionsContext: A } } = c(), { interactionsManager: j } = a(A), [M] = l("navigation.navigate"), N = v.page ?? 1, P = v.pageCount ?? 0, F = v.hasPrevPage ?? N > 1, I = v.hasNextPage ?? !1, L = s(() => i(N, P, S), [
+}, _ = ({ ref: t, className: _ = "", children: v, pageInfo: y = u, mode: b = "pages", pageParam: x = "page", target: S = "url", windowSize: C = 5, previousLabel: w = "Previous", nextLabel: T = "Next", loadMoreLabel: E = "Load more", label: D = "Pagination" }) => {
+	let { id: O, definition: { styleSelectors: k } } = n(), { settings: { previewMode: A } } = c(), { interactionsManager: j } = a(h), [M] = l("navigation.navigate"), N = y.page ?? 1, P = y.pageCount ?? 0, F = y.hasPrevPage ?? N > 1, I = y.hasNextPage ?? !1, L = s(() => i(N, P, C), [
 		N,
 		P,
-		S
+		C
 	]), R = o((e) => {
 		let t = Math.max(e, 1);
-		D && j.interactionTrigger(D, "onPageChange", { page: t }), x === "url" && M(h(b, t));
+		O && j.interactionTrigger(O, "onPageChange", { page: t }), S === "url" && M(g(x, t));
 	}, [
-		D,
+		O,
 		j,
-		x,
+		S,
 		M,
-		b
+		x
 	]), z = o((e) => (t) => {
 		t.preventDefault(), R(e);
 	}, [R]), B = P === 0 && !I && !F;
 	return /* @__PURE__ */ p(r, {
 		ref: t,
 		tag: "nav",
-		"aria-label": E || void 0,
-		className: m("plitzi-component__pagination", g),
+		"aria-label": D || void 0,
+		className: m("plitzi-component__pagination", _),
 		interactionTriggers: e.triggers,
 		children: [
-			y === "loadMore" && /* @__PURE__ */ f("button", {
+			b === "loadMore" && /* @__PURE__ */ f("button", {
 				type: "button",
-				className: m("plitzi-component__pagination-more", O.loadMore),
-				disabled: !I && k,
+				className: m("plitzi-component__pagination-more", k.loadMore),
+				disabled: !I && A,
 				onClick: z(N + 1),
-				children: T
+				children: E
 			}),
-			y === "pages" && /* @__PURE__ */ p(d, { children: [
+			b === "pages" && /* @__PURE__ */ p(d, { children: [
 				/* @__PURE__ */ f("button", {
 					type: "button",
-					className: m("plitzi-component__pagination-prev", O.previous),
-					disabled: !F && k,
+					className: m("plitzi-component__pagination-prev", k.previous),
+					disabled: !F && A,
 					onClick: z(N - 1),
-					children: C
+					children: w
 				}),
 				L.map((e) => /* @__PURE__ */ f("button", {
 					type: "button",
-					className: m("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === N }, O.page),
+					className: m("plitzi-component__pagination-page", { "plitzi-component__pagination-page--current": e === N }, k.page),
 					"aria-current": e === N ? "page" : void 0,
 					onClick: z(e),
 					children: e
 				}, e)),
 				/* @__PURE__ */ f("button", {
 					type: "button",
-					className: m("plitzi-component__pagination-next", O.next),
-					disabled: !I && k,
+					className: m("plitzi-component__pagination-next", k.next),
+					disabled: !I && A,
 					onClick: z(N + 1),
-					children: w
+					children: T
 				})
 			] }),
-			!k && B && /* @__PURE__ */ f("span", {
+			!A && B && /* @__PURE__ */ f("span", {
 				className: "plitzi-component__pagination-hint",
 				children: "Bind pageInfo"
 			}),
-			_
+			v
 		]
 	});
-}, _ = t(g);
+}, v = t(_);
 //#endregion
-export { g as Pagination, _ as default };
+export { _ as Pagination, v as default };

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

@@ -1,17 +1,17 @@
-import { useCallback as e } from "react";
+import e from "../../useSettingsUpdate.mjs";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/structure/Pagination/Settings.tsx
 var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSize: l = "5", previousLabel: u = "Previous", nextLabel: d = "Next", loadMoreLabel: f = "Load more", label: p = "Pagination", onUpdate: m }) => {
-	let h = e((e) => (t) => m?.(e, t), [m]);
+	let h = e(m);
 	return /* @__PURE__ */ r("div", {
 		className: "flex grow flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ r(a, {
 				value: o,
 				label: "Mode",
-				onChange: h("mode"),
+				onChange: h.text("mode"),
 				size: "xs",
 				children: [/* @__PURE__ */ n("option", {
 					value: "pages",
@@ -24,7 +24,7 @@ var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSi
 			/* @__PURE__ */ r(a, {
 				value: s,
 				label: "On Page Change",
-				onChange: h("target"),
+				onChange: h.text("target"),
 				size: "xs",
 				children: [/* @__PURE__ */ n("option", {
 					value: "url",
@@ -38,40 +38,40 @@ var o = ({ mode: o = "pages", target: s = "url", pageParam: c = "page", windowSi
 				value: c,
 				label: "Page parameter",
 				title: "Must match the page parameter of the provider this pager belongs to.",
-				onChange: h("pageParam"),
+				onChange: h.text("pageParam"),
 				size: "xs"
 			}),
 			o === "pages" && /* @__PURE__ */ r(t, { children: [
 				/* @__PURE__ */ n(i, {
 					value: l,
 					label: "Pages shown",
-					onChange: h("windowSize"),
+					onChange: h.text("windowSize"),
 					size: "xs"
 				}),
 				/* @__PURE__ */ n(i, {
 					value: u,
 					label: "Previous label",
-					onChange: h("previousLabel"),
+					onChange: h.text("previousLabel"),
 					size: "xs"
 				}),
 				/* @__PURE__ */ n(i, {
 					value: d,
 					label: "Next label",
-					onChange: h("nextLabel"),
+					onChange: h.text("nextLabel"),
 					size: "xs"
 				})
 			] }),
 			o === "loadMore" && /* @__PURE__ */ n(i, {
 				value: f,
 				label: "Button label",
-				onChange: h("loadMoreLabel"),
+				onChange: h.text("loadMoreLabel"),
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(i, {
 				value: p,
 				label: "Navigation name",
 				title: "What a screen reader calls this pager, in the site's language.",
-				onChange: h("label"),
+				onChange: h.text("label"),
 				size: "xs"
 			}),
 			/* @__PURE__ */ r("span", {

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

@@ -2,7 +2,7 @@ import { PaginationProps } from './Pagination';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type PaginationAttributes = AuthorableAttributes<PaginationProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "pagination";
     readonly attributeValues: {
         readonly mode: readonly string[];
@@ -32,42 +32,20 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Pagination";
-            readonly type: "pagination";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             readonly styleSelectors: {
-                readonly base: "";
                 readonly previous: "";
                 readonly page: "";
                 readonly next: "";
                 readonly loadMore: "";
             };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "structure";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-ellipsis";
         };
         readonly defaultStyle: {
-            readonly name: "Pagination";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -80,9 +58,8 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     mode?: "pages" | "loadMore" | undefined;
     label?: string | undefined;
     target?: "url" | "interaction" | undefined;

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

@@ -26,40 +26,20 @@ var n = e()({
 		},
 		definition: {
 			label: "Pagination",
-			type: "pagination",
 			description: "Pages through a list. Bind it to a provider page info: in URL mode it writes the page into the address bar so the result stays shareable and indexable, and in load-more mode it announces the next page for the provider to append. Its buttons take a class through their slots: `previous`, `page` (each numbered one — the page shown carries `aria-current=\"page\"`, so the class's `current` state dresses it), `next` and `loadMore`; one with nowhere to go is disabled, the `disabled` state.",
 			items: [],
-			bindings: {},
 			styleSelectors: {
-				base: "",
 				previous: "",
 				page: "",
 				next: "",
 				loadMore: ""
-			},
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			}
 		},
 		market: {
 			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-ellipsis"
 		},
 		defaultStyle: {
-			name: "Pagination",
-			displayMode: "desktop",
 			style: { base: { default: {
 				display: "flex",
 				"align-items": "center",
@@ -67,8 +47,7 @@ var n = e()({
 				"column-gap": "8px"
 			} } },
 			subTypes: {}
-		},
-		settings: {}
+		}
 	}
 });
 //#endregion

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

@@ -31,42 +31,20 @@ declare const Pagination: {
         };
         readonly definition: {
             readonly label: "Pagination";
-            readonly type: "pagination";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             readonly styleSelectors: {
-                readonly base: "";
                 readonly previous: "";
                 readonly page: "";
                 readonly next: "";
                 readonly loadMore: "";
             };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "structure";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-ellipsis";
         };
         readonly defaultStyle: {
-            readonly name: "Pagination";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -79,8 +57,9 @@ declare const Pagination: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     mode?: "pages" | "loadMore" | undefined;
     label?: string | undefined;

package/dist/elements/structure/TabContainer/TabContainerBody/TabContainerBody.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, RefObject } from 'react';
 export type TabContainerBodyProps = {
-    ref: RefObject<HTMLElement>;
-    className: string;
-    children: ReactNode;
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
 };
 declare const TabContainerBody: ({ ref, className, children }: TabContainerBodyProps) => import('react').JSX.Element;
 declare const _default: {

package/dist/elements/structure/TabContainer/TabContainerBody/TabContainerBody.mjs

@@ -1,38 +1,16 @@
 import e from "../../../../Element/hocs/withElement.mjs";
 import { RootElement as t } from "../../../../Element/RootElement.mjs";
-import n from "../TabContainerContext.mjs";
-import { Children as r, cloneElement as i, isValidElement as a, use as o, useMemo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-import l from "clsx";
+import n from "../useTabItems.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/structure/TabContainer/TabContainerBody/TabContainerBody.tsx
-var u = ({ ref: e, className: u = "", children: d }) => {
-	let { baseId: f, tabSelected: p, onSelect: m } = o(n), { childrenParsed: h } = s(() => {
-		let e = { childrenParsed: [] };
-		return r.forEach(d, (t, n) => {
-			if (!a(t)) return;
-			let r = t.props;
-			e.childrenParsed.push(i(t, {
-				...r,
-				internalProps: {
-					...r.internalProps,
-					baseId: f,
-					onSelect: m,
-					tabSelected: p,
-					tabIndex: n
-				}
-			}));
-		}), e;
-	}, [
-		f,
-		d,
-		m,
-		p
-	]);
-	return /* @__PURE__ */ c(t, {
+var a = ({ ref: e, className: a = "", children: o }) => {
+	let s = n(o, !1);
+	return /* @__PURE__ */ r(t, {
 		ref: e,
-		className: l("plitzi-component__tab-container-body", u),
-		children: h
+		className: i("plitzi-component__tab-container-body", a),
+		children: s
 	});
-}, d = e(u);
+}, o = e(a);
 //#endregion
-export { u as TabContainerBody, d as default };
+export { a as TabContainerBody, o as default };

package/dist/elements/structure/TabContainer/TabContainerBody/declaration.d.ts

@@ -2,45 +2,28 @@ import { TabContainerBodyProps } from './TabContainerBody';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type TabContainerBodyAttributes = AuthorableAttributes<TabContainerBodyProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "tabContainerBody";
     readonly ancestorType: "tabContainer";
     readonly content: {
         readonly attributes: {};
         readonly definition: {
             readonly label: "Tab Container Body";
-            readonly type: "tabContainerBody";
             readonly description: "The panel area inside a tabContainer that shows the active tab item.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
             readonly canDelete: false;
-            readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
             readonly canSnippet: false;
-            readonly itemsAllowed: readonly ["tabContainerItem"];
-            readonly itemsNotAllowed: readonly [];
+            readonly itemsAllowed: ["tabContainerItem"];
         };
         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-table-columns";
         };
         readonly defaultStyle: {
-            readonly name: "Tab Container Body";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -48,8 +31,7 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["tabContainerItem", "tabContainerItem", "tabContainerItem"];
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+}, unknown>;
 export default declaration;

package/dist/elements/structure/TabContainer/TabContainerBody/declaration.mjs

@@ -7,38 +7,24 @@ var t = e()({
 		attributes: {},
 		definition: {
 			label: "Tab Container Body",
-			type: "tabContainerBody",
 			description: "The panel area inside a tabContainer that shows the active tab item.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
+			items: []
 		},
 		builder: {
 			canDelete: !1,
-			canSelect: !0,
 			canDragDrop: !1,
 			canMove: !1,
 			canSnippet: !1,
-			itemsAllowed: ["tabContainerItem"],
-			itemsNotAllowed: []
+			itemsAllowed: ["tabContainerItem"]
 		},
 		market: {
 			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-table-columns"
 		},
 		defaultStyle: {
-			name: "Tab Container Body",
-			displayMode: "desktop",
 			style: { base: { default: {} } },
 			subTypes: {}
-		},
-		settings: {}
+		}
 	},
 	initialItems: [
 		"tabContainerItem",

package/dist/elements/structure/TabContainer/TabContainerBody/index.d.ts

@@ -8,38 +8,21 @@ declare const TabContainerBody: {
         readonly attributes: {};
         readonly definition: {
             readonly label: "Tab Container Body";
-            readonly type: "tabContainerBody";
             readonly description: "The panel area inside a tabContainer that shows the active tab item.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
             readonly canDelete: false;
-            readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
             readonly canSnippet: false;
-            readonly itemsAllowed: readonly ["tabContainerItem"];
-            readonly itemsNotAllowed: readonly [];
+            readonly itemsAllowed: ["tabContainerItem"];
         };
         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-table-columns";
         };
         readonly defaultStyle: {
-            readonly name: "Tab Container Body";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -47,8 +30,9 @@ declare const TabContainerBody: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["tabContainerItem", "tabContainerItem", "tabContainerItem"];
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
 export default TabContainerBody;

package/dist/elements/structure/TabContainer/TabContainerHeader/TabContainerHeader.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, RefObject } from 'react';
 export type TabContainerHeaderProps = {
-    ref: RefObject<HTMLElement>;
-    className: string;
-    children: ReactNode;
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
 };
 declare const TabContainerHeader: ({ ref, className, children }: TabContainerHeaderProps) => import('react').JSX.Element;
 declare const _default: {

package/dist/elements/structure/TabContainer/TabContainerHeader/TabContainerHeader.mjs

@@ -1,41 +1,17 @@
 import e from "../../../../Element/hocs/withElement.mjs";
 import { RootElement as t } from "../../../../Element/RootElement.mjs";
-import n from "../TabContainerContext.mjs";
-import { Children as r, cloneElement as i, isValidElement as a, use as o, useMemo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-import l from "clsx";
+import n from "../useTabItems.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/structure/TabContainer/TabContainerHeader/TabContainerHeader.tsx
-var u = ({ ref: e, className: u = "", children: d }) => {
-	let { baseId: f, tabSelected: p, onSelect: m } = o(n), { childrenParsed: h } = s(() => {
-		let e = { childrenParsed: [] }, t = r.toArray(d).filter(a).length;
-		return r.forEach(d, (n, r) => {
-			if (!a(n)) return;
-			let o = n.props;
-			e.childrenParsed.push(i(n, {
-				...o,
-				internalProps: {
-					...o.internalProps,
-					isHeader: !0,
-					baseId: f,
-					onSelect: m,
-					tabSelected: p,
-					tabIndex: r,
-					tabCount: t
-				}
-			}));
-		}), e;
-	}, [
-		f,
-		d,
-		m,
-		p
-	]);
-	return /* @__PURE__ */ c(t, {
+var a = ({ ref: e, className: a = "", children: o }) => {
+	let s = n(o, !0);
+	return /* @__PURE__ */ r(t, {
 		ref: e,
 		role: "tablist",
-		className: l("plitzi-component__tab-container-header", u),
-		children: h
+		className: i("plitzi-component__tab-container-header", a),
+		children: s
 	});
-}, d = e(u);
+}, o = e(a);
 //#endregion
-export { u as TabContainerHeader, d as default };
+export { a as TabContainerHeader, o as default };