@pie-element/placement-ordering 15.0.2-next.20261007003844 → 15.0.2

package/dist/delivery/placement-ordering.js

@@ -16,18 +16,19 @@ import { jsx as w, jsxs as T } from "react/jsx-runtime";
 import E from "@pie-lib/translator";
 import D from "@pie-lib/correct-answer-toggle";
 import { DragProvider as O, createDragCollision as k } from "@pie-lib/drag";
+import { sanitizeModelHtml as A } from "@pie-element/shared-utils";
 //#region src/delivery/placement-ordering.tsx
-function A(e) {
+function j(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function j(e, t) {
-	return !e || A(e) ? e : A(e.default) ? e.default : t && A(e[t]) ? e[t] : t && A(e[t]?.default) ? e[t].default : e;
+function M(e, t) {
+	return !e || j(e) ? e : j(e.default) ? e.default : t && j(e[t]) ? e[t] : t && j(e[t]?.default) ? e[t].default : e;
 }
-var M = j(y, "UiLayout") || j(R.UiLayout, "UiLayout"), N = j(v, "PreviewPrompt") || j(R.PreviewPrompt, "PreviewPrompt"), P = j(_, "Feedback") || j(R.Feedback, "Feedback"), F = j(g, "Collapsible") || j(R.Collapsible, "Collapsible"), I = h, L = I.default, R = L && typeof L == "object" ? L : I, z = 250, B = (e, t) => {
+var N = M(y, "UiLayout") || M(z.UiLayout, "UiLayout"), P = M(v, "PreviewPrompt") || M(z.PreviewPrompt, "PreviewPrompt"), F = M(_, "Feedback") || M(z.Feedback, "Feedback"), I = M(g, "Collapsible") || M(z.Collapsible, "Collapsible"), L = h, R = L.default, z = R && typeof R == "object" ? R : L, B = 250, V = (e, t) => {
 	if (!e || !t) return !1;
 	let n = t.left + t.width / 2, r = t.top + t.height / 2;
 	return n >= e.left && n <= e.right && r >= e.top && r <= e.bottom;
-}, V = (e, t, n) => {
+}, ee = (e, t, n) => {
 	let { initial: r, translated: i } = e || {};
 	if (!r || !t || typeof n?.clientX != "number") return i;
 	let a = t.x - n.clientX, o = t.y - n.clientY;
@@ -62,7 +63,7 @@ var M = j(y, "UiLayout") || j(R.UiLayout, "UiLayout"), N = j(v, "PreviewPrompt")
 	display: "flex",
 	justifyContent: "center",
 	minWidth: "min-content"
-}), J = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), Y = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), X = p(D)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), Z = p(F)(({ theme: e }) => ({
+}), J = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), Y = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), X = p(D)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), Z = p(I)(({ theme: e }) => ({
 	marginBottom: e.spacing(2),
 	alignSelf: "flex-start"
 })), Q = (e) => {
@@ -176,7 +177,7 @@ var $ = class extends o.Component {
 			}
 			e && r && (this.onDropChoice(r, e, i), this.focusTile(this.getDestinationSlotId(r)));
 		} else if (!t && n) {
-			let e = n.data.current, t = n.rect?.current, a = V(t, this.dragCollision.lastPointer(), r), o = B(t?.initial, a);
+			let e = n.data.current, t = n.rect?.current, a = ee(t, this.dragCollision.lastPointer(), r), o = V(t?.initial, a);
 			e && e.type === "target" && !o && (this.onRemoveChoice(e, i), this.focusTile(this.getDestinationSlotId({
 				type: "choice",
 				id: e.id
@@ -223,7 +224,7 @@ var $ = class extends o.Component {
 			});
 		});
 	};
-	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < z;
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < B;
 	onChoiceClick = (e) => {
 		this.isClickSoonAfterDragEnd() || this.toggleChoiceSelection(e);
 	};
@@ -234,7 +235,7 @@ var $ = class extends o.Component {
 		let { model: n } = this.props, { correctResponse: r, correctness: i, extraCSSRules: a, prompt: o, rationale: s, feedback: c, config: l, note: u, showNote: d, env: f, disabled: p, teacherInstructions: h, language: g } = n, _ = r && r.length > 0, { showingCorrect: v } = this.state, y = l || {
 			orientation: "vertical",
 			includeTargets: !0
-		}, { orientation: x, includeTargets: E } = y, D = x === "vertical", k = this.createOrdering(), { mode: A, role: j } = f || {}, F = D ? t : e, I = (v || A === "view" && j === "instructor") && d && u, L = s && (C(s) || S(s)), R = h && (C(h) || S(h)), z = {
+		}, { orientation: x, includeTargets: E } = y, D = x === "vertical", k = this.createOrdering(), { mode: j, role: M } = f || {}, I = D ? t : e, L = (v || j === "view" && M === "instructor") && d && u, R = s && (C(s) || S(s)), z = h && (C(h) || S(h)), B = {
 			color: b.text(),
 			backgroundColor: b.background(),
 			display: "flex",
@@ -242,7 +243,7 @@ var $ = class extends o.Component {
 			alignItems: "center",
 			boxSizing: "border-box",
 			width: "100%"
-		}, B = E ? {
+		}, V = E ? {
 			selectedChoice: this.state.selectedChoice,
 			onChoiceClick: this.onChoiceClick,
 			onPlacementClick: this.onPlacementClick
@@ -254,19 +255,19 @@ var $ = class extends o.Component {
 			collisionDetection: this.dragCollision.collisionDetection,
 			modifiers: [m],
 			...H(E),
-			children: /* @__PURE__ */ w(G, { children: /* @__PURE__ */ T(M, {
+			children: /* @__PURE__ */ w(G, { children: /* @__PURE__ */ T(N, {
 				extraCSSRules: a,
-				style: z,
+				style: B,
 				children: [
-					R && /* @__PURE__ */ w(Z, {
+					z && /* @__PURE__ */ w(Z, {
 						labels: {
 							hidden: U.t("common:showTeacherInstructions", { lng: g }),
 							visible: U.t("common:hideTeacherInstructions", { lng: g })
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ w(N, { prompt: h })
+						children: /* @__PURE__ */ w(P, { prompt: h })
 					}),
-					/* @__PURE__ */ w(J, { children: /* @__PURE__ */ w(N, { prompt: o }) }),
+					/* @__PURE__ */ w(J, { children: /* @__PURE__ */ w(P, { prompt: o }) }),
 					/* @__PURE__ */ w(X, {
 						show: _,
 						toggled: v,
@@ -278,24 +279,24 @@ var $ = class extends o.Component {
 						choiceLabel: y.choiceLabel,
 						targetLabel: y.targetLabel,
 						ordering: k,
-						tiler: F,
+						tiler: I,
 						disabled: p,
 						addGuide: y.showOrdering,
 						tileSize: y.tileSize,
 						includeTargets: E,
 						choiceLabelEnabled: n.config && n.config.choiceLabelEnabled,
-						...B
+						...V
 					}) }) }),
-					I && /* @__PURE__ */ w(Y, { dangerouslySetInnerHTML: { __html: u } }),
-					L && /* @__PURE__ */ w(Z, {
+					L && /* @__PURE__ */ w(Y, { dangerouslySetInnerHTML: { __html: A(u) } }),
+					R && /* @__PURE__ */ w(Z, {
 						labels: {
 							hidden: U.t("common:showRationale", { lng: g }),
 							visible: U.t("common:hideRationale", { lng: g })
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ w(N, { prompt: s })
+						children: /* @__PURE__ */ w(P, { prompt: s })
 					}),
-					!v && /* @__PURE__ */ w(P, {
+					!v && /* @__PURE__ */ w(F, {
 						correctness: i,
 						feedback: c
 					})

package/dist/delivery/tile.js

@@ -6,25 +6,26 @@ import { color as i } from "@pie-lib/render-ui";
 import { jsx as a } from "react/jsx-runtime";
 import { PlaceHolder as o } from "@pie-lib/drag";
 import { useDraggable as s, useDroppable as c } from "@dnd-kit/core";
+import { sanitizeModelHtml as l } from "@pie-element/shared-utils";
 //#region src/delivery/tile.tsx
-var l = t("pie-elements:placement-ordering:tile"), u = r("div")(({ theme: e }) => ({
+var u = t("pie-elements:placement-ordering:tile"), d = r("div")(({ theme: e }) => ({
 	width: "100%",
 	fontSize: e.typography.fontSize + 4,
 	textAlign: "center",
 	color: "inherit"
-})), d = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ a(o, {
+})), f = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ a(o, {
 	type: e,
 	isOver: n,
 	disabled: r,
-	children: e === "target" && t !== void 0 && /* @__PURE__ */ a(u, { children: t })
+	children: e === "target" && t !== void 0 && /* @__PURE__ */ a(d, { children: t })
 });
-d.propTypes = {
+f.propTypes = {
 	type: n.string,
 	index: n.number,
 	isOver: n.bool,
 	disabled: n.bool
 };
-var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: a, outcome: o, label: s, type: c }) => ({
+var p = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: a, outcome: o, label: s, type: c }) => ({
 	cursor: a ? "not-allowed" : "grab",
 	width: "100%",
 	height: "100%",
@@ -68,25 +69,25 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 		border: "none",
 		"&:hover": { backgroundColor: "unset" }
 	}
-})), p = (e) => {
-	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: o, label: s, disabled: c, outcome: l, guideIndex: u } = e;
-	return i ? /* @__PURE__ */ a(d, {
+})), m = (e) => {
+	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: o, label: s, disabled: c, outcome: u, guideIndex: d } = e;
+	return i ? /* @__PURE__ */ a(f, {
 		type: t,
-		index: u,
+		index: d,
 		isOver: o,
 		disabled: c
-	}) : /* @__PURE__ */ a(f, {
+	}) : /* @__PURE__ */ a(p, {
 		type: t,
 		isDragging: n,
 		isSelected: r,
 		isOver: o,
 		disabled: c,
-		outcome: l,
+		outcome: u,
 		label: s,
-		dangerouslySetInnerHTML: { __html: s }
+		dangerouslySetInnerHTML: { __html: l(s) }
 	});
-}, m = (t) => {
-	let { label: n, type: r, id: i, empty: o, disabled: u, outcome: d, index: f, guideIndex: m, instanceId: h, draggable: g, tileIndex: _, selectedChoice: v, onChoiceClick: y, onPlacementClick: b } = t, x = `tile-${r}-${i ?? "empty"}-${_}-${h}`, S = `drop-${r}-${i ?? "empty"}-${_}-${h}`, C = {
+}, h = (t) => {
+	let { label: n, type: r, id: i, empty: o, disabled: l, outcome: d, index: f, guideIndex: p, instanceId: h, draggable: g, tileIndex: _, selectedChoice: v, onChoiceClick: y, onPlacementClick: b } = t, x = `tile-${r}-${i ?? "empty"}-${_}-${h}`, S = `drop-${r}-${i ?? "empty"}-${_}-${h}`, C = {
 		id: i,
 		type: r,
 		instanceId: h,
@@ -95,14 +96,14 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 	}, { attributes: w, listeners: T, setNodeRef: E, transform: D, isDragging: O } = s({
 		id: x,
 		data: C,
-		disabled: !g || u
+		disabled: !g || l
 	}), { setNodeRef: k, isOver: A } = c({
 		id: S,
 		data: C,
 		disabled: O
-	}), j = !!v && v.type === C.type && v.id === C.id && v.index === C.index, [M, N] = e.useState(!1), P = !!v && !u, F = A || r === "target" && P && M, I = () => {
-		u || (r === "choice" ? v?.type === "target" ? b?.(C) : g && y?.(C) : r === "target" && (j ? y?.(C) : v ? b?.(C) : g && y?.(C)));
-	}, L = !(g && !u) && !u && P, R = (e) => {
+	}), j = !!v && v.type === C.type && v.id === C.id && v.index === C.index, [M, N] = e.useState(!1), P = !!v && !l, F = A || r === "target" && P && M, I = () => {
+		l || (r === "choice" ? v?.type === "target" ? b?.(C) : g && y?.(C) : r === "target" && (j ? y?.(C) : v ? b?.(C) : g && y?.(C)));
+	}, L = !(g && !l) && !l && P, R = (e) => {
 		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), I());
 	}, z = e.useRef(null);
 	e.useEffect(() => {
@@ -116,7 +117,7 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 	let B = (e) => {
 		z.current = e, E(e), k(e);
 	};
-	l("[render], props: ", t);
+	u("[render], props: ", t);
 	let V = r === "target" ? `target-${f}` : r === "choice" ? `choice-${i}` : null, H = V ? `${h}:${V}` : void 0;
 	return /* @__PURE__ */ a("div", {
 		ref: B,
@@ -128,7 +129,7 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 			margin: 0,
 			textAlign: "center",
 			pointerEvents: "auto",
-			cursor: u ? "not-allowed" : r === "target" && P ? "pointer" : O ? "grabbing" : "grab",
+			cursor: l ? "not-allowed" : r === "target" && P ? "pointer" : O ? "grabbing" : "grab",
 			zIndex: O ? 1e3 : "auto",
 			willChange: O ? "transform" : "auto"
 		},
@@ -139,26 +140,26 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 		onMouseEnter: () => N(!0),
 		onMouseLeave: () => N(!1),
 		"data-tile-id": H,
-		...g && !u ? {
+		...g && !l ? {
 			...T,
 			...w
 		} : {},
-		children: /* @__PURE__ */ a(p, {
+		children: /* @__PURE__ */ a(m, {
 			label: n,
 			id: i,
 			empty: o,
 			index: f,
-			guideIndex: m,
+			guideIndex: p,
 			isOver: F,
 			isDragging: O,
 			isSelected: j,
-			disabled: u,
+			disabled: l,
 			outcome: d,
 			type: r
 		})
 	});
 };
-m.propTypes = {
+h.propTypes = {
 	id: n.any,
 	label: n.string,
 	isOver: n.bool,
@@ -176,4 +177,4 @@ m.propTypes = {
 	onPlacementClick: n.func
 };
 //#endregion
-export { m as Tile, m as default };
+export { h as Tile, h as default };

package/dist/delivery/tiler.js

@@ -3,8 +3,9 @@ import t, { createElement as n } from "react";
 import r from "prop-types";
 import { styled as i } from "@mui/material/styles";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { sanitizeModelHtml as s } from "@pie-element/shared-utils";
 //#region src/delivery/tiler.tsx
-var s = {
+var c = {
 	choiceLabel: r.string,
 	targetLabel: r.string,
 	disabled: r.bool,
@@ -14,11 +15,11 @@ var s = {
 	selectedChoice: r.object,
 	onChoiceClick: r.func,
 	onPlacementClick: r.func
-}, c = {
+}, l = {
 	tileSize: "1fr",
 	disabled: !1,
 	addGuide: !1
-}, l = (t) => {
+}, u = (t) => {
 	let r = (r, i) => (r.instanceId = t.instanceId, r.disabled = t.disabled, r.guideIndex = t.addGuide ? r.index + 1 : void 0, r.tileIndex = i, r.selectedChoice = t.selectedChoice, r.onChoiceClick = t.onChoiceClick, r.onPlacementClick = t.onPlacementClick, t.includeTargets || r.type === "choice" ? /* @__PURE__ */ n(e, {
 		...r,
 		key: i
@@ -27,66 +28,66 @@ var s = {
 		label: "",
 		key: i
 	}));
-	return r.propTypes = { ...s }, r;
-}, u = i("div")(({ theme: e, includeTargets: t }) => ({
+	return r.propTypes = { ...c }, r;
+}, d = i("div")(({ theme: e, includeTargets: t }) => ({
 	display: "grid",
 	paddingBottom: e.spacing(2),
 	...t && { gridGap: "10px" }
-})), d = i("div")({ textAlign: "center" }), f = i("div")({
+})), f = i("div")({ textAlign: "center" }), p = i("div")({
 	textAlign: "center",
 	gridRow: "3/4"
-}), p = i("div")(({ includeTargets: e }) => ({
+}), m = i("div")(({ includeTargets: e }) => ({
 	gridAutoFlow: "column",
 	display: "grid",
 	...e && { gridGap: "10px" }
-})), m = i("div")({
+})), h = i("div")({
 	gridColumn: "1/2",
 	textAlign: "center"
-}), h = i("div")({
+}), g = i("div")({
 	gridColumn: "2/3",
 	textAlign: "center"
-}), g = class extends t.Component {
-	static propTypes = { ...s };
-	static defaultProps = { ...c };
+}), _ = class extends t.Component {
+	static propTypes = { ...c };
+	static defaultProps = { ...l };
 	render() {
-		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: s } = this.props, c = e ? `auto ${s} auto ${s}` : `auto ${s} auto`, p = e ? i.length / 2 : i.length, m = {
-			gridTemplateColumns: e ? `repeat(${p}, ${s})` : `auto repeat(${Math.floor(p / 2) - 1}, ${s} 10px) ${s} auto`,
-			gridTemplateRows: c
-		}, h = { gridColumn: `1/${p + 1}` };
-		return /* @__PURE__ */ o(u, {
+		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: c } = this.props, l = e ? `auto ${c} auto ${c}` : `auto ${c} auto`, m = e ? i.length / 2 : i.length, h = {
+			gridTemplateColumns: e ? `repeat(${m}, ${c})` : `auto repeat(${Math.floor(m / 2) - 1}, ${c} 10px) ${c} auto`,
+			gridTemplateRows: l
+		}, g = { gridColumn: `1/${m + 1}` };
+		return /* @__PURE__ */ o(d, {
 			includeTargets: e,
-			style: m,
+			style: h,
 			children: [
-				/* @__PURE__ */ a(d, {
-					style: h,
-					dangerouslySetInnerHTML: { __html: t ? n : "" }
+				/* @__PURE__ */ a(f, {
+					style: g,
+					dangerouslySetInnerHTML: { __html: s(t ? n : "") }
 				}),
-				e && /* @__PURE__ */ a(f, {
-					style: h,
-					dangerouslySetInnerHTML: { __html: r }
+				e && /* @__PURE__ */ a(p, {
+					style: g,
+					dangerouslySetInnerHTML: { __html: s(r) }
 				}),
-				i.map(l(this.props))
+				i.map(u(this.props))
 			]
 		});
 	}
-}, _ = class extends t.Component {
-	static propTypes = { ...s };
-	static defaultProps = { ...c };
+}, v = class extends t.Component {
+	static propTypes = { ...c };
+	static defaultProps = { ...l };
 	render() {
-		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: s } = this.props, c = e ? 2 : 1, u = e ? i.length / 2 : i.length;
-		return /* @__PURE__ */ o(p, {
+		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: c } = this.props, l = e ? 2 : 1, d = e ? i.length / 2 : i.length;
+		return /* @__PURE__ */ o(m, {
 			includeTargets: e,
 			style: {
-				gridTemplateColumns: `repeat(${c}, ${s})`,
-				gridTemplateRows: e ? `auto repeat(${u}, ${s})` : `auto auto repeat(${Math.floor(u / 2) - 1}, ${s} 10px) ${s} auto`
+				gridTemplateColumns: `repeat(${l}, ${c})`,
+				gridTemplateRows: e ? `auto repeat(${d}, ${c})` : `auto auto repeat(${Math.floor(d / 2) - 1}, ${c} 10px) ${c} auto`
 			},
 			children: [
-				/* @__PURE__ */ a(m, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
-				e && /* @__PURE__ */ a(h, { dangerouslySetInnerHTML: { __html: r } }),
-				i.map(l(this.props))
+				/* @__PURE__ */ a(h, { dangerouslySetInnerHTML: { __html: s(t ? n : "") } }),
+				e && /* @__PURE__ */ a(g, { dangerouslySetInnerHTML: { __html: s(r) } }),
+				i.map(u(this.props))
 			]
 		});
 	}
 };
 //#endregion
-export { g as HorizontalTiler, _ as VerticalTiler };
+export { _ as HorizontalTiler, v as VerticalTiler };