@plitzi/sdk-elements 0.38.10 → 0.38.12

package/dist/elements/structure/Carousel/Carousel.mjs

@@ -1,27 +1,28 @@
 import e from "./declaration.mjs";
 import t from "../../../Element/hocs/withElement.mjs";
 import n from "../../../Element/hooks/useElement.mjs";
-import { RootElement as ee } from "../../../Element/RootElement.mjs";
-import te from "../../../dataSource/pathFields.mjs";
-import ne from "./CarouselContext.mjs";
-import { clampIndex as r, directionOf as i, slideStep as a, stepIndex as o } from "./carouselIndex.mjs";
-import re from "./useAutoplay.mjs";
-import { rowKeys as s } from "../List/modes/ListControlled/rowKeys.mjs";
-import { use as ie, 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 { RootElement as r } from "../../../Element/RootElement.mjs";
+import i from "../../../dataSource/pathFields.mjs";
+import a from "../../../dataSource/sourceStore.mjs";
+import ee from "./CarouselContext.mjs";
+import { clampIndex as o, directionOf as s, slideStep as te, stepIndex as c } from "./carouselIndex.mjs";
+import ne from "./useAutoplay.mjs";
+import { rowKeys as l } from "../List/modes/ListControlled/rowKeys.mjs";
+import { use as u, useCallback as d, useEffect as re, useMemo as f, useRef as p, useState as m } from "react";
+import h from "@plitzi/sdk-shared/hooks/usePlitzi";
+import { StoreProvider as ie } from "@plitzi/nexus/react";
 import { jsx as g } from "react/jsx-runtime";
 import ae from "clsx";
-import oe from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import se from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import oe from "@plitzi/sdk-interactions/InteractionsContext";
+import se from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import ce from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/Carousel/Carousel.tsx
 var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "slide", autoplay: x = 0, pauseOnHover: S = !0, loop: C = !0, transition: w = "slide", speed: T = 30, itemKey: E, label: D = "" }) => {
-	let { id: O, definition: { label: k = "Carousel" } } = n(), A = oe(e.sourceType, O), { settings: { previewMode: ce }, contexts: { InteractionsContext: le } } = p(), { interactionsManager: j } = ie(le), M = u(() => Array.isArray(y) ? y : [], [y]), N = u(() => s(M, E), [M, E]), P = M.length, F = !!ce, [I, L] = f(0), [R, z] = f("next"), [B, V] = f(!1), [H, U] = f(x > 0), ue = d(null), W = t ?? ue, G = d(null), K = r(I, P);
-	l(() => {
+	let { id: O, definition: { label: k = "Carousel" } } = n(), A = se(e.sourceType, O), { settings: { previewMode: le } } = h(), { interactionsManager: j } = u(oe), M = f(() => Array.isArray(y) ? y : [], [y]), N = f(() => l(M, E), [M, E]), P = M.length, F = !!le, [I, L] = m(0), [R, z] = m("next"), [B, V] = m(!1), [H, U] = m(x > 0), ue = p(null), W = t ?? ue, G = p(null), K = o(I, P);
+	re(() => {
 		I !== K && L(K);
 	}, [I, K]);
-	let q = c((e, t) => {
+	let q = d((e, t) => {
 		P !== 0 && e !== K && (z(t), V(!0), L(e), j.interactionTrigger(O, "onChange", {
 			index: e,
 			item: M[e]
@@ -32,18 +33,18 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		O,
 		j,
 		M
-	]), J = c((e) => {
-		let t = G.current, n = t ? a(t) : 0;
+	]), J = d((e) => {
+		let t = G.current, n = t ? te(t) : 0;
 		t && n > 0 && t.scrollBy({
 			left: e * n,
 			behavior: "smooth"
 		});
-	}, []), Y = c(() => {
+	}, []), Y = d(() => {
 		if (b === "scroll") {
 			J(1);
 			return;
 		}
-		q(o(K, P, 1, C), "next");
+		q(c(K, P, 1, C), "next");
 	}, [
 		P,
 		K,
@@ -51,12 +52,12 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		b,
 		q,
 		J
-	]), X = c(() => {
+	]), X = d(() => {
 		if (b === "scroll") {
 			J(-1);
 			return;
 		}
-		q(o(K, P, -1, C), "previous");
+		q(c(K, P, -1, C), "previous");
 	}, [
 		P,
 		K,
@@ -64,23 +65,23 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		b,
 		q,
 		J
-	]), Z = c((e) => {
-		let t = r(e.index, P);
+	]), Z = d((e) => {
+		let t = o(e.index, P);
 		if (b === "scroll") {
 			J(t - K);
 			return;
 		}
-		q(t, i(K, t));
+		q(t, s(K, t));
 	}, [
 		P,
 		K,
 		b,
 		q,
 		J
-	]), Q = c((e) => {
-		e !== K && q(e, i(K, e));
+	]), Q = d((e) => {
+		e !== K && q(e, s(K, e));
 	}, [K, q]);
-	re({
+	ne({
 		delay: b === "slide" ? x : 0,
 		active: F && H && P > 1,
 		rootRef: W,
@@ -88,7 +89,7 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		position: K,
 		onTick: Y
 	});
-	let de = u(() => ({
+	let de = f(() => ({
 		next: {
 			...e.callbacks.next,
 			callback: Y
@@ -113,7 +114,7 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		Z,
 		Y,
 		X
-	]), $ = u(() => ({
+	]), $ = f(() => ({
 		items: M,
 		count: P,
 		index: K,
@@ -125,14 +126,14 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		K,
 		M,
 		H
-	]), fe = c(() => te($), [$]);
-	se({
+	]), fe = d(() => i($), [$]);
+	ce({
 		id: O,
 		source: A,
 		name: k || `Carousel - ${O}`,
 		fields: fe
 	});
-	let pe = u(() => A ? { runtime: { sources: { [A]: $ } } } : h, [A, $]), me = u(() => ({
+	let pe = f(() => a(A, $), [A, $]), me = f(() => ({
 		source: A,
 		items: M,
 		keys: N,
@@ -160,7 +161,7 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		T,
 		w
 	]);
-	return /* @__PURE__ */ g(ee, {
+	return /* @__PURE__ */ g(r, {
 		ref: W,
 		className: ae("plitzi-component__carousel", `carousel--${b}`, _),
 		role: "region",
@@ -168,11 +169,11 @@ var _ = ({ ref: t, className: _ = "", children: v, items: y = [], mode: b = "sli
 		"aria-label": D || void 0,
 		interactionTriggers: e.triggers,
 		interactionCallbacks: de,
-		children: /* @__PURE__ */ g(m, {
+		children: /* @__PURE__ */ g(ie, {
 			inherit: "live",
 			name: `Carousel:${O}`,
 			value: pe,
-			children: /* @__PURE__ */ g(ne, {
+			children: /* @__PURE__ */ g(ee, {
 				value: me,
 				children: v
 			})

package/dist/elements/structure/Carousel/CarouselTrack/declaration.d.ts

@@ -2,45 +2,24 @@ import { CarouselTrackProps } from './CarouselTrack';
 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 CarouselTrackAttributes = AuthorableAttributes<CarouselTrackProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "carouselTrack";
     readonly ancestorType: "carousel";
     readonly content: {
         readonly attributes: {};
         readonly definition: {
             readonly label: "Carousel Track";
-            readonly type: "carouselTrack";
             readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
             readonly canSnippet: false;
-            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-film";
         };
         readonly defaultStyle: {
-            readonly name: "Carousel Track";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -50,7 +29,6 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+}, unknown>;
 export default declaration;

package/dist/elements/structure/Carousel/CarouselTrack/declaration.mjs

@@ -7,40 +7,18 @@ var t = e()({
 		attributes: {},
 		definition: {
 			label: "Carousel Track",
-			type: "carouselTrack",
 			description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !1,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			items: []
 		},
+		builder: { canSnippet: !1 },
 		market: {
 			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-film"
 		},
-		defaultStyle: {
-			name: "Carousel Track",
-			displayMode: "desktop",
-			style: { base: { default: {
-				position: "relative",
-				overflow: "hidden"
-			} } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: {
+			position: "relative",
+			overflow: "hidden"
+		} } } }
 	}
 });
 //#endregion

package/dist/elements/structure/Carousel/CarouselTrack/index.d.ts

@@ -8,38 +8,17 @@ declare const CarouselTrack: {
         readonly attributes: {};
         readonly definition: {
             readonly label: "Carousel Track";
-            readonly type: "carouselTrack";
             readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
             readonly canSnippet: false;
-            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-film";
         };
         readonly defaultStyle: {
-            readonly name: "Carousel Track";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -49,7 +28,8 @@ declare const CarouselTrack: {
                 };
             };
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
 export default CarouselTrack;

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

@@ -1,97 +1,98 @@
-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/Carousel/Settings.tsx
-var o = ({ mode: o = "slide", autoplay: s = 0, pauseOnHover: c = !0, loop: l = !0, transition: u = "slide", speed: d = 30, itemKey: f = "", label: p = "", onUpdate: m }) => {
-	let h = e((e) => (t) => m?.(e, t), [m]), g = e((e) => (t) => m?.(e, Math.max(0, Math.round(Number(t) || 0))), [m]), _ = e((e) => (t) => m?.(e, t.target.checked), [m]);
-	return /* @__PURE__ */ n("div", {
+var s = ({ mode: s = "slide", autoplay: c = 0, pauseOnHover: l = !0, loop: u = !0, transition: d = "slide", speed: f = 30, itemKey: p = "", label: m = "", onUpdate: h }) => {
+	let g = e(h), _ = t((e) => (t) => h?.(e, Math.max(0, Math.round(Number(t) || 0))), [h]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ t(i, {
+			/* @__PURE__ */ n(a, {
 				label: "Label",
 				size: "xs",
 				placeholder: "Featured products",
-				value: p,
-				onChange: h("label")
+				value: m,
+				onChange: g.text("label")
 			}),
-			/* @__PURE__ */ n(a, {
+			/* @__PURE__ */ r(o, {
 				label: "Mode",
-				value: o,
-				onChange: h("mode"),
+				value: s,
+				onChange: g.text("mode"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "slide",
 						children: "One slide at a time"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "marquee",
 						children: "Marquee"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "scroll",
 						children: "Scrolling row"
 					})
 				]
 			}),
-			o === "slide" && /* @__PURE__ */ n(a, {
+			s === "slide" && /* @__PURE__ */ r(o, {
 				label: "Transition",
-				value: u,
-				onChange: h("transition"),
+				value: d,
+				onChange: g.text("transition"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "slide",
 						children: "Slide"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "fade",
 						children: "Fade"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "none",
 						children: "None"
 					})
 				]
 			}),
-			o === "slide" && /* @__PURE__ */ t(i, {
+			s === "slide" && /* @__PURE__ */ n(a, {
 				type: "number",
 				label: "Autoplay (ms, 0 for none)",
 				size: "xs",
-				value: String(s),
-				onChange: g("autoplay")
+				value: String(c),
+				onChange: _("autoplay")
 			}),
-			o === "marquee" && /* @__PURE__ */ t(i, {
+			s === "marquee" && /* @__PURE__ */ n(a, {
 				type: "number",
 				label: "Speed (px per second)",
 				size: "xs",
-				value: String(d),
-				onChange: g("speed")
+				value: String(f),
+				onChange: _("speed")
 			}),
-			/* @__PURE__ */ t(r, {
-				checked: c,
-				onChange: _("pauseOnHover"),
+			/* @__PURE__ */ n(i, {
+				checked: l,
+				onChange: g.checked("pauseOnHover"),
 				label: "Pause on hover",
 				size: "xs"
 			}),
-			o === "slide" && /* @__PURE__ */ t(r, {
-				checked: l,
-				onChange: _("loop"),
+			s === "slide" && /* @__PURE__ */ n(i, {
+				checked: u,
+				onChange: g.checked("loop"),
 				label: "Loop",
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
+			/* @__PURE__ */ n(a, {
 				label: "Row key",
 				size: "xs",
 				placeholder: "id",
-				value: f,
+				value: p,
 				title: "The field of each item that names it, so a slide stays with its item when the items change.",
-				onChange: h("itemKey")
+				onChange: g.text("itemKey")
 			})
 		]
 	});
 };
 //#endregion
-export { o as default };
+export { s as default };

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

@@ -2,7 +2,7 @@ import { CarouselProps } from './Carousel';
 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 CarouselAttributes = AuthorableAttributes<CarouselProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "carousel";
     readonly sourceType: "carousel";
     readonly triggers: {
@@ -74,38 +74,14 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Carousel";
-            readonly type: "carousel";
             readonly description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.";
-            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-images";
         };
         readonly defaultStyle: {
-            readonly name: "Carousel";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -114,18 +90,17 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["carouselTrack"];
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     mode?: import('./CarouselContext').CarouselMode | undefined;
     label?: string | undefined;
     items?: unknown[] | undefined;
     speed?: number | undefined;
     loop?: boolean | undefined;
+    transition?: import('./CarouselContext').CarouselTransition | undefined;
     pauseOnHover?: boolean | undefined;
     autoplay?: number | undefined;
-    transition?: import('./CarouselContext').CarouselTransition | undefined;
     itemKey?: string | undefined;
 }>>;
 export default declaration;

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

@@ -68,37 +68,14 @@ var t = e()({
 		},
 		definition: {
 			label: "Carousel",
-			type: "carousel",
 			description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.",
-			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-images"
 		},
-		defaultStyle: {
-			name: "Carousel",
-			displayMode: "desktop",
-			style: { base: { default: { position: "relative" } } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: { position: "relative" } } } }
 	},
 	initialItems: ["carouselTrack"]
 });