@pie-element/match-list 7.1.2-next.7 → 7.1.2-next.9

package/dist/delivery/answer-area.js

@@ -93,8 +93,8 @@ var d = 200, f = s("div")({
 				selectedAnswer: s,
 				onSelectClick: l,
 				onPlacementClick: u
-			}, v)
-		] }, v)) });
+			})
+		] }, _)) });
 	}
 };
 //#endregion

package/dist/delivery/answer.d.ts

@@ -26,6 +26,11 @@ export declare class Answer extends React.Component {
     handleTouchStart: any;
     render(): React.JSX.Element;
 }
+export declare const buildDragId: ({ type, id, promptId }: {
+    type: any;
+    id: any;
+    promptId: any;
+}) => string;
 declare function DragAndDropAnswer(props: any): React.JSX.Element;
 declare namespace DragAndDropAnswer {
     var propTypes: {

package/dist/delivery/answer.js

@@ -60,16 +60,16 @@ var m = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 		outcome: s,
 		dangerouslySetInnerHTML: { __html: i }
 	});
-}, g = l("div")(({ correct: e, theme: t }) => ({
+}, g = l("div")(({ correct: e, isSelected: t, isDragging: n, theme: r }) => ({
 	boxSizing: "border-box",
 	minHeight: 40,
 	minWidth: "200px",
 	overflow: "hidden",
-	margin: t.spacing(.5),
+	margin: r.spacing(.5),
 	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"
+	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${s.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${s.incorrect()})` : t && !n ? `2px solid ${s.buttonFocusOutline()}` : "none"
 })), _ = class extends e.Component {
 	static propTypes = {
 		className: r.string,
@@ -94,6 +94,8 @@ var m = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 		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 d("[render], props: ", this.props), /* @__PURE__ */ c(g, {
 			correct: l,
+			isSelected: r,
+			isDragging: n,
 			className: i,
 			ref: (e) => this.ref = e,
 			children: /* @__PURE__ */ c(h, {
@@ -108,89 +110,93 @@ var m = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 			})
 		});
 	}
-};
-function v(e) {
-	let { id: n, instanceId: r, promptId: i, draggable: s = !0, disabled: l = !1, type: u, selectedAnswer: d, onSelectClick: f, onPlacementClick: p } = e, m = `${u || "answer"}-${n}`, h = i == null ? void 0 : `drop-${i}`, g = {
+}, v = ({ type: e, id: t, promptId: n }) => n == null ? `${e || "answer"}-${t}` : `${e || "answer"}-prompt-${n}`;
+function y(e) {
+	let { id: n, instanceId: r, promptId: i, draggable: s = !0, disabled: l = !1, type: u, selectedAnswer: d, onSelectClick: f, onPlacementClick: p } = e, m = v({
+		type: u,
+		id: n,
+		promptId: i
+	}), h = i == null ? void 0 : `drop-${i}`, g = {
 		type: u || "answer",
 		id: n,
 		instanceId: r,
 		value: e.title,
 		promptId: i
-	}, v = h ? {
+	}, y = h ? {
 		type: "drop-zone",
 		promptId: i,
 		instanceId: r
-	} : void 0, { attributes: y, listeners: b, setNodeRef: x, transform: S, transition: C, isDragging: w } = a({
+	} : void 0, { attributes: b, listeners: x, setNodeRef: S, transform: C, transition: w, isDragging: T } = a({
 		id: m,
 		data: g,
 		disabled: !s || l,
 		attributes: { tabIndex: s && !l ? 0 : -1 }
-	}), T = o({
+	}), E = o({
 		id: h,
-		data: v,
+		data: y,
 		disabled: l || !h
-	}), E = T.setNodeRef, D = T.isOver, [O, k] = t(!1), A = !!d, j = D || A && O && !l, M = !!d && d.type === g.type && d.id === g.id && d.promptId === g.promptId, N = S ? `translate3d(${S.x}px, ${S.y}px, 0)` : void 0;
+	}), D = E.setNodeRef, O = E.isOver, [k, A] = t(!1), j = !!d, M = O || j && k && !l, N = !!d && d.type === g.type && d.id === g.id && d.promptId === g.promptId, P = C ? `translate3d(${C.x}px, ${C.y}px, 0)` : void 0;
 	if (h) {
 		let t = () => {
-			l || (M ? f?.(g) : d ? p?.(v) : s && f?.(g));
+			l || (N ? f?.(g) : d ? p?.(y) : s && f?.(g));
 		}, n = !s && !l;
 		return /* @__PURE__ */ c("div", {
-			ref: E,
+			ref: D,
 			role: "button",
 			tabIndex: n ? 0 : -1,
 			onClick: t,
 			onKeyDown: n ? (e) => {
 				(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), t());
 			} : void 0,
-			onMouseEnter: () => k(!0),
-			onMouseLeave: () => k(!1),
+			onMouseEnter: () => A(!0),
+			onMouseLeave: () => A(!1),
 			style: {
 				flex: 1,
-				opacity: w || M ? .5 : 1,
-				backgroundColor: w || M || j ? "rgba(0,0,0,0.05)" : "transparent",
-				cursor: A && !l ? "pointer" : void 0
+				opacity: T ? .5 : 1,
+				backgroundColor: T || N || M ? "rgba(0,0,0,0.05)" : "transparent",
+				cursor: j && !l ? "pointer" : void 0
 			},
 			children: /* @__PURE__ */ c("div", {
-				ref: x,
+				ref: S,
+				...x,
 				...b,
-				...y,
 				style: {
-					transform: N,
-					transition: C
+					transform: P,
+					transition: w
 				},
 				children: /* @__PURE__ */ c(_, {
 					...e,
-					isDragging: w,
-					isSelected: M,
-					isOver: j
+					isDragging: T,
+					isSelected: N,
+					isOver: M
 				})
 			})
 		});
 	}
-	let P = (e) => {
+	let F = (e) => {
 		l || (e.stopPropagation(), f?.(g));
 	};
 	return /* @__PURE__ */ c("div", {
-		ref: x,
+		ref: S,
+		...x,
 		...b,
-		...y,
-		onClick: P,
+		onClick: F,
 		style: {
-			transform: N,
-			transition: C,
+			transform: P,
+			transition: w,
 			cursor: l ? "not-allowed" : "grab",
-			opacity: w || M ? .5 : 1,
+			opacity: T ? .5 : 1,
 			touchAction: s && !l ? "none" : "auto"
 		},
 		children: /* @__PURE__ */ c(_, {
 			...e,
-			isDragging: w,
-			isSelected: M,
+			isDragging: T,
+			isSelected: N,
 			isOver: !1
 		})
 	});
 }
-v.propTypes = {
+y.propTypes = {
 	id: r.any,
 	instanceId: r.string,
 	promptId: r.any,
@@ -203,4 +209,4 @@ v.propTypes = {
 	onPlacementClick: r.func
 };
 //#endregion
-export { _ as Answer, v as default };
+export { _ as Answer, v as buildDragId, y as default };

package/dist/delivery/keyboard-coordinates.js

@@ -27,19 +27,19 @@ var t = 25, n = (n, { active: i, context: a, currentCoordinates: o }) => {
 	let p = i?.data?.current, m = p?.promptId == null ? void 0 : `drop-${p.promptId}`, h = [];
 	for (let [e, t] of d) {
 		if (t?.disabled || e === m) continue;
-		let n = u.get(e);
+		let n = t?.node?.current?.getBoundingClientRect() ?? u.get(e);
 		if (!n) continue;
 		let r = {
 			x: n.left + n.width / 2,
 			y: n.top + n.height / 2
-		}, i = {
+		}, i = f?.height ?? 0, a = {
 			x: n.left,
-			y: n.top + n.height / 2
+			y: n.top + n.height / 2 - i / 2
 		};
 		h.push({
 			id: e,
 			rect: n,
-			dropPosition: i,
+			dropPosition: a,
 			center: r
 		});
 	}

package/dist/delivery/main.js

@@ -98,13 +98,10 @@ var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "
 			if (e.type === "choice" && i !== void 0) {
 				let e = S(n.value, (e) => e === s);
 				e && !a ? n.value = o(n.value, e, i) : n.value[i] = s;
-			} else if (e.type === "target" && c != null && c !== i) {
-				let e = n.value[i] != null;
-				if (e && !a) {
-					let e = n.value[i];
-					n.value[i] = s, n.value[c] = e;
-				} else e || (n.value[i] = s, delete n.value[c]);
-			}
+			} else if (e.type === "target" && c != null && c !== i) if (n.value[i] != null && !a) {
+				let e = n.value[i];
+				n.value[i] = s, n.value[c] = e;
+			} else n.value[i] = s, delete n.value[c];
 			r(n);
 		}
 	};