@pie-element/match-list 7.1.2-next.10 → 7.1.2-next.12

package/dist/delivery/answer.js

@@ -139,7 +139,7 @@ function y(e) {
 	if (h) {
 		let t = () => {
 			l || (N ? f?.(g) : d ? p?.(y) : s && f?.(g));
-		}, n = !s && !l;
+		}, n = !s && !l && j;
 		return /* @__PURE__ */ c("div", {
 			ref: D,
 			role: "button",
@@ -160,6 +160,7 @@ function y(e) {
 				ref: S,
 				...x,
 				...b,
+				"data-tile-id": `${r}:${m}`,
 				style: {
 					transform: P,
 					transition: w
@@ -180,6 +181,7 @@ function y(e) {
 		ref: S,
 		...x,
 		...b,
+		"data-tile-id": `${r}:${m}`,
 		onClick: F,
 		style: {
 			transform: P,

package/dist/delivery/main.d.ts

@@ -21,6 +21,8 @@ export declare class Main extends React.Component {
     onDragCancel: any;
     placeAnswer: any;
     onPlaceAnswer: any;
+    getDestinationDragId: any;
+    focusTile: any;
     isSameAnswer: (a: any, b: any) => boolean;
     selectAnswer: any;
     toggleAnswerSelection: any;

package/dist/delivery/main.js

@@ -1,61 +1,61 @@
 import { closestDroppableKeyboardCoordinates as e } from "./keyboard-coordinates.js";
-import { Answer as t } from "./answer.js";
-import { AnswerArea as n } from "./answer-area.js";
-import { ChoicesList as r } from "./choices-list.js";
-import i from "react";
-import a from "prop-types";
-import { swap as o } from "@pie-lib/drag";
-import { DndContext as s, DragOverlay as c, KeyboardCode as l, KeyboardSensor as u, PointerSensor as d, rectIntersection as f } from "@dnd-kit/core";
-import { restrictToFirstScrollableAncestor as p } from "@dnd-kit/modifiers";
-import m from "@pie-lib/correct-answer-toggle";
-import * as h from "@pie-lib/render-ui";
-import { Feedback as g, PreviewPrompt as _, color as v } from "@pie-lib/render-ui";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { styled as x } from "@mui/material/styles";
-import { findKey as S, isUndefined as C, uniqueId as w } from "@pie-element/shared-lodash";
+import { Answer as t, buildDragId as n } from "./answer.js";
+import { AnswerArea as r } from "./answer-area.js";
+import { ChoicesList as i } from "./choices-list.js";
+import a from "react";
+import o from "prop-types";
+import { swap as s } from "@pie-lib/drag";
+import { DndContext as c, DragOverlay as l, KeyboardCode as u, KeyboardSensor as d, PointerSensor as f, rectIntersection as p } from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor as m } from "@dnd-kit/modifiers";
+import h from "@pie-lib/correct-answer-toggle";
+import * as g from "@pie-lib/render-ui";
+import { Feedback as _, PreviewPrompt as v, color as y } from "@pie-lib/render-ui";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { styled as S } from "@mui/material/styles";
+import { findKey as C, isUndefined as w, uniqueId as T } from "@pie-element/shared-lodash";
 //#region src/delivery/main.tsx
-function T(e) {
+function E(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function E(e, t) {
-	return !e || T(e) ? e : T(e.default) ? e.default : t && T(e[t]) ? e[t] : t && T(e[t]?.default) ? e[t].default : e;
+function D(e, t) {
+	return !e || E(e) ? e : E(e.default) ? e.default : t && E(e[t]) ? e[t] : t && E(e[t]?.default) ? e[t].default : e;
 }
-var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "Feedback") || E(j.Feedback, "Feedback"), k = h, A = k.default, j = A && typeof A == "object" ? A : k, M = 250, N = [{
-	sensor: d,
+var O = D(v, "PreviewPrompt") || D(M.PreviewPrompt, "PreviewPrompt"), k = D(_, "Feedback") || D(M.Feedback, "Feedback"), A = g, j = A.default, M = j && typeof j == "object" ? j : A, N = 250, P = [{
+	sensor: f,
 	options: { activationConstraint: { distance: 8 } }
 }, {
-	sensor: u,
+	sensor: d,
 	options: {
 		coordinateGetter: e,
 		keyboardCodes: {
-			start: [l.Space, l.Enter],
-			cancel: [l.Esc],
-			end: [l.Space, l.Enter]
+			start: [u.Space, u.Enter],
+			cancel: [u.Esc],
+			end: [u.Space, u.Enter]
 		}
 	}
-}], P = x("div")({
+}], F = S("div")({
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "center",
-	color: v.text(),
-	backgroundColor: v.background()
-}), F = x("div")({
+	color: y.text(),
+	backgroundColor: y.background()
+}), I = S("div")({
 	width: "100%",
 	overflowX: "auto",
 	overflowY: "hidden"
-}), I = x("div")({
+}), L = S("div")({
 	display: "flex",
 	flexDirection: "column",
 	minWidth: "min-content"
-}), L = class extends i.Component {
+}), R = class extends a.Component {
 	static propTypes = {
-		session: a.object.isRequired,
-		onSessionChange: a.func,
-		model: a.object.isRequired,
-		prompt: a.string
+		session: o.object.isRequired,
+		onSessionChange: o.func,
+		model: o.object.isRequired,
+		prompt: o.string
 	};
 	constructor(e) {
-		super(e), this.instanceId = w(), this.state = {
+		super(e), this.instanceId = T(), this.state = {
 			showCorrectAnswer: !1,
 			draggingElement: null,
 			selectedAnswer: null
@@ -88,20 +88,20 @@ var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "
 	placeAnswer = (e, t) => {
 		if (!e || !t) return;
 		let { session: n, onSessionChange: r, model: i } = this.props, { config: { duplicates: a } } = i;
-		if (C(n.value) && (n.value = {}), t.type === "choices-pool" && e.promptId !== void 0) {
+		if (w(n.value) && (n.value = {}), t.type === "choices-pool" && e.promptId !== void 0) {
 			n.value[e.promptId] = void 0, r(n);
 			return;
 		}
-		let s = e.id, c = e.promptId;
+		let o = e.id, c = e.promptId;
 		if (t.type === "drop-zone" && t.promptId != null) {
 			let i = t.promptId;
 			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;
+				let e = C(n.value, (e) => e === o);
+				e && !a ? n.value = s(n.value, e, i) : n.value[i] = o;
 			} 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];
+				n.value[i] = o, n.value[c] = e;
+			} else n.value[i] = o, delete n.value[c];
 			r(n);
 		}
 	};
@@ -110,7 +110,25 @@ var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "
 		let { active: t, over: n } = e;
 		if (!t) return;
 		let r = t.data.current, i = n?.data.current;
-		r && (this.placeAnswer(r, i), this.cancelSelection(), this.lastDragEndAt = Date.now());
+		if (!r) return;
+		let a = this.getDestinationDragId(r, i);
+		this.placeAnswer(r, i), this.cancelSelection(), this.lastDragEndAt = Date.now(), this.focusTile(a);
+	};
+	getDestinationDragId = (e, t) => !e || !t ? null : t.type === "choices-pool" && e.promptId !== void 0 ? n({
+		type: "choice",
+		id: e.id
+	}) : t.type === "drop-zone" && t.promptId != null ? n({
+		type: "target",
+		promptId: t.promptId
+	}) : null;
+	focusTile = (e) => {
+		if (!e) return;
+		let t = `[data-tile-id="${this.instanceId}:${e}"]`;
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				document.querySelector(t)?.focus();
+			});
+		});
 	};
 	isSameAnswer = (e, t) => !!e && !!t && e.type === t.type && e.id === t.id && e.promptId === t.promptId;
 	selectAnswer = (e) => {
@@ -131,9 +149,11 @@ var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "
 	};
 	placeSelectedAnswer = (e) => {
 		let { selectedAnswer: t } = this.state;
-		t && (this.placeAnswer(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag(), this.lastDragEndAt = Date.now());
+		if (!t) return;
+		let n = this.getDestinationDragId(t, e);
+		this.placeAnswer(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag(), this.lastDragEndAt = Date.now(), this.focusTile(n);
 	};
-	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < M;
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < N;
 	onChoiceClick = (e) => {
 		this.isClickSoonAfterDragEnd() || this.toggleAnswerSelection(e);
 	};
@@ -145,7 +165,7 @@ var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "
 	};
 	renderDragOverlay = () => {
 		let { draggingElement: e } = this.state;
-		return e ? /* @__PURE__ */ y(t, {
+		return e ? /* @__PURE__ */ b(t, {
 			id: e.id,
 			title: e.value,
 			disabled: !1,
@@ -158,53 +178,53 @@ var D = E(_, "PreviewPrompt") || E(j.PreviewPrompt, "PreviewPrompt"), O = E(g, "
 		}) : null;
 	};
 	render() {
-		let { showCorrectAnswer: e } = this.state, { model: t, session: i } = this.props, { config: a, mode: o } = t, { prompt: l, language: u } = a;
-		return /* @__PURE__ */ b(s, {
-			sensors: N,
-			collisionDetection: f,
+		let { showCorrectAnswer: e } = this.state, { model: t, session: n } = this.props, { config: a, mode: o } = t, { prompt: s, language: u } = a;
+		return /* @__PURE__ */ x(c, {
+			sensors: P,
+			collisionDetection: p,
 			onDragStart: this.onDragStart,
 			onDragEnd: this.onPlaceAnswer,
 			onDragCancel: this.onDragCancel,
-			modifiers: [p],
+			modifiers: [m],
 			accessibility: { screenReaderInstructions: { draggable: "Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel. You can also click an answer choice to select it, then click a response area to place it there." } },
-			children: [/* @__PURE__ */ b(P, { children: [
-				/* @__PURE__ */ y(D, {
+			children: [/* @__PURE__ */ x(F, { children: [
+				/* @__PURE__ */ b(O, {
 					className: "prompt",
-					prompt: l
+					prompt: s
 				}),
-				/* @__PURE__ */ y(m, {
+				/* @__PURE__ */ b(h, {
 					show: o === "evaluate",
 					toggled: e,
 					onToggle: this.toggleShowCorrect,
 					language: u
 				}),
-				/* @__PURE__ */ y(F, { children: /* @__PURE__ */ b(I, { children: [/* @__PURE__ */ y(n, {
+				/* @__PURE__ */ b(I, { children: /* @__PURE__ */ x(L, { children: [/* @__PURE__ */ b(r, {
 					instanceId: this.instanceId,
 					model: t,
-					session: i,
+					session: n,
 					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
 					disabled: o !== "gather",
 					showCorrect: e,
 					selectedAnswer: this.state.selectedAnswer,
 					onChoiceClick: this.onChoiceClick,
 					onPlacementClick: this.onPlacementClick
-				}), /* @__PURE__ */ y(r, {
+				}), /* @__PURE__ */ b(i, {
 					instanceId: this.instanceId,
 					model: t,
-					session: i,
+					session: n,
 					disabled: o !== "gather",
 					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
 					selectedAnswer: this.state.selectedAnswer,
 					onChoiceClick: this.onChoiceClick,
 					onPlacementClick: this.onPlacementClick
 				})] }) }),
-				t.correctness && t.feedback && !e && /* @__PURE__ */ y(O, {
+				t.correctness && t.feedback && !e && /* @__PURE__ */ b(k, {
 					correctness: t.correctness.correctness,
 					feedback: t.feedback
 				})
-			] }), /* @__PURE__ */ y(c, { children: this.renderDragOverlay() })]
+			] }), /* @__PURE__ */ b(l, { children: this.renderDragOverlay() })]
 		});
 	}
 };
 //#endregion
-export { L as Main, L as default };
+export { R as Main, R as default };