@plitzi/sdk-elements 0.37.8 → 0.37.10

package/dist/Element/hooks/useRootElementInteractions.mjs

@@ -1,87 +1,108 @@
 import e from "./useElementInteractions.mjs";
 import t from "./useInternalClassName.mjs";
-import n from "./useKeyTriggers.mjs";
-import { interactionBasicTriggers as r, nativeEventsList as i } from "../helpers/elementConstants.mjs";
-import { use as a, useCallback as o, useContext as s, useEffect as c, useMemo as l } from "react";
-import { get as u } from "@plitzi/plitzi-ui/helpers";
-import { StoreContext as d } from "@plitzi/nexus/react";
-import { emptyObject as f } from "@plitzi/sdk-shared/helpers/utils";
-import p from "clsx";
-import { liveSources as m } from "@plitzi/sdk-shared/dataSource";
-import { pConsole as h } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
+import n from "./useIntervalTriggers.mjs";
+import r from "./useKeyTriggers.mjs";
+import i from "./useScrollInteractions.mjs";
+import { interactionBasicTriggers as a, nativeEventsList as o } from "../helpers/elementConstants.mjs";
+import { use as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f } from "react";
+import { get as p } from "@plitzi/plitzi-ui/helpers";
+import { isRecord as m } from "@plitzi/sdk-shared/helpers/isRecord";
+import { StoreContext as h } from "@plitzi/nexus/react";
+import { emptyObject as g } from "@plitzi/sdk-shared/helpers/utils";
+import _ from "clsx";
+import { liveSources as v } from "@plitzi/sdk-shared/dataSource";
+import { pConsole as y } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
 //#region src/Element/hooks/useRootElementInteractions.ts
