@pie-element/placement-ordering 14.1.2-next.2 → 14.1.2-next.20

package/dist/controller/scoring.js

@@ -1,6 +1,6 @@
 import { differenceWith as e, isEqual as t, uniq as n } from "@pie-element/shared-lodash";
 import r from "debug";
-import { combination as i } from "js-combinatorics";
+import { Combination as i } from "js-combinatorics";
 //#region src/controller/scoring.ts
 var a = r("pie-elements:placement-ordering:controller"), o = (e) => /* @__PURE__ */ Error(`Cant score answer: ${e} it has duplicates and allowDuplicates is false`), s = (r, s, c) => {
 	if (c = {
@@ -12,7 +12,7 @@ var a = r("pie-elements:placement-ordering:controller"), o = (e) => /* @__PURE__
 	if (s = c.allowDuplicates === !1 ? n(s) : s, a("answer:", s), !Array.isArray(r) || r.length === 0) throw Error("correct must be non empty an array");
 	if (r.length === 1) return +!!t(r, s);
 	if (!Array.isArray(s) || s.length < 2 || s.length > r.length || r.length !== s.length && c.orderMustBeComplete) return 0;
-	let l = i(r, 2).toArray(), u = i(s, 2).toArray(), d = e(u, l, t), f = l.length - u.length, p = l.length, m = ((p - d.length - f) / p).toFixed(2);
+	let l = new i(r, 2).toArray(), u = new i(s, 2).toArray(), d = e(u, l, t), f = l.length - u.length, p = l.length, m = ((p - d.length - f) / p).toFixed(2);
 	return parseFloat(m);
 }, c = (e) => e.correctResponse ? e.correctResponse.map((e) => e && e.id ? e.id : e) : [], l = (e) => {
 	let t = (e.alternateResponses || []).map((e) => Array.isArray(e) ? e : e.response).filter((e) => e !== void 0);
@@ -27,4 +27,4 @@ var a = r("pie-elements:placement-ordering:controller"), o = (e) => /* @__PURE__
 	}), a;
 };
 //#endregion
-export { c as flattenCorrect, l as getAllCorrectResponses, u as score };
+export { c as flattenCorrect, l as getAllCorrectResponses, o as illegalArgumentError, s as pairwiseCombinationScore, u as score };

package/dist/delivery/index.js

@@ -60,10 +60,10 @@ var s = i("pie-elements:placement-ordering"), c = ({ model: e, session: t }) =>
 		}
 	}
 	connectedCallback() {
-		this._initMathObserver();
+		this._initMathObserver(), this.render();
 	}
 	disconnectedCallback() {
-		this._disconnectMathObserver(), this._root && this._root.unmount();
+		this._disconnectMathObserver(), this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/delivery/keyboard-coordinates.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/src/keyboard-coordinates.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+/**
+ * Custom keyboard coordinate getter for placement-ordering's Tab-based placement mode
+ * (enabled only when the item is configured with `placementArea` / `includeTargets`).
+ *
+ * Tab/Shift+Tab cycle the dragged choice through the target column's response areas
+ * in on-screen order (first target, then the rest in sequence), followed by exactly
+ * one source-column stop as a fixed last step before the cycle wraps back to the first
+ * target — so picking up a choice always starts the cycle at the first target,
+ * regardless of where that choice's own source-column slot happens to sit on screen.
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter` so the
+ * pre-existing free-form arrow-key dragging behavior is left completely unchanged.
+ *
+ * Whichever slot a drag started from — a target the choice was already placed in, or
+ * (see below) the choice's own pool slot — stays reachable by Tab as a no-op "drop it
+ * back where it came from": tile.tsx disables a droppable for the whole duration of
+ * its own drag (a self-collision guard for pointer drags), which would otherwise make
+ * that exact slot unreachable; that guard is bypassed here specifically for the one
+ * droppable matching the active drag's own id. A target slot picked up this way stays
+ * in its normal position in the target sequence (it's just another target); nothing
+ * special is needed there beyond the bypass itself.
+ *
+ * The choices column isn't a place a student can choose to relocate an answer within —
+ * there's exactly one meaningful "source" stop for whichever choice is currently being
+ * dragged: its own fixed slot, whether that's the vacated gap left behind (if the
+ * choice is already placed in a target — landing back on it returns the choice to the
+ * pool, undoing the placement) or the very tile being dragged (if the choice is still
+ * sitting there, unplaced — landing back on it is a no-op that effectively cancels the
+ * pick-up; the same disabled-droppable bypass applies here too). Every *other*
+ * choice-column tile — filled or an empty gap — is excluded from the cycle:
+ * `ordering.ts`'s `updateResponse` has no `choice -> choice` case, so they'd be no-op
+ * drop targets anyway. Matching is by id (the vacated gap carries its original choice's
+ * id specifically so this comparison works), not by type alone.
+ */
+export declare const closestDroppableKeyboardCoordinates: (event: any, { active, context, currentCoordinates }: {
+    active: any;
+    context: any;
+    currentCoordinates: any;
+}) => any;

package/dist/delivery/keyboard-coordinates.js

@@ -0,0 +1,51 @@
+import { KeyboardCode as e, defaultKeyboardCoordinateGetter as t } from "@dnd-kit/core";
+//#region src/delivery/keyboard-coordinates.ts
+var n = (n, { active: i, context: a, currentCoordinates: o }) => {
+	let { code: s } = n, c = s === "Tab", l = s === e.Down || s === e.Up || s === e.Left || s === e.Right;
+	if (!c && !l) return;
+	if (l) return t(n, {
+		context: a,
+		currentCoordinates: o
+	});
+	n.preventDefault();
+	let { droppableRects: u, droppableContainers: d, collisionRect: f, draggableNodes: p, active: m } = a;
+	if (!u || u.size === 0) return o;
+	let h = {
+		x: (f?.width || 0) / 2,
+		y: (f?.height || 0) / 2
+	}, g = {
+		x: o.x + h.x,
+		y: o.y + h.y
+	}, _ = p?.get(i)?.data?.current?.id, v = m?.rect?.current?.initial, y = typeof i == "string" ? i.replace(/^tile-/, "drop-") : void 0, b = [], x;
+	for (let [e, t] of d) {
+		let n = t?.data?.current, r = e === y;
+		if (t?.disabled && !r) continue;
+		let i = n?.type === "choice" && n?.id === _;
+		if (n?.type === "choice" && !i) continue;
+		let a = (r ? v : null) || u.get(e);
+		if (!a) continue;
+		let o = {
+			x: a.left + a.width / 2,
+			y: a.top + a.height / 2
+		}, s = {
+			id: e,
+			dropPosition: {
+				x: a.left,
+				y: a.top + a.height / 2 - h.y
+			},
+			center: o
+		};
+		i ? x = s : b.push(s);
+	}
+	if (b.length === 0 && !x) return o;
+	let S = n.shiftKey;
+	b.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), x && b.push(x);
+	let C = 0, w = Infinity;
+	for (let e = 0; e < b.length; e++) {
+		let t = r(g, b[e].center);
+		t < w && (w = t, C = e);
+	}
+	return b[S ? (C - 1 + b.length) % b.length : (C + 1) % b.length].dropPosition;
+}, r = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
+//#endregion
+export { n as closestDroppableKeyboardCoordinates };

package/dist/delivery/main.js

@@ -1,4 +1,4 @@
-import e from "./placement-ordering.js";
+import { PlacementOrdering as e } from "./placement-ordering.js";
 import t from "react";
 import n from "prop-types";
 import { jsx as r } from "react/jsx-runtime";

package/dist/delivery/ordering.js

@@ -8,26 +8,20 @@ var a = i("pie-elements:placement-ordering:ordering"), o = (e, t, n) => {
 		r,
 		...i.slice(n)
 	];
-}, s = (e, n, r) => {
-	if (a("[swap]", e, n, r), !e || e.length <= 1 || n === void 0 || r === void 0) throw Error(`swap requires a non-empty array, fromIndex, toIndex: ${e}, ${n} ${r}`);
-	let i = t(e), o = e[r];
-	return i[r] = i[n], i[n] = o, i;
 };
-function c(e, n) {
+function s(e, n) {
 	let r = t(e.response);
 	if (r[n.index] === n.id) r[n.index] = void 0;
 	else throw Error(`Tried to remove from index: ${n.index}, but the id doesn't match: array: ${r}, target: ${n.id}`);
 	return r;
 }
-function l(e, n, r) {
-	let { response: i, opts: c } = e, l = t(i);
-	if (c.includeTargets) return n.type === "choice" && r.type === "target" ? (l[r.index] = n.id, l) : n.type === "target" && r.type === "choice" ? (l[n.index] = void 0, l) : n.type === "target" && r.type === "target" ? s(i, n.index, r.index) : (a("do nothing to the response"), i);
-	{
-		let t = e.response.findIndex((e) => e !== void 0 && e === n.id), i = e.response.findIndex((e) => e !== void 0 && e === r.id);
-		return a("fromIndex: ", t, "toIndex:", i), o(e.response, t, i);
-	}
+function c(e, n, r) {
+	let { response: i, opts: s } = e, c = t(i);
+	if (s.includeTargets) return n.type === "choice" && r.type === "target" ? (c[r.index] = n.id, c) : n.type === "target" && r.type === "choice" ? (c[n.index] = void 0, c) : n.type === "target" && r.type === "target" ? (c[r.index] = n.id, c[n.index] = void 0, c) : (a("do nothing to the response"), i);
+	let l = e.response.findIndex((e) => e !== void 0 && e === n.id), u = e.response.findIndex((e) => e !== void 0 && e === r.id);
+	return a("fromIndex: ", l, "toIndex:", u), o(e.response, l, u);
 }
-function u(e, t, n, r) {
+function l(e, t, n, r) {
 	if (r.includeTargets) {
 		let i = [];
 		for (let r = 0; r < t.length; r++) {
@@ -40,6 +34,7 @@ function u(e, t, n, r) {
 		}
 		return e.map((e) => t.indexOf(e.id) !== -1 && !r.allowSameChoiceInTargets ? {
 			type: "choice",
+			id: e.id,
 			empty: !0,
 			droppable: !0,
 			draggable: !1
@@ -61,26 +56,26 @@ function u(e, t, n, r) {
 		return i === 0 && t.push(a), t.push(o, a), t;
 	}, []);
 }
-function d(t, i, a, o) {
+function u(t, i, a, o) {
 	return o = e({ includeTargets: !0 }, o), a ||= [], i = !i || n(i) ? o.includeTargets ? Array(t.length) : r(t, (e) => e.id) : i, {
 		choices: t,
 		response: i,
 		opts: o,
 		outcomes: a,
-		tiles: u(t, i, a, o)
+		tiles: l(t, i, a, o)
 	};
 }
-function f(e, t) {
+function d(e, t) {
 	switch (e.type) {
 		case "move": {
-			let { from: n, to: r } = e, i = l(t, n, r), a = u(t.choices, i, t.outcomes, t.opts);
+			let { from: n, to: r } = e, i = c(t, n, r), a = l(t.choices, i, t.outcomes, t.opts);
 			return Object.assign({}, t, {
 				response: i,
 				tiles: a
 			});
 		}
 		case "remove": {
-			let { target: n } = e, r = c(t, n), i = u(t.choices, r, t.outcomes, t.opts);
+			let { target: n } = e, r = s(t, n), i = l(t.choices, r, t.outcomes, t.opts);
 			return Object.assign({}, t, {
 				response: r,
 				tiles: i
@@ -90,4 +85,4 @@ function f(e, t) {
 	return t;
 }
 //#endregion
-export { d as buildState, f as reducer };
+export { u as buildState, o as push, d as reducer };

package/dist/delivery/placement-ordering.d.ts

@@ -23,6 +23,19 @@ export declare class PlacementOrdering extends React.Component {
     onRemoveChoice: any;
     createOrdering: any;
     onDragEnd: any;
+    onDragStart: any;
+    onDragCancel: any;
+    isSameChoice: (a: any, b: any) => boolean;
+    selectChoice: any;
+    toggleChoiceSelection: any;
+    cancelSelection: any;
+    endAnyLiveKeyboardDrag: any;
+    placeSelectedChoice: any;
+    getDestinationSlotId: any;
+    focusTile: any;
+    isClickSoonAfterDragEnd: () => boolean;
+    onChoiceClick: any;
+    onPlacementClick: any;
     render(): React.JSX.Element;
 }
 export default PlacementOrdering;

package/dist/delivery/placement-ordering.js

@@ -1,62 +1,88 @@
 import { HorizontalTiler as e, VerticalTiler as t } from "./tiler.js";
 import { buildState as n, reducer as r } from "./ordering.js";
 import { haveSameValuesButDifferentOrder as i } from "./utils.js";
-import a from "react";
-import { difference as o, isEqual as s, uniqueId as c } from "@pie-element/shared-lodash";
-import l from "debug";
-import { renderMath as u } from "@pie-element/shared-math-rendering-mathjax";
-import d from "prop-types";
-import f from "react-dom";
-import { styled as p } from "@mui/material/styles";
-import { closestCenter as m } from "@dnd-kit/core";
-import * as h from "@pie-lib/render-ui";
-import { Collapsible as g, Feedback as _, PreviewPrompt as v, UiLayout as y, color as b, hasMedia as x, hasText as S } from "@pie-lib/render-ui";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import T from "@pie-lib/translator";
-import E from "@pie-lib/correct-answer-toggle";
-import { DragProvider as D } from "@pie-lib/drag";
+import { closestDroppableKeyboardCoordinates as a } from "./keyboard-coordinates.js";
+import o from "react";
+import { difference as s, isEqual as c, uniqueId as l } from "@pie-element/shared-lodash";
+import u from "debug";
+import { renderMath as d } from "@pie-element/shared-math-rendering-mathjax";
+import f from "prop-types";
+import p from "react-dom";
+import { styled as m } from "@mui/material/styles";
+import { rectIntersection as h } from "@dnd-kit/core";
+import { restrictToParentElement as g } from "@dnd-kit/modifiers";
+import * as _ from "@pie-lib/render-ui";
+import { Collapsible as v, Feedback as y, PreviewPrompt as b, UiLayout as x, color as S, hasMedia as C, hasText as w } from "@pie-lib/render-ui";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import D from "@pie-lib/translator";
+import O from "@pie-lib/correct-answer-toggle";
+import { DragProvider as k } from "@pie-lib/drag";
 //#region src/delivery/placement-ordering.tsx
-function O(e) {
+function A(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function k(e, t) {
-	return !e || O(e) ? e : O(e.default) ? e.default : t && O(e[t]) ? e[t] : t && O(e[t]?.default) ? e[t].default : e;
+function j(e, t) {
+	return !e || A(e) ? e : A(e.default) ? e.default : t && A(e[t]) ? e[t] : t && A(e[t]?.default) ? e[t].default : e;
 }
-var A = k(y, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(v, "PreviewPrompt") || k(I.PreviewPrompt, "PreviewPrompt"), M = k(_, "Feedback") || k(I.Feedback, "Feedback"), N = k(g, "Collapsible") || k(I.Collapsible, "Collapsible"), P = h, F = P.default, I = F && typeof F == "object" ? F : P, { translator: L } = T, R = l("pie-elements:placement-ordering"), z = p("div")({
-	color: b.text(),
-	backgroundColor: b.background(),
+var M = j(x, "UiLayout") || j(R.UiLayout, "UiLayout"), N = j(b, "PreviewPrompt") || j(R.PreviewPrompt, "PreviewPrompt"), P = j(y, "Feedback") || j(R.Feedback, "Feedback"), F = j(v, "Collapsible") || j(R.Collapsible, "Collapsible"), I = _, L = I.default, R = L && typeof L == "object" ? L : I, z = 250, B = (e, t) => {
+	if (!e || !t) return !1;
+	let n = t.left + t.width / 2, r = t.top + t.height / 2;
+	return n >= e.left && n <= e.right && r >= e.top && r <= e.bottom;
+}, V = (e) => e ? {
+	keyboardCoordinateGetter: a,
+	keyboardCodes: {
+		start: ["Space", "Enter"],
+		cancel: ["Escape"],
+		end: ["Space", "Enter"]
+	},
+	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." } }
+} : {}, { translator: H } = D, U = u("pie-elements:placement-ordering"), W = m("div")({
+	color: S.text(),
+	backgroundColor: S.background(),
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center",
 	boxSizing: "border-box"
-}), B = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), V = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), H = p(E)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), U = p(N)(({ theme: e }) => ({
+}), G = m("div")({
+	alignSelf: "stretch",
+	maxWidth: "100%",
+	overflowX: "auto",
+	overflowY: "hidden"
+}), K = m("div")({
+	display: "flex",
+	justifyContent: "center",
+	minWidth: "min-content"
+}), q = m("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), J = m("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), Y = m(O)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), X = m(F)(({ theme: e }) => ({
 	marginBottom: e.spacing(2),
 	alignSelf: "flex-start"
-})), W = (e) => {
+})), Z = (e) => {
 	let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
-	return /* @__PURE__ */ C(t, {
+	return /* @__PURE__ */ T(t, {
 		...a,
 		tiles: n.tiles,
 		onDropChoice: (e, t) => r(e, t, n),
 		onRemoveChoice: (e) => i(e, n)
 	});
 };
-W.propTypes = {
-	tiler: d.func,
-	ordering: d.any,
-	onDropChoice: d.func,
-	onRemoveChoice: d.func
+Z.propTypes = {
+	tiler: f.func,
+	ordering: f.any,
+	onDropChoice: f.func,
+	onRemoveChoice: f.func
 };
-var G = class extends a.Component {
+var Q = class extends o.Component {
 	static propTypes = {
-		onSessionChange: d.func.isRequired,
-		model: d.object.isRequired,
-		session: d.oneOfType([d.array.isRequired, d.object.isRequired])
+		onSessionChange: f.func.isRequired,
+		model: f.object.isRequired,
+		session: f.oneOfType([f.array.isRequired, f.object.isRequired])
 	};
 	constructor(e) {
-		super(e), this.instanceId = c();
+		super(e), this.instanceId = l();
 		let { value: t, needsReset: n } = this.validateSession(e);
-		this.state = { showingCorrect: !1 };
+		this.state = {
+			showingCorrect: !1,
+			selectedChoice: null
+		}, this.lastDragEndAt = 0;
 		let { model: r } = e || {}, { env: i } = r || {}, { mode: a } = i || {};
 		n && a === "gather" && this.props.onSessionChange({
 			...e.session,
@@ -65,18 +91,18 @@ var G = class extends a.Component {
 	}
 	toggleCorrect = (e) => this.setState({ showingCorrect: e });
 	componentDidUpdate() {
-		u(f.findDOMNode(this));
+		d(p.findDOMNode(this));
 	}
 	validateSession = ({ model: e, session: t }, n = !1) => {
-		let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, c = i.map((e) => e.id), { value: l } = t || {}, u;
-		if (a) l && l.length !== c.length && (u = !0, l = l.length < c.length ? l.concat(Array(c.length - l.length)) : l.filter((e) => c.includes(e)));
+		let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, o = i.map((e) => e.id), { value: l } = t || {}, u;
+		if (a) l && l.length !== o.length && (u = !0, l = l.length < o.length ? l.concat(Array(o.length - l.length)) : l.filter((e) => o.includes(e)));
 		else {
-			if (!l || !l.length || n) l = c;
+			if (!l || !l.length || n) l = o;
 			else {
-				let e = o(c, l), t = o(l, c);
-				(e.length || t.length) && (l = c);
+				let e = s(o, l), t = s(l, o);
+				(e.length || t.length) && (l = o);
 			}
-			u = !s(t.value, l);
+			u = !c(t.value, l);
 		}
 		return u && console.warn("This session is not valid anymore. It will be reset."), {
 			value: l,
@@ -84,8 +110,8 @@ var G = class extends a.Component {
 		};
 	};
 	UNSAFE_componentWillReceiveProps(e) {
-		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: a, choices: o = [], env: s } = t, { includeTargets: c } = a || {}, l = {}, u = n.language && n.language !== t.language, d = n.note && n.note === L.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
-		u && d && (n.note = L.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (l.showingCorrect = !1);
+		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: a, choices: o = [], env: s } = t, { includeTargets: c } = a || {}, l = {}, u = n.language && n.language !== t.language, d = n.note && n.note === H.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
+		u && d && (n.note = H.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (l.showingCorrect = !1);
 		let f = i(o, n.choices), { value: p, needsReset: m } = this.validateSession(e, f), h = {
 			...e.session,
 			value: p
@@ -97,7 +123,7 @@ var G = class extends a.Component {
 	}
 	onDropChoice = (e, t, n) => {
 		let { onSessionChange: i, session: a } = this.props, o = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), s = e;
-		R("[onDropChoice] ", o, s);
+		U("[onDropChoice] ", o, s);
 		let c = r({
 			type: "move",
 			from: o,
@@ -107,7 +133,7 @@ var G = class extends a.Component {
 	};
 	onRemoveChoice = (e, t) => {
 		let { onSessionChange: n, session: i } = this.props;
-		R("[onRemoveChoice]", e);
+		U("[onRemoveChoice]", e);
 		let a = r({
 			type: "remove",
 			target: e
@@ -132,75 +158,134 @@ var G = class extends a.Component {
 	};
 	onDragEnd = (e) => {
 		let { over: t, active: n } = e, r = this.createOrdering();
-		if (t && n) {
+		if (this.cancelSelection(), this.lastDragEndAt = Date.now(), t && n) {
 			let e = n.data.current, i = t.data.current;
 			if (e && i && i.type === "target") {
-				this.onDropChoice(i, e, r);
+				this.onDropChoice(i, e, r), this.focusTile(this.getDestinationSlotId(i));
 				return;
 			}
-			e && i && this.onDropChoice(i, e, r);
+			e && i && (this.onDropChoice(i, e, r), this.focusTile(this.getDestinationSlotId(i)));
 		} else if (!t && n) {
-			let e = n.data.current;
-			e && e.type === "target" && this.onRemoveChoice(e, r);
+			let e = n.data.current, t = B(n.rect?.current?.initial, n.rect?.current?.translated);
+			e && e.type === "target" && !t && (this.onRemoveChoice(e, r), this.focusTile(this.getDestinationSlotId({
+				type: "choice",
+				id: e.id
+			})));
 		}
 	};
+	onDragStart = (e) => {
+		let { active: t } = e;
+		t?.data?.current && this.selectChoice(t.data.current);
+	};
+	onDragCancel = () => {
+		this.cancelSelection(), this.lastDragEndAt = Date.now();
+	};
+	isSameChoice = (e, t) => !!e && !!t && e.type === t.type && e.id === t.id && e.index === t.index;
+	selectChoice = (e) => {
+		this.setState({ selectedChoice: e });
+	};
+	toggleChoiceSelection = (e) => {
+		this.setState((t) => ({ selectedChoice: this.isSameChoice(t.selectedChoice, e) ? null : e }));
+	};
+	cancelSelection = () => {
+		this.setState({ selectedChoice: null });
+	};
+	endAnyLiveKeyboardDrag = () => {
+		document.dispatchEvent(new KeyboardEvent("keydown", {
+			code: "Escape",
+			bubbles: !0,
+			cancelable: !0
+		}));
+	};
+	placeSelectedChoice = (e) => {
+		let { selectedChoice: t } = this.state;
+		if (!t) return;
+		let n = this.createOrdering(), r = this.getDestinationSlotId(e);
+		this.onDropChoice(e, t, n), this.cancelSelection(), this.endAnyLiveKeyboardDrag(), this.lastDragEndAt = Date.now(), this.focusTile(r);
+	};
+	getDestinationSlotId = (e) => e ? e.type === "target" ? `target-${e.index}` : e.type === "choice" ? `choice-${e.id}` : null : null;
+	focusTile = (e) => {
+		if (!e) return;
+		let t = `[data-tile-id="${this.instanceId}:${e}"]`;
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				document.querySelector(t)?.focus();
+			});
+		});
+	};
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < z;
+	onChoiceClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.toggleChoiceSelection(e);
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedChoice(e);
+	};
 	render() {
-		let { model: n } = this.props, { correctResponse: r, correctness: i, extraCSSRules: a, prompt: o, rationale: s, feedback: c, config: l, note: u, showNote: d, env: f, disabled: p, teacherInstructions: h, language: g } = n, _ = r && r.length > 0, { showingCorrect: v } = this.state, y = l || {
+		let { model: n } = this.props, { correctResponse: r, correctness: i, extraCSSRules: a, prompt: o, rationale: s, feedback: c, config: l, note: u, showNote: d, env: f, disabled: p, teacherInstructions: m, language: _ } = n, v = r && r.length > 0, { showingCorrect: y } = this.state, b = l || {
 			orientation: "vertical",
 			includeTargets: !0
-		}, { orientation: T, includeTargets: E } = y, O = T === "vertical", k = this.createOrdering(), { mode: N, role: P } = f || {}, F = O ? t : e, I = (v || N === "view" && P === "instructor") && d && u, L = s && (S(s) || x(s)), R = h && (S(h) || x(h)), G = {
-			color: b.text(),
-			backgroundColor: b.background(),
+		}, { orientation: x, includeTargets: D } = b, O = x === "vertical", A = this.createOrdering(), { mode: j, role: F } = f || {}, I = O ? t : e, L = (y || j === "view" && F === "instructor") && d && u, R = s && (w(s) || C(s)), z = m && (w(m) || C(m)), B = {
+			color: S.text(),
+			backgroundColor: S.background(),
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
-			boxSizing: "border-box"
-		};
-		return /* @__PURE__ */ C(D, {
-			onDragStart: () => {},
+			boxSizing: "border-box",
+			width: "100%"
+		}, H = D ? {
+			selectedChoice: this.state.selectedChoice,
+			onChoiceClick: this.onChoiceClick,
+			onPlacementClick: this.onPlacementClick
+		} : {};
+		return /* @__PURE__ */ T(k, {
+			onDragStart: this.onDragStart,
 			onDragEnd: this.onDragEnd,
-			collisionDetection: m,
-			children: /* @__PURE__ */ C(z, { children: /* @__PURE__ */ w(A, {
+			onDragCancel: this.onDragCancel,
+			collisionDetection: h,
+			modifiers: [g],
+			...V(D),
+			children: /* @__PURE__ */ T(W, { children: /* @__PURE__ */ E(M, {
 				extraCSSRules: a,
-				style: G,
+				style: B,
 				children: [
-					R && /* @__PURE__ */ C(U, {
+					z && /* @__PURE__ */ T(X, {
 						labels: {
 							hidden: "Show Teacher Instructions",
 							visible: "Hide Teacher Instructions"
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ C(j, { prompt: h })
+						children: /* @__PURE__ */ T(N, { prompt: m })
 					}),
-					/* @__PURE__ */ C(B, { children: /* @__PURE__ */ C(j, { prompt: o }) }),
-					/* @__PURE__ */ C(H, {
-						show: _,
-						toggled: v,
+					/* @__PURE__ */ T(q, { children: /* @__PURE__ */ T(N, { prompt: o }) }),
+					/* @__PURE__ */ T(Y, {
+						show: v,
+						toggled: y,
 						onToggle: this.toggleCorrect,
-						language: g
+						language: _
 					}),
-					/* @__PURE__ */ C(W, {
+					/* @__PURE__ */ T(G, { children: /* @__PURE__ */ T(K, { children: /* @__PURE__ */ T(Z, {
 						instanceId: this.instanceId,
-						choiceLabel: y.choiceLabel,
-						targetLabel: y.targetLabel,
-						ordering: k,
-						tiler: F,
+						choiceLabel: b.choiceLabel,
+						targetLabel: b.targetLabel,
+						ordering: A,
+						tiler: I,
 						disabled: p,
-						addGuide: y.showOrdering,
-						tileSize: y.tileSize,
-						includeTargets: E,
-						choiceLabelEnabled: n.config && n.config.choiceLabelEnabled
-					}),
-					I && /* @__PURE__ */ C(V, { dangerouslySetInnerHTML: { __html: u } }),
-					L && /* @__PURE__ */ C(U, {
+						addGuide: b.showOrdering,
+						tileSize: b.tileSize,
+						includeTargets: D,
+						choiceLabelEnabled: n.config && n.config.choiceLabelEnabled,
+						...H
+					}) }) }),
+					L && /* @__PURE__ */ T(J, { dangerouslySetInnerHTML: { __html: u } }),
+					R && /* @__PURE__ */ T(X, {
 						labels: {
 							hidden: "Show Rationale",
 							visible: "Hide Rationale"
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ C(j, { prompt: s })
+						children: /* @__PURE__ */ T(N, { prompt: s })
 					}),
-					!v && /* @__PURE__ */ C(M, {
+					!y && /* @__PURE__ */ T(P, {
 						correctness: i,
 						feedback: c
 					})
@@ -210,4 +295,4 @@ var G = class extends a.Component {
 	}
 };
 //#endregion
-export { G as default };
+export { Q as PlacementOrdering, Q as default };

package/dist/delivery/tile.d.ts

@@ -23,6 +23,9 @@ export declare const Tile: {
         instanceId: PropTypes.Requireable<any>;
         draggable: PropTypes.Requireable<boolean>;
         tileIndex: PropTypes.Requireable<number>;
+        selectedChoice: PropTypes.Requireable<object>;
+        onChoiceClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export default Tile;