@pie-element/match-list 7.1.2-next.0 → 7.1.2-next.1

package/dist/delivery/answer.js

@@ -1,19 +1,19 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
-import t from "react";
-import n from "debug";
-import r from "prop-types";
-import { PlaceHolder as i } from "@pie-lib/drag";
-import { useDraggable as a, useDroppable as o } from "@dnd-kit/core";
-import { color as s } from "@pie-lib/render-ui";
-import { jsx as c } from "react/jsx-runtime";
-import { styled as l } from "@mui/material/styles";
+import e from "react";
+import t from "debug";
+import n from "prop-types";
+import { PlaceHolder as r } from "@pie-lib/drag";
+import { useDraggable as i, useDroppable as a } from "@dnd-kit/core";
+import { color as o } from "@pie-lib/render-ui";
+import { jsx as s } from "react/jsx-runtime";
+import { styled as c } from "@mui/material/styles";
+import { isEmpty as l } from "@pie-element/shared-lodash";
 //#region src/delivery/answer.tsx
-var u = n("pie-elements:match-title:answer"), d = l("div")(({ theme: e }) => ({
+var u = t("pie-elements:match-title:answer"), d = c("div")(({ theme: e }) => ({
 	width: "100%",
 	fontSize: "18px",
 	textAlign: "center",
 	color: `rgba(${e.palette.common.black}, 0.6)`
-})), f = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ c(i, {
+})), f = ({ index: e, isOver: t, disabled: n, type: i }) => /* @__PURE__ */ s(r, {
 	extraStyles: {
 		display: "flex",
 		padding: "0",
@@ -23,19 +23,19 @@ var u = n("pie-elements:match-title:answer"), d = l("div")(({ theme: e }) => ({
 	},
 	disabled: n,
 	isOver: t,
-	type: r,
-	children: e !== void 0 && /* @__PURE__ */ c(d, { children: e })
+	type: i,
+	children: e !== void 0 && /* @__PURE__ */ s(d, { children: e })
 });
 f.propTypes = {
-	index: r.number,
-	isOver: r.bool,
-	disabled: r.bool,
-	type: r.string
+	index: n.number,
+	isOver: n.bool,
+	disabled: n.bool,
+	type: n.string
 };
-var p = l("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i }) => ({
-	color: s.text(),
-	backgroundColor: s.white(),
-	border: `1px solid ${i === "correct" ? s.correct() : i === "incorrect" ? s.incorrect() : e.palette.grey[400]}`,
+var p = c("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i }) => ({
+	color: o.text(),
+	backgroundColor: o.white(),
+	border: `1px solid ${i === "correct" ? o.correct() : i === "incorrect" ? o.incorrect() : e.palette.grey[400]}`,
 	cursor: r ? "not-allowed" : "pointer",
 	width: "100%",
 	padding: "10px",
@@ -46,20 +46,20 @@ var p = l("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i
 	opacity: t && !r ? .5 : n && !r ? .2 : 1,
 	touchAction: "none"
 })), m = (e) => {
-	let { isDragging: t, isOver: n, title: r, disabled: i, empty: a, outcome: o, guideIndex: s, type: l } = e;
-	return a ? /* @__PURE__ */ c(f, {
-		index: s,
+	let { isDragging: t, isOver: n, title: r, disabled: i, empty: a, outcome: o, guideIndex: c, type: l } = e;
+	return a ? /* @__PURE__ */ s(f, {
+		index: c,
 		isOver: n,
 		disabled: i,
 		type: l
-	}) : /* @__PURE__ */ c(p, {
+	}) : /* @__PURE__ */ s(p, {
 		isDragging: t,
 		isOver: n,
 		disabled: i,
 		outcome: o,
 		dangerouslySetInnerHTML: { __html: r }
 	});
-}, h = l("div")(({ correct: e, theme: t }) => ({
+}, h = c("div")(({ correct: e, theme: t }) => ({
 	boxSizing: "border-box",
 	minHeight: 40,
 	minWidth: "200px",
@@ -68,18 +68,18 @@ var p = l("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i
 	padding: "0px",
 	textAlign: "center",
 	height: "initial",
-	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${s.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${s.incorrect()})` : "none"
-})), g = class extends t.Component {
+	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${o.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${o.incorrect()})` : "none"
+})), g = class extends e.Component {
 	static propTypes = {
-		className: r.string,
-		isDragging: r.bool,
-		id: r.any,
-		title: r.string,
-		isOver: r.bool,
-		empty: r.bool,
-		type: r.string,
-		disabled: r.bool,
-		correct: r.bool
+		className: n.string,
+		isDragging: n.bool,
+		id: n.any,
+		title: n.string,
+		isOver: n.bool,
+		empty: n.bool,
+		type: n.string,
+		disabled: n.bool,
+		correct: n.bool
 	};
 	componentDidMount() {
 		this.ref && this.ref.addEventListener("touchstart", this.handleTouchStart, { passive: !0 });
@@ -89,25 +89,25 @@ var p = l("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i
 	}
 	handleTouchStart = (e) => {};
 	render() {
-		let { id: t, title: n, isDragging: r = !1, className: i, disabled: a, isOver: o = !1, type: s, correct: l } = this.props;
-		return u("[render], props: ", this.props), /* @__PURE__ */ c(h, {
-			correct: l,
-			className: i,
+		let { id: e, title: t, isDragging: n = !1, className: r, disabled: i, isOver: a = !1, type: o, correct: c } = this.props;
+		return u("[render], props: ", this.props), /* @__PURE__ */ s(h, {
+			correct: c,
+			className: r,
 			ref: (e) => this.ref = e,
-			children: /* @__PURE__ */ c(m, {
-				title: n,
-				id: t,
-				isOver: o,
-				empty: e(n),
-				isDragging: r,
-				disabled: a,
-				type: s
+			children: /* @__PURE__ */ s(m, {
+				title: t,
+				id: e,
+				isOver: a,
+				empty: l(t),
+				isDragging: n,
+				disabled: i,
+				type: o
 			})
 		});
 	}
 };
 function _(e) {
-	let { id: t, instanceId: n, promptId: r, draggable: i = !0, disabled: s = !1, type: l } = e, u = `${l || "answer"}-${t}`, d = r == null ? void 0 : `drop-${r}`, { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: _, isDragging: v } = a({
+	let { id: t, instanceId: n, promptId: r, draggable: o = !0, disabled: c = !1, type: l } = e, u = `${l || "answer"}-${t}`, d = r == null ? void 0 : `drop-${r}`, { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: _, isDragging: v } = i({
 		id: u,
 		data: {
 			type: l || "answer",
@@ -116,17 +116,17 @@ function _(e) {
 			value: e.title,
 			promptId: r
 		},
-		disabled: !i || s
-	}), y = o({
+		disabled: !o || c
+	}), y = a({
 		id: d,
 		data: d ? {
 			type: "drop-zone",
 			promptId: r,
 			instanceId: n
 		} : void 0,
-		disabled: s || !d
+		disabled: c || !d
 	}), b = y.setNodeRef, x = y.isOver, S = h ? `translate3d(${h.x}px, ${h.y}px, 0)` : void 0;
-	return d ? /* @__PURE__ */ c("div", {
+	return d ? /* @__PURE__ */ s("div", {
 		ref: b,
 		style: {
 			flex: 1,
@@ -135,28 +135,28 @@ function _(e) {
 			opacity: v ? .5 : 1,
 			backgroundColor: x ? "rgba(0,0,0,0.05)" : "transparent"
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ s("div", {
 			ref: m,
 			...p,
 			...f,
-			children: /* @__PURE__ */ c(g, {
+			children: /* @__PURE__ */ s(g, {
 				...e,
 				isDragging: v,
 				isOver: x
 			})
 		})
-	}) : /* @__PURE__ */ c("div", {
+	}) : /* @__PURE__ */ s("div", {
 		ref: m,
 		...p,
 		...f,
 		style: {
 			transform: S,
 			transition: _,
-			cursor: s ? "not-allowed" : "grab",
+			cursor: c ? "not-allowed" : "grab",
 			opacity: v ? .5 : 1,
-			touchAction: i && !s ? "none" : "auto"
+			touchAction: o && !c ? "none" : "auto"
 		},
-		children: /* @__PURE__ */ c(g, {
+		children: /* @__PURE__ */ s(g, {
 			...e,
 			isDragging: v,
 			isOver: !1
@@ -164,13 +164,13 @@ function _(e) {
 	});
 }
 _.propTypes = {
-	id: r.any,
-	instanceId: r.string,
-	promptId: r.any,
-	title: r.string,
-	draggable: r.bool,
-	disabled: r.bool,
-	type: r.string
+	id: n.any,
+	instanceId: n.string,
+	promptId: n.any,
+	title: n.string,
+	draggable: n.bool,
+	disabled: n.bool,
+	type: n.string
 };
 //#endregion
 export { g as Answer, _ as default };

package/dist/delivery/choices-list.js

@@ -1,35 +1,33 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/find.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
-import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isUndefined.js";
-import r from "./answer.js";
-import i from "./droppable-placeholder.js";
-import a from "react";
-import o from "prop-types";
-import { jsx as s } from "react/jsx-runtime";
-import { styled as c } from "@mui/material/styles";
+import e from "./answer.js";
+import t from "./droppable-placeholder.js";
+import n from "react";
+import r from "prop-types";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import { find as o, isEmpty as s, isUndefined as c } from "@pie-element/shared-lodash";
 //#region src/delivery/choices-list.tsx
-var l = c("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), u = class extends a.Component {
+var l = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), u = class extends n.Component {
 	static propTypes = {
-		session: o.object.isRequired,
-		instanceId: o.string.isRequired,
-		model: o.object.isRequired,
-		disabled: o.bool.isRequired,
-		onRemoveAnswer: o.func
+		session: r.object.isRequired,
+		instanceId: r.string.isRequired,
+		model: r.object.isRequired,
+		disabled: r.bool.isRequired,
+		onRemoveAnswer: r.func
 	};
 	render() {
-		let { model: a, disabled: o, session: c, instanceId: u, onRemoveAnswer: d } = this.props, { config: f } = a, { duplicates: p } = f;
-		return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(i, {
+		let { model: n, disabled: r, session: a, instanceId: u, onRemoveAnswer: d } = this.props, { config: f } = n, { duplicates: p } = f;
+		return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(t, {
 			id: "choices-pool",
-			disabled: o,
+			disabled: r,
 			onRemoveAnswer: d,
-			children: f.answers.filter((r) => p || t(c) || !c.value || n(e(c.value, (e) => e === r.id))).map((e) => /* @__PURE__ */ s(r, {
+			children: f.answers.filter((e) => p || s(a) || !a.value || c(o(a.value, (t) => t === e.id))).map((t) => /* @__PURE__ */ i(e, {
 				instanceId: u,
 				draggable: !0,
-				disabled: o,
-				session: c,
+				disabled: r,
+				session: a,
 				type: "choice",
-				...e
-			}, e.id))
+				...t
+			}, t.id))
 		}) });
 	}
 };

package/dist/delivery/main.js

@@ -1,19 +1,17 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/findKey.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isUndefined.js";
-import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/uniqueId.js";
-import { Answer as r } from "./answer.js";
-import i from "./answer-area.js";
-import a from "./choices-list.js";
-import o from "react";
-import s from "prop-types";
-import { swap as c } from "@pie-lib/drag";
-import { DndContext as l, DragOverlay as u } from "@dnd-kit/core";
-import { restrictToFirstScrollableAncestor as d } from "@dnd-kit/modifiers";
-import f from "@pie-lib/correct-answer-toggle";
-import * as p from "@pie-lib/render-ui";
-import { Feedback as m, PreviewPrompt as h, color as g } from "@pie-lib/render-ui";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { styled as y } from "@mui/material/styles";
+import { Answer as e } from "./answer.js";
+import t from "./answer-area.js";
+import n from "./choices-list.js";
+import r from "react";
+import i from "prop-types";
+import { swap as a } from "@pie-lib/drag";
+import { DndContext as o, DragOverlay as s } from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor as c } from "@dnd-kit/modifiers";
+import l from "@pie-lib/correct-answer-toggle";
+import * as u from "@pie-lib/render-ui";
+import { Feedback as d, PreviewPrompt as f, color as p } from "@pie-lib/render-ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { styled as g } from "@mui/material/styles";
+import { findKey as _, isUndefined as v, uniqueId as y } from "@pie-element/shared-lodash";
 //#region src/delivery/main.tsx
 function b(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
@@ -21,21 +19,21 @@ function b(e) {
 function x(e, t) {
 	return !e || b(e) ? e : b(e.default) ? e.default : t && b(e[t]) ? e[t] : t && b(e[t]?.default) ? e[t].default : e;
 }
-var S = x(h, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(m, "Feedback") || x(E.Feedback, "Feedback"), w = p, T = w.default, E = T && typeof T == "object" ? T : w, D = y("div")({
+var S = x(f, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(d, "Feedback") || x(E.Feedback, "Feedback"), w = u, T = w.default, E = T && typeof T == "object" ? T : w, D = g("div")({
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "center",
-	color: g.text(),
-	backgroundColor: g.background()
-}), O = class extends o.Component {
+	color: p.text(),
+	backgroundColor: p.background()
+}), O = class extends r.Component {
 	static propTypes = {
-		session: s.object.isRequired,
-		onSessionChange: s.func,
-		model: s.object.isRequired,
-		prompt: s.string
+		session: i.object.isRequired,
+		onSessionChange: i.func,
+		model: i.object.isRequired,
+		prompt: i.string
 	};
 	constructor(e) {
-		super(e), this.instanceId = n(), this.state = {
+		super(e), this.instanceId = y(), this.state = {
 			showCorrectAnswer: !1,
 			draggingElement: null
 		};
@@ -61,87 +59,87 @@ var S = x(h, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(m, "
 			} });
 		}
 	};
-	onPlaceAnswer = (n) => {
+	onPlaceAnswer = (e) => {
 		this.setState({ draggingElement: null });
-		let { active: r, over: i } = n;
+		let { active: t, over: n } = e;
+		if (!t) return;
+		let r = t.data.current, i = n?.data.current;
 		if (!r) return;
-		let a = r.data.current, o = i?.data.current;
-		if (!a) return;
-		let { session: s, onSessionChange: l, model: u } = this.props, { config: { duplicates: d } } = u;
-		if (t(s.value) && (s.value = {}), o.type === "choices-pool" && a.promptId !== void 0) {
-			s.value[a.promptId] = void 0, l(s);
+		let { session: o, onSessionChange: s, model: c } = this.props, { config: { duplicates: l } } = c;
+		if (v(o.value) && (o.value = {}), i.type === "choices-pool" && r.promptId !== void 0) {
+			o.value[r.promptId] = void 0, s(o);
 			return;
 		}
-		let f = a.id, p = a.promptId;
-		if (o && o.type === "drop-zone" && o.promptId != null) {
-			let t = o.promptId;
-			if (a.type === "choice" && o.type === "drop-zone" && t !== void 0) {
-				let n = e(s.value, (e) => e === f);
-				n && !d ? s.value = c(s.value, n, t) : s.value[t] = f;
-			} else if (a.type === "target" && p != null && p !== t) {
-				let e = s.value[t] != null;
-				if (e && !d) {
-					let e = s.value[t];
-					s.value[t] = f, s.value[p] = e;
-				} else e || (s.value[t] = f, delete s.value[p]);
+		let u = r.id, d = r.promptId;
+		if (i && i.type === "drop-zone" && i.promptId != null) {
+			let e = i.promptId;
+			if (r.type === "choice" && i.type === "drop-zone" && e !== void 0) {
+				let t = _(o.value, (e) => e === u);
+				t && !l ? o.value = a(o.value, t, e) : o.value[e] = u;
+			} else if (r.type === "target" && d != null && d !== e) {
+				let t = o.value[e] != null;
+				if (t && !l) {
+					let t = o.value[e];
+					o.value[e] = u, o.value[d] = t;
+				} else t || (o.value[e] = u, delete o.value[d]);
 			}
-			l(s);
+			s(o);
 		}
 	};
 	toggleShowCorrect = () => {
 		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
 	};
 	renderDragOverlay = () => {
-		let { draggingElement: e } = this.state;
-		return e ? /* @__PURE__ */ _(r, {
-			id: e.id,
-			title: e.value,
+		let { draggingElement: t } = this.state;
+		return t ? /* @__PURE__ */ m(e, {
+			id: t.id,
+			title: t.value,
 			disabled: !1,
 			isDragging: !1,
-			style: e.rect ? {
-				width: e.rect.width,
-				height: e.rect.height,
+			style: t.rect ? {
+				width: t.rect.width,
+				height: t.rect.height,
 				boxSizing: "border-box"
 			} : {}
 		}) : null;
 	};
 	render() {
-		let { showCorrectAnswer: e } = this.state, { model: t, session: n } = this.props, { config: r, mode: o } = t, { prompt: s, language: c } = r;
-		return /* @__PURE__ */ v(l, {
+		let { showCorrectAnswer: e } = this.state, { model: r, session: i } = this.props, { config: a, mode: u } = r, { prompt: d, language: f } = a;
+		return /* @__PURE__ */ h(o, {
 			onDragStart: this.onDragStart,
 			onDragEnd: this.onPlaceAnswer,
-			modifiers: [d],
-			children: [/* @__PURE__ */ v(D, { children: [
-				/* @__PURE__ */ _(S, {
+			modifiers: [c],
+			children: [/* @__PURE__ */ h(D, { children: [
+				/* @__PURE__ */ m(S, {
 					className: "prompt",
-					prompt: s
+					prompt: d
 				}),
-				/* @__PURE__ */ _(f, {
-					show: o === "evaluate",
+				/* @__PURE__ */ m(l, {
+					show: u === "evaluate",
 					toggled: e,
 					onToggle: this.toggleShowCorrect,
-					language: c
+					language: f
 				}),
-				/* @__PURE__ */ _(i, {
+				/* @__PURE__ */ m(t, {
 					instanceId: this.instanceId,
-					model: t,
-					session: n,
+					model: r,
+					session: i,
 					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
-					disabled: o !== "gather",
+					disabled: u !== "gather",
 					showCorrect: e
 				}),
-				/* @__PURE__ */ _(a, {
+				/* @__PURE__ */ m(n, {
 					instanceId: this.instanceId,
-					model: t,
-					session: n,
-					disabled: o !== "gather",
+					model: r,
+					session: i,
+					disabled: u !== "gather",
 					onRemoveAnswer: (e) => this.onRemoveAnswer(e)
 				}),
-				t.correctness && t.feedback && !e && /* @__PURE__ */ _(C, {
-					correctness: t.correctness.correctness,
-					feedback: t.feedback
+				r.correctness && r.feedback && !e && /* @__PURE__ */ m(C, {
+					correctness: r.correctness.correctness,
+					feedback: r.feedback
 				})
-			] }), /* @__PURE__ */ _(u, { children: this.renderDragOverlay() })]
+			] }), /* @__PURE__ */ m(s, { children: this.renderDragOverlay() })]
 		});
 	}
 };