-var g = (e) => typeof e == "object" && !!e, _ = /* @__PURE__ */ new WeakSet(), v = (e) => "nativeEvent" in e && g(e.nativeEvent) ? e.nativeEvent : e, y = ({ elementContext: y, InteractionsContext: b, previewMode: x, debugMode: S, baseElementId: C, className: w, interactionTriggers: T, interactionCallbacks: E, otherProps: D }) => {
-	let { id: O, className: k, attributes: A, definition: j, definition: { interactions: M }, plitziElementLayout: N, elementState: P, setElementState: F } = y, { interactionsManager: I, useInteractions: L } = a(b), R = o((e, t, n, r, i = !1) => {
+var b = /* @__PURE__ */ new WeakSet(), x = (e) => "nativeEvent" in e && m(e.nativeEvent) ? e.nativeEvent : e, S = ({ elementContext: S, InteractionsContext: C, previewMode: w, debugMode: T, baseElementId: E, className: D, interactionTriggers: O, interactionCallbacks: k, otherProps: A, ref: j }) => {
+	let { id: M, className: N, attributes: P, definition: F, definition: { interactions: I }, plitziElementLayout: L, elementState: R, setElementState: z } = S, { interactionsManager: B, useInteractions: V } = s(C), H = c((e, t, n, r, i = !1) => {
 		i || e.preventDefault(), r && r(e);
-		let a = v(e);
-		_.has(a) || (i || _.add(a), I.interactionTrigger(t, n, { event: e }));
-	}, [I]), z = l(() => !x || !M ? {} : Object.values(M).filter((e) => e.type === "trigger" && e.action && i.includes(e.action) && e.enabled).reduce((e, t) => {
-		let n = u(t, "params.propagateEvent", !1);
+		let a = x(e);
+		b.has(a) || (i || b.add(a), B.interactionTrigger(t, n, { event: e }));
+	}, [B]), U = d(() => !w || !I ? {} : Object.values(I).filter((e) => e.type === "trigger" && e.action && o.includes(e.action) && e.enabled).reduce((e, t) => {
+		let n = p(t, "params.propagateEvent", !1);
 		return {
 			...e,
-			[t.action]: (e) => R(e, O, t.action, D[t.action], n)
+			[t.action]: (e) => H(e, M, t.action, A[t.action], n)
 		};
 	}, {}), [
-		O,
 		M,
-		D,
-		x,
-		R
-	]), B = s(d), V = o(() => {
-		let e = B?.getPath("runtime.sources");
-		return m(g(e) ? e : f, B?.getPath("runtime.state"), B?.getPath("schema.settings.computed"));
-	}, [B]), H = o(() => ({ dataSource: V() }), [V]), U = l(() => ({
-		...r,
-		...T
-	}), [T]), W = e({
-		attributes: A,
-		definition: j,
-		setElementState: F
+		I,
+		A,
+		w,
+		H
+	]), W = l(h), G = c(() => {
+		let e = W?.getPath("runtime.sources");
+		return v(m(e) ? e : g, W?.getPath("runtime.state"), W?.getPath("schema.settings.computed"));
+	}, [W]), K = c(() => ({ dataSource: G() }), [G]), q = d(() => ({
+		...a,
+		...O
+	}), [O]), J = f(null), Y = j ?? J, X = e({
+		attributes: P,
+		definition: F,
+		setElementState: z
+	}), Z = i({
+		id: M,
+		label: F.label,
+		nodeRef: Y,
+		interactions: I,
+		previewMode: w,
+		interactionsManager: B
 	});
-	L({
-		id: O,
-		interactions: M,
-		triggers: U,
-		callbacks: l(() => ({
-			...E,
-			...W
-		}), [E, W]),
-		getAdditionalParams: H
+	V({
+		id: M,
+		interactions: I,
+		triggers: q,
+		callbacks: d(() => ({
+			...k,
+			...Z,
+			...X
+		}), [
+			k,
+			Z,
+			X
+		]),
+		getAdditionalParams: K
+	}), r({
+		id: M,
+		interactions: I,
+		previewMode: w,
+		interactionsManager: B
 	}), n({
-		id: O,
-		interactions: M,
-		previewMode: x,
-		interactionsManager: I
-	}), c(() => {
-		if (!x || !M || !Object.keys(M).length) return;
+		id: M,
+		interactions: I,
+		previewMode: w,
+		interactionsManager: B
+	}), u(() => {
+		if (!w || !I || !Object.keys(I).length) return;
 		let e = !1;
 		return queueMicrotask(() => {
-			e || I.interactionTrigger(O, "onLoad", {});
+			e || B.interactionTrigger(M, "onLoad", {});
 		}), () => {
 			e = !0;
 		};
-	}, []), c(() => {
-		if (S) return h.addProviderMethod(`getElementDataSource-${O}`, V), () => {
-			h.removeProviderMethod(`getElementDataSource-${O}`);
+	}, []), u(() => {
+		if (T) return y.addProviderMethod(`getElementDataSource-${M}`, G), () => {
+			y.removeProviderMethod(`getElementDataSource-${M}`);
 		};
 	}, [
-		S,
-		V,
-		O
+		T,
+		G,
+		M
 	]);
-	let G = t({
-		id: O,
-		className: w,
-		previewMode: x,
-		baseElementId: C,
-		definition: j,
-		elementState: P,
-		plitziElementLayout: N
+	let Q = t({
+		id: M,
+		className: D,
+		previewMode: w,
+		baseElementId: E,
+		definition: F,
+		elementState: R,
+		plitziElementLayout: L
 	});
 	return {
-		className: p(k, G),
-		events: z
+		className: _(N, Q),
+		events: U,
+		nodeRef: Y
 	};
 };
 //#endregion
-export { y as default };
+export { S as default };

package/dist/Element/hooks/useScrollInteractions.d.ts

@@ -0,0 +1,20 @@
+import { InteractionsManager } from '@plitzi/sdk-interactions';
+import { ElementInteraction, InteractionCallback } from '@plitzi/sdk-shared';
+import { RefObject } from 'react';
+export type UseScrollInteractionsProps = {
+    id: string;
+    label: string;
+    nodeRef: RefObject<HTMLElement | null>;
+    interactions?: Record<string, ElementInteraction>;
+    previewMode: boolean;
+    interactionsManager: InteractionsManager;
+};
+/**
+ * The element's scroll steps, and its `onScroll` trigger.
+ *
+ * The steps move the element's own box — a row of cards with `overflow: auto` — or, `scrollIntoView`, the page to it;
+ * the node is read when a step runs, so one rendered after the flow was wired is still the one moved. `onScroll` fires
+ * at most once a frame, and once on mount so a flow can hide an arrow before anybody has scrolled.
+ */
+declare const useScrollInteractions: ({ id, label, nodeRef, interactions, previewMode, interactionsManager }: UseScrollInteractionsProps) => Record<string, InteractionCallback>;
+export default useScrollInteractions;

package/dist/Element/hooks/useScrollInteractions.mjs

@@ -0,0 +1,58 @@
+import { useEffect as e, useMemo as t } from "react";
+import { toInteractionCallbacks as n } from "@plitzi/sdk-shared/authoring/builder";
+import { SCROLL_CALLBACKS as r } from "@plitzi/sdk-shared/authoring/elementCallbacks";
+import { SCROLL_BEHAVIORS as i, SCROLL_POSITIONS as a, SCROLL_TRIGGER as o, scrollDistance as s, scrollPosition as c, scrollState as l } from "@plitzi/sdk-shared/helpers/scroll";
+//#region src/Element/hooks/useScrollInteractions.ts
+var u = (e) => i.find((t) => t === e) ?? "smooth", d = (e, t) => a.find((t) => t === e) ?? t, f = ({ id: i, label: a, nodeRef: f, interactions: p, previewMode: m, interactionsManager: h }) => {
+	let g = t(() => n(r, {
+		scrollBy: (e) => {
+			let t = f.current;
+			t?.scrollBy({
+				left: s(e.x, t.clientWidth) ?? 0,
+				top: s(e.y, t.clientHeight) ?? 0,
+				behavior: u(e.behavior)
+			});
+		},
+		scrollTo: (e) => {
+			let t = f.current;
+			t && t.scrollTo({
+				left: c(e.x, t.scrollWidth, t.clientWidth) ?? t.scrollLeft,
+				top: c(e.y, t.scrollHeight, t.clientHeight) ?? t.scrollTop,
+				behavior: u(e.behavior)
+			});
+		},
+		scrollIntoView: (e) => {
+			f.current?.scrollIntoView({
+				block: d(e.block, "start"),
+				inline: d(e.inline, "nearest"),
+				behavior: u(e.behavior)
+			});
+		}
+	}, {
+		scrollBy: { title: `Scroll ${a} by` },
+		scrollTo: { title: `Scroll ${a} to` },
+		scrollIntoView: { title: `Scroll to ${a}` }
+	}), [a, f]), _ = t(() => Object.values(p ?? {}).some((e) => e.type === "trigger" && e.action === o && e.enabled), [p]);
+	return e(() => {
+		let e = f.current;
+		if (!m || !_ || !e || typeof window > "u") return;
+		let t = 0, n = () => {
+			t = 0;
+			let n = l(e);
+			h.interactionTrigger(i, o, n);
+		}, r = () => {
+			t === 0 && (t = window.requestAnimationFrame(n));
+		};
+		return e.addEventListener("scroll", r, { passive: !0 }), t = window.requestAnimationFrame(n), () => {
+			e.removeEventListener("scroll", r), window.cancelAnimationFrame(t);
+		};
+	}, [
+		i,
+		h,
+		_,
+		f,
+		m
+	]), g;
+};
+//#endregion
+export { f as default };

package/dist/components/IconField/IconField.d.ts

@@ -0,0 +1,8 @@
+export type IconFieldProps = {
+    icon: string;
+    iconPlacement: 'before' | 'after';
+    onUpdate?: (key: string, value: string) => void;
+};
+/** A button's or a link's `icon`: which one, which side of the words, and none at all. */
+declare const IconField: ({ icon, iconPlacement, onUpdate }: IconFieldProps) => import('react').JSX.Element;
+export default IconField;

package/dist/components/IconField/IconField.mjs

@@ -0,0 +1,41 @@
+import e from "../IconPicker/IconPicker.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Button";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/components/IconField/IconField.tsx
+var o = ({ icon: o, iconPlacement: s, onUpdate: c }) => {
+	let l = t((e) => c?.("icon", e), [c]), u = t((e) => c?.("iconPlacement", e), [c]), d = t(() => c?.("icon", ""), [c]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex grow basis-0 flex-col gap-4",
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-end gap-2",
+			children: [/* @__PURE__ */ r(a, {
+				value: s,
+				label: "Icon",
+				onChange: u,
+				size: "xs",
+				className: "grow",
+				children: [/* @__PURE__ */ n("option", {
+					value: "before",
+					children: "Before the words"
+				}), /* @__PURE__ */ n("option", {
+					value: "after",
+					children: "After the words"
+				})]
+			}), /* @__PURE__ */ n(i, {
+				size: "xs",
+				intent: "secondary",
+				onClick: d,
+				disabled: !o,
+				title: "No icon",
+				children: /* @__PURE__ */ n(i.Icon, { icon: o || "fa-solid fa-ban" })
+			})]
+		}), /* @__PURE__ */ n(e, {
+			value: o,
+			onChange: l
+		})]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/IconField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './IconField';
+export type { IconFieldProps } from './IconField';

package/dist/components/IconField/index.mjs

@@ -0,0 +1,2 @@
+import e from "./IconField.mjs";
+export { e as default };

package/dist/components/IconPicker/IconPicker.d.ts

@@ -0,0 +1,11 @@
+export type IconPickerProps = {
+    /** The Font Awesome classes chosen, `'fas fa-flag'`. */
+    value: string;
+    onChange: (iconClass: string) => void;
+};
+/**
+ * Font Awesome's catalogue, searchable and filtered by style — the one picker every element that draws an icon offers
+ * (a `fontAwesome`, and a button's or a link's `icon`).
+ */
+declare const IconPicker: ({ value, onChange }: IconPickerProps) => import('react').JSX.Element;
+export default IconPicker;

package/dist/components/IconPicker/IconPicker.mjs

@@ -0,0 +1,82 @@
+import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+import s from "@plitzi/plitzi-ui/Input";
+import c from "@plitzi/plitzi-ui/Select";
+//#region src/components/IconPicker/IconPicker.tsx
+var l = {
+	brands: "fab",
+	regular: "far",
+	solid: "fas"
+}, u = ({ iconClass: t, title: n, selected: r, onPick: a }) => {
+	let s = e(() => a(t), [t, a]);
+	return /* @__PURE__ */ i("div", {
+		className: o("flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-1 hover:bg-blue-200 hover:text-white", { "bg-[#339af0] text-white": r }),
+		onClick: s,
+		title: n,
+		children: /* @__PURE__ */ i("i", { className: t })
+	});
+}, d = ({ value: e, onChange: o }) => {
+	let [d, f] = r({}), [p, m] = r(""), [h, g] = r(!1), [_, v] = r("");
+	t(() => {
+		(async () => {
+			g(!0);
+			let e = await fetch("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/metadata/icons.json");
+			f(await e.json()), g(!1);
+		})();
+	}, []);
+	let y = n(() => Object.entries(d).flatMap(([e, { styles: t, label: n }]) => n.toLowerCase().includes(_.toLowerCase()) ? t.filter((e) => p === "" || e === p).map((t) => ({
+		iconClass: `${l[t] ?? "fa"} fa-${e}`,
+		title: `${n} - [${e}]`
+	})) : []), [
+		d,
+		_,
+		p
+	]);
+	return /* @__PURE__ */ a("div", {
+		className: "flex grow basis-0 flex-col gap-4",
+		children: [
+			/* @__PURE__ */ a(c, {
+				value: p,
+				placeholder: "All",
+				label: "Icon Type",
+				onChange: m,
+				size: "xs",
+				children: [
+					/* @__PURE__ */ i("option", {
+						value: "regular",
+						children: "Regular"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "solid",
+						children: "Solid"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "brands",
+						children: "Brands"
+					})
+				]
+			}),
+			/* @__PURE__ */ i(s, {
+				value: _,
+				placeholder: "Search Icon...",
+				onChange: v,
+				size: "xs"
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex grow basis-0 flex-col overflow-auto py-2",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap items-center justify-center gap-1",
+					children: [h && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !h && y.map((t) => /* @__PURE__ */ i(u, {
+						iconClass: t.iconClass,
+						title: t.title,
+						selected: t.iconClass === e,
+						onPick: o
+					}, t.iconClass))]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/IconPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './IconPicker';
+export type { IconPickerProps } from './IconPicker';

package/dist/components/IconPicker/index.mjs

@@ -0,0 +1,2 @@
+import e from "./IconPicker.mjs";
+export { e as default };