@pie-element/placement-ordering 14.1.2-next.8 → 14.1.2-next.9

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

@@ -10,23 +10,35 @@
  * 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 directly onto the next/previous enabled
- * droppable (a placement/target tile, or an empty gap left behind in the choices row),
- * in real on-screen position order, placing the dragged item's own top-left corner at
- * the target's center-left point.
+ * 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.
  *
- * The tile currently being dragged already disables its own droppable
- * (see `useDroppable({ disabled: isDragging })` in tile.jsx), so it's naturally
- * excluded from the candidate list here without any extra bookkeeping.
+ * 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.
  *
- * When picking up a choice from the choices row, the other not-yet-placed choice
- * tiles are also registered droppables (tile.jsx disables a droppable only while it's
- * the one being dragged), but dropping a choice onto another choice is a no-op in the
- * reducer (ordering.js's updateResponse has no `choice -> choice` case) — so they're
- * excluded from the Tab/Shift+Tab cycle, leaving only the real placement targets.
+ * 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;

package/dist/delivery/keyboard-coordinates.js

@@ -8,41 +8,44 @@ var n = (n, { active: i, context: a, currentCoordinates: o }) => {
 		currentCoordinates: o
 	});
 	n.preventDefault();
-	let { droppableRects: u, droppableContainers: d, collisionRect: f } = a;
+	let { droppableRects: u, droppableContainers: d, collisionRect: f, draggableNodes: p, active: m } = a;
 	if (!u || u.size === 0) return o;
-	let p = {
+	let h = {
 		x: (f?.width || 0) / 2,
 		y: (f?.height || 0) / 2
-	}, m = {
-		x: o.x + p.x,
-		y: o.y + p.y
-	}, h = i?.data?.current?.type === "choice", g = [];
+	}, 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) {
-		if (t?.disabled || h && t?.data?.current?.type === "choice") continue;
-		let n = u.get(e);
-		if (!n) continue;
-		let r = {
-			x: n.left + n.width / 2,
-			y: n.top + n.height / 2
-		}, i = {
-			x: n.left,
-			y: n.top + n.height / 2
-		};
-		g.push({
+		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: i,
-			center: r
-		});
+			dropPosition: {
+				x: a.left,
+				y: a.top + a.height / 2 - h.y
+			},
+			center: o
+		};
+		i ? x = s : b.push(s);
 	}
-	if (g.length === 0) return o;
-	let _ = n.shiftKey;
-	g.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x);
-	let v = 0, y = Infinity;
-	for (let e = 0; e < g.length; e++) {
-		let t = r(m, g[e].center);
-		t < y && (y = t, v = e);
+	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 g[_ ? (v - 1 + g.length) % g.length : (v + 1) % g.length].dropPosition;
+	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/ordering.js

@@ -40,6 +40,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

package/dist/delivery/placement-ordering.js

@@ -24,7 +24,11 @@ function A(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 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) => e ? {
+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"],
@@ -32,26 +36,26 @@ var M = j(x, "UiLayout") || j(R.UiLayout, "UiLayout"), N = j(b, "PreviewPrompt")
 		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: V } = D, H = u("pie-elements:placement-ordering"), U = m("div")({
+} : {}, { 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"
-}), W = m("div")({
+}), G = m("div")({
 	alignSelf: "stretch",
 	maxWidth: "100%",
 	overflowX: "auto",
 	overflowY: "hidden"
-}), G = m("div")({
+}), K = m("div")({
 	display: "flex",
 	justifyContent: "center",
 	minWidth: "min-content"
-}), K = m("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), q = m("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), J = m(O)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), Y = m(F)(({ theme: e }) => ({
+}), 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"
-})), X = (e) => {
+})), Z = (e) => {
 	let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
 	return /* @__PURE__ */ T(t, {
 		...a,
@@ -60,13 +64,13 @@ var M = j(x, "UiLayout") || j(R.UiLayout, "UiLayout"), N = j(b, "PreviewPrompt")
 		onRemoveChoice: (e) => i(e, n)
 	});
 };
