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

package/dist/delivery/main.js

@@ -1,44 +1,65 @@
-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 { 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";
 //#region src/delivery/main.tsx
-function b(e) {
+function T(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 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;
 }
-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 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,
+	options: { activationConstraint: { distance: 8 } }
+}, {
+	sensor: u,
+	options: {
+		coordinateGetter: e,
+		keyboardCodes: {
+			start: [l.Space, l.Enter],
+			cancel: [l.Esc],
+			end: [l.Space, l.Enter]
+		}
+	}
+}], P = x("div")({
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "center",
-	color: g.text(),
-	backgroundColor: g.background()
-}), O = class extends o.Component {
+	color: v.text(),
+	backgroundColor: v.background()
+}), F = x("div")({
+	width: "100%",
+	overflowX: "auto",
+	overflowY: "hidden"
+}), I = x("div")({
+	display: "flex",
+	flexDirection: "column",
+	minWidth: "min-content"
+}), L = class extends i.Component {
 	static propTypes = {
-		session: s.object.isRequired,
-		onSessionChange: s.func,
-		model: s.object.isRequired,
-		prompt: s.string
+		session: a.object.isRequired,
+		onSessionChange: a.func,
+		model: a.object.isRequired,
+		prompt: a.string
 	};
 	constructor(e) {
-		super(e), this.instanceId = n(), this.state = {
+		super(e), this.instanceId = w(), this.state = {
 			showCorrectAnswer: !1,
-			draggingElement: null
-		};
+			draggingElement: null,
+			selectedAnswer: null
+		}, this.lastDragEndAt = 0;
 	}
 	onRemoveAnswer(e) {
 		let { session: t, onSessionChange: n } = this.props;
@@ -58,42 +79,73 @@ var S = x(h, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(m, "
 			this.setState({ draggingElement: {
 				...t.data.current,
 				rect: e
-			} });
+			} }), this.selectAnswer(t.data.current);
 		}
 	};
-	onPlaceAnswer = (n) => {
-		this.setState({ draggingElement: null });
-		let { active: r, over: i } = n;
-		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);
+	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 (C(n.value) && (n.value = {}), t.type === "choices-pool" && e.promptId !== void 0) {
+			n.value[e.promptId] = void 0, r(n);
 			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]);
-			}
-			l(s);
+		let s = 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;
+			} 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);
 		}
 	};
+	onPlaceAnswer = (e) => {
+		this.setState({ draggingElement: null });
+		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());
+	};
+	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;
+		t && (this.placeAnswer(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag(), this.lastDragEndAt = Date.now());
+	};
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < M;
+	onChoiceClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.toggleAnswerSelection(e);
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedAnswer(e);
+	};
 	toggleShowCorrect = () => {
 		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
 	};
 	renderDragOverlay = () => {
 		let { draggingElement: e } = this.state;
-		return e ? /* @__PURE__ */ _(r, {
+		return e ? /* @__PURE__ */ y(t, {
 			id: e.id,
 			title: e.value,
 			disabled: !1,
@@ -106,44 +158,53 @@ var S = x(h, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(m, "
 		}) : 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: t, session: i } = this.props, { config: a, mode: o } = t, { prompt: l, language: u } = a;
+		return /* @__PURE__ */ b(s, {
+			sensors: N,
+			collisionDetection: f,
 			onDragStart: this.onDragStart,
 			onDragEnd: this.onPlaceAnswer,
-			modifiers: [d],
-			children: [/* @__PURE__ */ v(D, { children: [
-				/* @__PURE__ */ _(S, {
+			onDragCancel: this.onDragCancel,
+			modifiers: [p],
+			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, {
 					className: "prompt",
-					prompt: s
+					prompt: l
 				}),
-				/* @__PURE__ */ _(f, {
+				/* @__PURE__ */ y(m, {
 					show: o === "evaluate",
 					toggled: e,
 					onToggle: this.toggleShowCorrect,
-					language: c
+					language: u
 				}),
-				/* @__PURE__ */ _(i, {
+				/* @__PURE__ */ y(F, { children: /* @__PURE__ */ b(I, { children: [/* @__PURE__ */ y(n, {
 					instanceId: this.instanceId,
 					model: t,
-					session: n,
+					session: i,
 					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
 					disabled: o !== "gather",
-					showCorrect: e
-				}),
-				/* @__PURE__ */ _(a, {
+					showCorrect: e,
+					selectedAnswer: this.state.selectedAnswer,
+					onChoiceClick: this.onChoiceClick,
+					onPlacementClick: this.onPlacementClick
+				}), /* @__PURE__ */ y(r, {
 					instanceId: this.instanceId,
 					model: t,
-					session: n,
+					session: i,
 					disabled: o !== "gather",
-					onRemoveAnswer: (e) => this.onRemoveAnswer(e)
-				}),
-				t.correctness && t.feedback && !e && /* @__PURE__ */ _(C, {
+					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
+					selectedAnswer: this.state.selectedAnswer,
+					onChoiceClick: this.onChoiceClick,
+					onPlacementClick: this.onPlacementClick
+				})] }) }),
+				t.correctness && t.feedback && !e && /* @__PURE__ */ y(O, {
 					correctness: t.correctness.correctness,
 					feedback: t.feedback
 				})
-			] }), /* @__PURE__ */ _(u, { children: this.renderDragOverlay() })]
+			] }), /* @__PURE__ */ y(c, { children: this.renderDragOverlay() })]
 		});
 	}
 };
 //#endregion
-export { O as default };
+export { L as Main, L as default };