@pie-element/match-list 7.1.2-next.2 → 7.1.2-next.20

package/dist/delivery/main.js

@@ -1,42 +1,65 @@
-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";
+import { closestDroppableKeyboardCoordinates as e } from "./keyboard-coordinates.js";
+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 b(e) {
+function E(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-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;
+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 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")({
+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: d,
+	options: {
+		coordinateGetter: e,
+		keyboardCodes: {
+			start: [u.Space, u.Enter],
+			cancel: [u.Esc],
+			end: [u.Space, u.Enter]
+		}
+	}
+}], F = S("div")({
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "center",
-	color: p.text(),
-	backgroundColor: p.background()
-}), O = class extends r.Component {
+	color: y.text(),
+	backgroundColor: y.background()
+}), I = S("div")({
+	width: "100%",
+	overflowX: "auto",
+	overflowY: "hidden"
+}), L = S("div")({
+	display: "flex",
+	flexDirection: "column",
+	minWidth: "min-content"
+}), R = class extends a.Component {
 	static propTypes = {
-		session: i.object.isRequired,
-		onSessionChange: i.func,
-		model: i.object.isRequired,
-		prompt: i.string
+		session: o.object.isRequired,
+		onSessionChange: o.func,
+		model: o.object.isRequired,
+		prompt: o.string
 	};
 	constructor(e) {
-		super(e), this.instanceId = y(), this.state = {
+		super(e), this.instanceId = T(), this.state = {
 			showCorrectAnswer: !1,
-			draggingElement: null
-		};
+			draggingElement: null,
+			selectedAnswer: null
+		}, this.lastDragEndAt = 0;
 	}
 	onRemoveAnswer(e) {
 		let { session: t, onSessionChange: n } = this.props;
@@ -56,7 +79,30 @@ var S = x(f, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(d, "
 			this.setState({ draggingElement: {
 				...t.data.current,
 				rect: e
-			} });
+			} }), this.selectAnswer(t.data.current);
+		}
+	};
+	onDragCancel = () => {
+		this.setState({ draggingElement: null }), this.cancelSelection(), this.lastDragEndAt = Date.now();
+	};
+	placeAnswer = (e, t) => {
+		if (!e || !t) return;
+		let { session: n, onSessionChange: r, model: i } = this.props, { config: { duplicates: a } } = i;
+		if (w(n.value) && (n.value = {}), t.type === "choices-pool" && e.promptId !== void 0) {
+			n.value[e.promptId] = void 0, r(n);
+			return;
+		}
+		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 = 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] = o, n.value[c] = e;
+			} else n.value[i] = o, delete n.value[c];
+			r(n);
 		}
 	};
 	onPlaceAnswer = (e) => {
@@ -65,83 +111,120 @@ var S = x(f, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(d, "
 		if (!t) return;
 		let r = t.data.current, i = n?.data.current;
 		if (!r) return;
-		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 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]);
-			}
-			s(o);
-		}
+		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) => {
+		this.setState({ selectedAnswer: e });
+	};
+	toggleAnswerSelection = (e) => {
+		this.setState((t) => ({ selectedAnswer: this.isSameAnswer(t.selectedAnswer, e) ? null : e }));
+	};
+	cancelSelection = () => {
+		this.setState({ selectedAnswer: null });
+	};
+	endAnyLiveKeyboardDrag = () => {
+		document.dispatchEvent(new KeyboardEvent("keydown", {
+			code: "Escape",
+			bubbles: !0,
+			cancelable: !0
+		}));
+	};
+	placeSelectedAnswer = (e) => {
+		let { selectedAnswer: t } = this.state;
+		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 < N;
+	onChoiceClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.toggleAnswerSelection(e);
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedAnswer(e);
 	};
 	toggleShowCorrect = () => {
 		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
 	};
 	renderDragOverlay = () => {
-		let { draggingElement: t } = this.state;
-		return t ? /* @__PURE__ */ m(e, {
-			id: t.id,
-			title: t.value,
+		let { draggingElement: e } = this.state;
+		return e ? /* @__PURE__ */ b(t, {
+			id: e.id,
+			title: e.value,
 			disabled: !1,
 			isDragging: !1,
-			style: t.rect ? {
-				width: t.rect.width,
-				height: t.rect.height,
+			style: e.rect ? {
+				width: e.rect.width,
+				height: e.rect.height,
 				boxSizing: "border-box"
 			} : {}
 		}) : null;
 	};
 	render() {
-		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, {
+		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,
-			modifiers: [c],
-			children: [/* @__PURE__ */ h(D, { children: [
-				/* @__PURE__ */ m(S, {
+			onDragCancel: this.onDragCancel,
+			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__ */ x(F, { children: [
+				/* @__PURE__ */ b(O, {
 					className: "prompt",
-					prompt: d
+					prompt: s
 				}),
-				/* @__PURE__ */ m(l, {
-					show: u === "evaluate",
+				/* @__PURE__ */ b(h, {
+					show: o === "evaluate",
 					toggled: e,
 					onToggle: this.toggleShowCorrect,
-					language: f
+					language: u
 				}),
-				/* @__PURE__ */ m(t, {
+				/* @__PURE__ */ b(I, { children: /* @__PURE__ */ x(L, { children: [/* @__PURE__ */ b(r, {
 					instanceId: this.instanceId,
-					model: r,
-					session: i,
+					model: t,
+					session: n,
 					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
-					disabled: u !== "gather",
-					showCorrect: e
-				}),
-				/* @__PURE__ */ m(n, {
+					disabled: o !== "gather",
+					showCorrect: e,
+					selectedAnswer: this.state.selectedAnswer,
+					onChoiceClick: this.onChoiceClick,
+					onPlacementClick: this.onPlacementClick
+				}), /* @__PURE__ */ b(i, {
 					instanceId: this.instanceId,
-					model: r,
-					session: i,
-					disabled: u !== "gather",
-					onRemoveAnswer: (e) => this.onRemoveAnswer(e)
-				}),
-				r.correctness && r.feedback && !e && /* @__PURE__ */ m(C, {
-					correctness: r.correctness.correctness,
-					feedback: r.feedback
+					model: t,
+					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__ */ b(k, {
+					correctness: t.correctness.correctness,
+					feedback: t.feedback
 				})
-			] }), /* @__PURE__ */ m(s, { children: this.renderDragOverlay() })]
+			] }), /* @__PURE__ */ b(l, { children: this.renderDragOverlay() })]
 		});
 	}
 };
 //#endregion
-export { O as default };
+export { R as Main, R as default };