@pie-element/match-list 8.0.3-next.20261007184841 → 8.0.3

package/dist/delivery/answer.js

@@ -1,20 +1,20 @@
-import e, { useRef as t, useState as n } from "react";
-import r from "debug";
-import i from "prop-types";
-import { PlaceHolder as a } from "@pie-lib/drag";
-import { useDraggable as o, useDroppable as s } from "@dnd-kit/core";
-import { color as c, useMathName as l } from "@pie-lib/render-ui";
-import { jsx as u } from "react/jsx-runtime";
-import { styled as d } from "@mui/material/styles";
-import { isEmpty as f } from "@pie-element/shared-lodash";
-import { sanitizeModelHtml as p } from "@pie-element/shared-utils";
+import e, { useState as 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 { isEmpty as u } from "@pie-element/shared-lodash";
+import { sanitizeModelHtml as d } from "@pie-element/shared-utils";
 //#region src/delivery/answer.tsx
-var m = r("pie-elements:match-title:answer"), h = c.v("pie"), g = d("div")(() => ({
+var f = n("pie-elements:match-title:answer"), p = s.v("pie"), m = l("div")(() => ({
 	width: "100%",
 	fontSize: "18px",
 	textAlign: "center",
 	color: "inherit"
-})), _ = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ u(a, {
+})), h = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ c(i, {
 	extraStyles: {
 		display: "flex",
 		padding: "0",
@@ -25,18 +25,18 @@ var m = r("pie-elements:match-title:answer"), h = c.v("pie"), g = d("div")(() =>
 	disabled: n,
 	isOver: t,
 	type: r,
-	children: e !== void 0 && /* @__PURE__ */ u(g, { children: e })
+	children: e !== void 0 && /* @__PURE__ */ c(m, { children: e })
 });
-_.propTypes = {
-	index: i.number,
-	isOver: i.bool,
-	disabled: i.bool,
-	type: i.string
+h.propTypes = {
+	index: r.number,
+	isOver: r.bool,
+	disabled: r.bool,
+	type: r.string
 };
-var v = d("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcome: i }) => ({
-	color: c.text(),
-	backgroundColor: h("background", c.defaults.WHITE),
-	border: `1px solid ${i === "correct" ? c.correct() : i === "incorrect" ? c.incorrect() : c.border()}`,
+var g = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcome: i }) => ({
+	color: s.text(),
+	backgroundColor: p("background", s.defaults.WHITE),
+	border: `1px solid ${i === "correct" ? s.correct() : i === "incorrect" ? s.incorrect() : s.border()}`,
 	cursor: r ? "not-allowed" : "pointer",
 	width: "100%",
 	padding: "10px",
@@ -46,22 +46,22 @@ var v = d("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 	wordBreak: "break-word",
 	opacity: (e || t) && !r ? .5 : n && !r ? .2 : 1,
 	touchAction: "none"
-})), y = (e) => {
-	let { isDragging: t, isSelected: n, isOver: r, title: i, disabled: a, empty: o, outcome: s, guideIndex: c, type: l } = e;
-	return o ? /* @__PURE__ */ u(_, {
-		index: c,
+})), _ = (e) => {
+	let { isDragging: t, isSelected: n, isOver: r, title: i, disabled: a, empty: o, outcome: s, guideIndex: l, type: u } = e;
+	return o ? /* @__PURE__ */ c(h, {
+		index: l,
 		isOver: r,
 		disabled: a,
-		type: l
-	}) : /* @__PURE__ */ u(v, {
+		type: u
+	}) : /* @__PURE__ */ c(g, {
 		isDragging: t,
 		isSelected: n,
 		isOver: r,
 		disabled: a,
 		outcome: s,
-		dangerouslySetInnerHTML: { __html: p(i) }
+		dangerouslySetInnerHTML: { __html: d(i) }
 	});
-}, b = d("div")(({ correct: e, isSelected: t, isDragging: n, theme: r }) => ({
+}, v = l("div")(({ correct: e, isSelected: t, isDragging: n, theme: r }) => ({
 	boxSizing: "border-box",
 	minHeight: 40,
 	minWidth: "200px",
@@ -70,19 +70,19 @@ var v = d("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 	padding: "0px",
 	textAlign: "center",
 	height: "initial",
-	border: e === !0 ? `1px solid ${c.correct()}` : e === !1 ? `1px solid ${c.incorrect()}` : t && !n ? `2px solid ${c.buttonFocusOutline()}` : "none"
-})), x = class extends e.Component {
+	border: e === !0 ? `1px solid ${s.correct()}` : e === !1 ? `1px solid ${s.incorrect()}` : t && !n ? `2px solid ${s.buttonFocusOutline()}` : "none"
+})), y = class extends e.Component {
 	static propTypes = {
-		className: i.string,
-		isDragging: i.bool,
-		isSelected: i.bool,
-		id: i.any,
-		title: i.string,
-		isOver: i.bool,
-		empty: i.bool,
-		type: i.string,
-		disabled: i.bool,
-		correct: i.bool
+		className: r.string,
+		isDragging: r.bool,
+		isSelected: r.bool,
+		id: r.any,
+		title: r.string,
+		isOver: r.bool,
+		empty: r.bool,
+		type: r.string,
+		disabled: r.bool,
+		correct: r.bool
 	};
 	componentDidMount() {
 		this.ref && this.ref.addEventListener("touchstart", this.handleTouchStart, { passive: !0 });
@@ -92,18 +92,18 @@ var v = d("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 	}
 	handleTouchStart = (e) => {};
 	render() {
-		let { id: e, title: t, isDragging: n = !1, isSelected: r = !1, className: i, disabled: a, isOver: o = !1, type: s, correct: c } = this.props;
-		return m("[render], props: ", this.props), /* @__PURE__ */ u(b, {
-			correct: c,
+		let { id: e, title: t, isDragging: n = !1, isSelected: r = !1, className: i, disabled: a, isOver: o = !1, type: s, correct: l } = this.props;
+		return f("[render], props: ", this.props), /* @__PURE__ */ c(v, {
+			correct: l,
 			isSelected: r,
 			isDragging: n,
 			className: i,
 			ref: (e) => this.ref = e,
-			children: /* @__PURE__ */ u(y, {
+			children: /* @__PURE__ */ c(_, {
 				title: t,
 				id: e,
 				isOver: o,
-				empty: f(t),
+				empty: u(t),
 				isDragging: n,
 				isSelected: r,
 				disabled: a,
@@ -111,113 +111,107 @@ var v = d("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 			})
 		});
 	}
-}, S = ({ type: e, id: t, promptId: n }) => n == null ? `${e || "answer"}-${t}` : `${e || "answer"}-prompt-${n}`;
-function C(e) {
-	let { id: r, instanceId: i, promptId: a, labelId: c, draggable: d = !0, disabled: f = !1, type: p, selectedAnswer: m, onSelectClick: h, onPlacementClick: g } = e, _ = S({
-		type: p,
-		id: r,
-		promptId: a
-	}), v = a == null ? void 0 : `drop-${a}`, y = {
-		type: p || "answer",
-		id: r,
-		instanceId: i,
+}, b = ({ type: e, id: t, promptId: n }) => n == null ? `${e || "answer"}-${t}` : `${e || "answer"}-prompt-${n}`;
+function x(e) {
+	let { id: n, instanceId: r, promptId: i, labelId: s, draggable: l = !0, disabled: u = !1, type: d, selectedAnswer: f, onSelectClick: p, onPlacementClick: m } = e, h = b({
+		type: d,
+		id: n,
+		promptId: i
+	}), g = i == null ? void 0 : `drop-${i}`, _ = {
+		type: d || "answer",
+		id: n,
+		instanceId: r,
 		value: e.title,
-		promptId: a
-	}, b = v ? {
+		promptId: i
+	}, v = g ? {
 		type: "drop-zone",
-		promptId: a,
-		instanceId: i
-	} : void 0, { attributes: C, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = o({
-		id: _,
-		data: y,
-		disabled: !d || f,
-		attributes: { tabIndex: d && !f ? 0 : -1 }
-	}), k = t(null), A = l(k), j = (e) => {
-		k.current = e, T(e);
-	}, M = s({
-		id: v,
-		data: b,
-		disabled: f || !v
-	}), N = M.setNodeRef, P = M.isOver, [F, I] = n(!1), L = !!m, R = P || L && F && !f, z = !!m && m.type === y.type && m.id === y.id && m.promptId === y.promptId, B = E ? `translate3d(${E.x}px, ${E.y}px, 0)` : void 0;
-	if (v) {
+		promptId: i,
+		instanceId: r
+	} : void 0, { attributes: x, listeners: S, setNodeRef: C, transform: w, transition: T, isDragging: E } = a({
+		id: h,
+		data: _,
+		disabled: !l || u,
+		attributes: { tabIndex: l && !u ? 0 : -1 }
+	}), D = o({
+		id: g,
+		data: v,
+		disabled: u || !g
+	}), O = D.setNodeRef, k = D.isOver, [A, j] = t(!1), M = !!f, N = k || M && A && !u, P = !!f && f.type === _.type && f.id === _.id && f.promptId === _.promptId, F = w ? `translate3d(${w.x}px, ${w.y}px, 0)` : void 0;
+	if (g) {
 		let t = () => {
-			f || (z ? h?.(y) : m ? g?.(b) : d && h?.(y));
-		}, n = !d && !f && L;
-		return /* @__PURE__ */ u("div", {
-			ref: N,
+			u || (P ? p?.(_) : f ? m?.(v) : l && p?.(_));
+		}, n = !l && !u && M;
+		return /* @__PURE__ */ c("div", {
+			ref: O,
 			role: n ? "button" : "group",
-			"aria-labelledby": c,
+			"aria-labelledby": s,
 			tabIndex: n ? 0 : -1,
 			onClick: t,
 			onKeyDown: n ? (e) => {
 				(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), t());
 			} : void 0,
-			onMouseEnter: () => I(!0),
-			onMouseLeave: () => I(!1),
+			onMouseEnter: () => j(!0),
+			onMouseLeave: () => j(!1),
 			style: {
 				flex: 1,
-				opacity: O ? .5 : 1,
-				backgroundColor: O || z || R ? "rgba(0,0,0,0.05)" : "transparent",
-				cursor: L && !f ? "pointer" : void 0
+				opacity: E ? .5 : 1,
+				backgroundColor: E || P || N ? "rgba(0,0,0,0.05)" : "transparent",
+				cursor: M && !u ? "pointer" : void 0
 			},
-			children: /* @__PURE__ */ u("div", {
-				ref: j,
-				...w,
-				...d && !f ? {
-					...C,
-					"aria-label": A
-				} : {},
-				"data-tile-id": `${i}:${_}`,
+			children: /* @__PURE__ */ c("div", {
+				ref: C,
+				...S,
+				...l && !u ? x : {},
+				"data-tile-id": `${r}:${h}`,
 				style: {
-					transform: B,
-					transition: D
+					transform: F,
+					transition: T
 				},
-				children: /* @__PURE__ */ u(x, {
+				children: /* @__PURE__ */ c(y, {
 					...e,
-					isDragging: O,
-					isSelected: z,
-					isOver: R
+					isDragging: E,
+					isSelected: P,
+					isOver: N
 				})
 			})
 		});
 	}
-	let V = (e) => {
-		f || (e.stopPropagation(), h?.(y));
+	let I = (e) => {
+		u || (e.stopPropagation(), p?.(_));
 	};
-	return /* @__PURE__ */ u("div", {
-		ref: j,
-		...w,
-		...C,
-		"aria-label": A,
-		"data-tile-id": `${i}:${_}`,
-		onClick: V,
+	return /* @__PURE__ */ c("div", {
+		ref: C,
+		...S,
+		...x,
+		"data-tile-id": `${r}:${h}`,
+		onClick: I,
 		style: {
-			transform: B,
-			transition: D,
-			cursor: f ? "not-allowed" : "grab",
-			opacity: O ? .5 : 1,
-			touchAction: d && !f ? "none" : "auto"
+			transform: F,
+			transition: T,
+			cursor: u ? "not-allowed" : "grab",
+			opacity: E ? .5 : 1,
+			touchAction: l && !u ? "none" : "auto"
 		},
-		children: /* @__PURE__ */ u(x, {
+		children: /* @__PURE__ */ c(y, {
 			...e,
-			isDragging: O,
-			isSelected: z,
+			isDragging: E,
+			isSelected: P,
 			isOver: !1
 		})
 	});
 }
-C.propTypes = {
-	id: i.any,
-	instanceId: i.string,
-	promptId: i.any,
-	labelId: i.string,
-	title: i.string,
-	draggable: i.bool,
-	disabled: i.bool,
-	type: i.string,
-	selectedAnswer: i.object,
-	onSelectClick: i.func,
-	onPlacementClick: i.func
+x.propTypes = {
+	id: r.any,
+	instanceId: r.string,
+	promptId: r.any,
+	labelId: r.string,
+	title: r.string,
+	draggable: r.bool,
+	disabled: r.bool,
+	type: r.string,
+	selectedAnswer: r.object,
+	onSelectClick: r.func,
+	onPlacementClick: r.func
 };
 //#endregion
-export { x as Answer, S as buildDragId, C as default };
+export { y as Answer, b as buildDragId, x as default };