-X.propTypes = {
+Z.propTypes = {
 	tiler: f.func,
 	ordering: f.any,
 	onDropChoice: f.func,
 	onRemoveChoice: f.func
 };
-var Z = class extends o.Component {
+var Q = class extends o.Component {
 	static propTypes = {
 		onSessionChange: f.func.isRequired,
 		model: f.object.isRequired,
@@ -106,8 +110,8 @@ var Z = class extends o.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 === V.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
-		u && d && (n.note = V.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
@@ -119,7 +123,7 @@ var Z = class extends o.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;
-		H("[onDropChoice] ", o, s);
+		U("[onDropChoice] ", o, s);
 		let c = r({
 			type: "move",
 			from: o,
@@ -129,7 +133,7 @@ var Z = class extends o.Component {
 	};
 	onRemoveChoice = (e, t) => {
 		let { onSessionChange: n, session: i } = this.props;
-		H("[onRemoveChoice]", e);
+		U("[onRemoveChoice]", e);
 		let a = r({
 			type: "remove",
 			target: e
@@ -162,8 +166,8 @@ var Z = class extends o.Component {
 			}
 			e && i && this.onDropChoice(i, e, r);
 		} 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);
 		}
 	};
 	onDragStart = (e) => {
@@ -207,7 +211,7 @@ var Z = class extends o.Component {
 		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: 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)), V = {
+		}, { 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",
@@ -226,12 +230,12 @@ var Z = class extends o.Component {
 			onDragCancel: this.onDragCancel,
 			collisionDetection: h,
 			modifiers: [g],
-			...B(D),
-			children: /* @__PURE__ */ T(U, { children: /* @__PURE__ */ E(M, {
+			...V(D),
+			children: /* @__PURE__ */ T(W, { children: /* @__PURE__ */ E(M, {
 				extraCSSRules: a,
-				style: V,
+				style: B,
 				children: [
-					z && /* @__PURE__ */ T(Y, {
+					z && /* @__PURE__ */ T(X, {
 						labels: {
 							hidden: "Show Teacher Instructions",
 							visible: "Hide Teacher Instructions"
@@ -239,14 +243,14 @@ var Z = class extends o.Component {
 						className: "collapsible",
 						children: /* @__PURE__ */ T(N, { prompt: m })
 					}),
-					/* @__PURE__ */ T(K, { children: /* @__PURE__ */ T(N, { prompt: o }) }),
-					/* @__PURE__ */ T(J, {
+					/* @__PURE__ */ T(q, { children: /* @__PURE__ */ T(N, { prompt: o }) }),
+					/* @__PURE__ */ T(Y, {
 						show: v,
 						toggled: y,
 						onToggle: this.toggleCorrect,
 						language: _
 					}),
-					/* @__PURE__ */ T(W, { children: /* @__PURE__ */ T(G, { children: /* @__PURE__ */ T(X, {
+					/* @__PURE__ */ T(G, { children: /* @__PURE__ */ T(K, { children: /* @__PURE__ */ T(Z, {
 						instanceId: this.instanceId,
 						choiceLabel: b.choiceLabel,
 						targetLabel: b.targetLabel,
@@ -259,8 +263,8 @@ var Z = class extends o.Component {
 						choiceLabelEnabled: n.config && n.config.choiceLabelEnabled,
 						...H
 					}) }) }),
-					L && /* @__PURE__ */ T(q, { dangerouslySetInnerHTML: { __html: u } }),
-					R && /* @__PURE__ */ T(Y, {
+					L && /* @__PURE__ */ T(J, { dangerouslySetInnerHTML: { __html: u } }),
+					R && /* @__PURE__ */ T(X, {
 						labels: {
 							hidden: "Show Rationale",
 							visible: "Hide Rationale"
@@ -278,4 +282,4 @@ var Z = class extends o.Component {
 	}
 };
 //#endregion
-export { Z as PlacementOrdering, Z as default };
+export { Q as PlacementOrdering, Q as default };