@pie-element/placement-ordering 14.1.2-next.0 → 14.1.2-next.10

package/dist/delivery/placement-ordering.js

@@ -1,84 +1,108 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/difference.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/uniqueId.js";
-import { HorizontalTiler as r, VerticalTiler as i } from "./tiler.js";
-import { buildState as a, reducer as o } from "./ordering.js";
-import { haveSameValuesButDifferentOrder as s } from "./utils.js";
-import c from "react";
-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 { 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 { 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 c.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 = n();
-		let { value: t, needsReset: r } = this.validateSession(e);
-		this.state = { showingCorrect: !1 };
-		let { model: i } = e || {}, { env: a } = i || {}, { mode: o } = a || {};
-		r && o === "gather" && this.props.onSessionChange({
+		super(e), this.instanceId = l();
+		let { value: t, needsReset: n } = this.validateSession(e);
+		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,
 			value: t
 		});
 	}
 	toggleCorrect = (e) => this.setState({ showingCorrect: e });
 	componentDidUpdate() {
-		u(f.findDOMNode(this));
+		d(p.findDOMNode(this));
 	}
-	validateSession = ({ model: n, session: r }, i = !1) => {
-		let { config: a, choices: o } = n || {}, { includeTargets: s } = a || {}, c = o.map((e) => e.id), { value: l } = r || {}, u;
-		if (s) 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)));
+	validateSession = ({ model: e, session: t }, n = !1) => {
+		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 || i) l = c;
+			if (!l || !l.length || n) l = o;
 			else {
-				let t = e(c, l), n = e(l, c);
-				(t.length || n.length) && (l = c);
+				let e = s(o, l), t = s(l, o);
+				(e.length || t.length) && (l = o);
 			}
-			u = !t(r.value, l);
+			u = !c(t.value, l);
 		}
 		return u && console.warn("This session is not valid anymore. It will be reset."), {
 			value: l,
@@ -86,55 +110,55 @@ var G = class extends c.Component {
 		};
 	};
 	UNSAFE_componentWillReceiveProps(e) {
-		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: c } = i || {}, 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 f = s(a, n.choices), { value: p, needsReset: m } = this.validateSession(e, f), h = {
+		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
 		}, g = n.config?.includeTargets !== c;
 		c && g && (m = !0, delete h.value), this.setState(l, () => {
-			let { mode: e } = o || {};
+			let { mode: e } = s || {};
 			m && e === "gather" && this.props.onSessionChange(h);
 		});
 	}
 	onDropChoice = (e, t, n) => {
-		let { onSessionChange: r, session: i } = this.props, a = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), s = e;
-		R("[onDropChoice] ", a, s);
-		let c = o({
+		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;
+		U("[onDropChoice] ", o, s);
+		let c = r({
 			type: "move",
-			from: a,
+			from: o,
 			to: s
 		}, n);
-		r(Object.assign({}, i, { value: c.response }));
+		i(Object.assign({}, a, { value: c.response }));
 	};
 	onRemoveChoice = (e, t) => {
-		let { onSessionChange: n, session: r } = this.props;
-		R("[onRemoveChoice]", e);
-		let i = o({
+		let { onSessionChange: n, session: i } = this.props;
+		U("[onRemoveChoice]", e);
+		let a = r({
 			type: "remove",
 			target: e
 		}, t);
-		n(Object.assign({}, r, { value: i.response }));
+		n(Object.assign({}, i, { value: a.response }));
 	};
 	createOrdering = () => {
-		let { model: e, session: t } = this.props, { showingCorrect: n } = this.state, { includeTargets: r } = e.config || {
+		let { model: e, session: t } = this.props, { showingCorrect: r } = this.state, { includeTargets: i } = e.config || {
 			orientation: "vertical",
 			includeTargets: !0
 		};
-		return n ? a(e.choices, e.correctResponse, e.correctResponse.map((e) => ({
+		return r ? n(e.choices, e.correctResponse, e.correctResponse.map((e) => ({
 			id: e,
 			outcome: "correct"
 		})), {
-			includeTargets: r,
+			includeTargets: i,
 			allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
-		}) : a(e.choices, t.value, e.outcomes, {
-			includeTargets: r,
+		}) : n(e.choices, t.value, e.outcomes, {
+			includeTargets: i,
 			allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
 		});
 	};
 	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);
@@ -142,68 +166,114 @@ var G = class extends c.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) => {
+		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();
+		this.onDropChoice(e, t, n), this.cancelSelection(), this.endAnyLiveKeyboardDrag(), this.lastDragEndAt = Date.now();
+	};
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < z;
+	onChoiceClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.toggleChoiceSelection(e);
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedChoice(e);
+	};
 	render() {
-		let { model: e } = this.props, { correctResponse: t, correctness: n, extraCSSRules: a, prompt: o, rationale: s, feedback: c, config: l, note: u, showNote: d, env: f, disabled: p, teacherInstructions: h, language: g } = e, _ = t && t.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 ? i : r, 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: e.config && e.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, {
-						correctness: n,
+					!y && /* @__PURE__ */ T(P, {
+						correctness: i,
 						feedback: c
 					})
 				]
@@ -212,4 +282,4 @@ var G = class extends c.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;

package/dist/delivery/tile.js

@@ -24,90 +24,89 @@ d.propTypes = {
 	isOver: n.bool,
 	disabled: n.bool
 };
-var f = r("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i, label: a, type: s }) => ({
-	cursor: r ? "not-allowed" : "grab",
+var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: i, outcome: a, label: s, type: c }) => ({
+	cursor: i ? "not-allowed" : "grab",
 	width: "100%",
 	height: "100%",
 	padding: "10px",
 	boxSizing: "border-box",
 	overflow: "hidden",
-	border: s === "choice" || s === "target" ? `1px solid ${e.palette.grey[400]}` : "1px solid transparent",
-	backgroundColor: s === "choice" || s === "target" ? o.background() : "transparent",
-	transition: s === "choice" || s === "target" ? "background-color 150ms ease, border-color 150ms ease, opacity 150ms ease" : "none",
+	border: c === "choice" || c === "target" ? `1px solid ${o.border()}` : "1px solid transparent",
+	backgroundColor: c === "choice" || c === "target" ? o.background() : "transparent",
+	transition: c === "choice" || c === "target" ? "background-color 150ms ease, border-color 150ms ease, opacity 150ms ease" : "none",
 	pointerEvents: "none",
 	userSelect: "none",
-	...(s === "choice" || s === "target") && { "&:hover": {
-		backgroundColor: r ? o.background() : o.secondary(),
-		borderColor: r ? e.palette.grey[400] : e.palette.primary.main,
-		transform: r ? "none" : "scale(1.02)"
+	...(c === "choice" || c === "target") && { "&:hover": {
+		backgroundColor: i ? o.background() : o.secondary(),
+		borderColor: i ? o.disabled() : e.palette.primary.main,
+		transform: i ? "none" : "scale(1.02)"
 	} },
-	...(s === "choice" || s === "target") && n && !r && {
+	...(c === "choice" || c === "target") && r && !i && {
 		opacity: .4,
 		backgroundColor: o.primaryLight(),
 		borderColor: e.palette.primary.main,
 		borderStyle: "dashed",
 		transform: "scale(1.05)"
 	},
-	...(s === "choice" || s === "target") && t && !r && {
+	...(c === "choice" || c === "target") && (t || n) && !i && {
 		opacity: .6,
 		backgroundColor: o.secondaryLight(),
 		transform: "scale(1.05) rotate(2deg)",
 		boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
 		cursor: "grabbing"
 	},
-	...(s === "choice" || s === "target") && r && {
+	...(c === "choice" || c === "target") && i && {
 		cursor: "not-allowed",
 		"&:hover": {
 			backgroundColor: o.background(),
 			transform: "none"
 		}
 	},
-	...(s === "choice" || s === "target") && i === "incorrect" && { border: `1px solid ${o.incorrect()}` },
-	...(s === "choice" || s === "target") && i === "correct" && { border: `1px solid ${o.correct()}` },
-	...!a && {
+	...(c === "choice" || c === "target") && a === "incorrect" && { border: `1px solid ${o.incorrect()}` },
+	...(c === "choice" || c === "target") && a === "correct" && { border: `1px solid ${o.correct()}` },
+	...!s && {
 		border: "none",
 		"&:hover": { backgroundColor: "unset" }
 	}
 })), p = (e) => {
-	let { type: t, isDragging: n, empty: r, isOver: i, label: a, disabled: o, outcome: c, guideIndex: l } = e;
-	return r ? /* @__PURE__ */ s(d, {
+	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: a, label: o, disabled: c, outcome: l, guideIndex: u } = e;
+	return i ? /* @__PURE__ */ s(d, {
 		type: t,
-		index: l,
-		isOver: i,
-		disabled: o
+		index: u,
+		isOver: a,
+		disabled: c
 	}) : /* @__PURE__ */ s(f, {
 		type: t,
 		isDragging: n,
-		isOver: i,
-		disabled: o,
-		outcome: c,
-		label: a,
-		dangerouslySetInnerHTML: { __html: a }
+		isSelected: r,
+		isOver: a,
+		disabled: c,
+		outcome: l,
+		label: o,
+		dangerouslySetInnerHTML: { __html: o }
 	});
 }, m = (t) => {
-	let { label: n, type: r, id: o, empty: c, disabled: u, outcome: d, index: f, guideIndex: m, instanceId: h, draggable: g, tileIndex: _ } = t, v = `tile-${r}-${o ?? "empty"}-${_}-${h}`, y = `drop-${r}-${o ?? "empty"}-${_}-${h}`, { attributes: b, listeners: x, setNodeRef: S, transform: C, isDragging: w } = i({
-		id: v,
-		data: {
-			id: o,
-			type: r,
-			instanceId: h,
-			value: n,
-			index: f
-		},
+	let { label: n, type: r, id: o, empty: c, disabled: u, outcome: d, index: f, guideIndex: m, instanceId: h, draggable: g, tileIndex: _, selectedChoice: v, onChoiceClick: y, onPlacementClick: b } = t, x = `tile-${r}-${o ?? "empty"}-${_}-${h}`, S = `drop-${r}-${o ?? "empty"}-${_}-${h}`, C = {
+		id: o,
+		type: r,
+		instanceId: h,
+		value: n,
+		index: f
+	}, { attributes: w, listeners: T, setNodeRef: E, transform: D, isDragging: O } = i({
+		id: x,
+		data: C,
 		disabled: !g || u
-	}), { setNodeRef: T, isOver: E } = a({
-		id: y,
-		data: {
-			id: o,
-			type: r,
-			instanceId: h,
-			value: n,
-			index: f
-		},
-		disabled: w
-	}), D = e.useRef(null);
+	}), { setNodeRef: k, isOver: A } = a({
+		id: S,
+		data: C,
+		disabled: O
+	}), j = !!v && v.type === C.type && v.id === C.id && v.index === C.index, [M, N] = e.useState(!1), P = !!v && !u, F = A || r === "target" && P && M, I = () => {
+		u || (r === "choice" ? v?.type === "target" ? b?.(C) : g && y?.(C) : r === "target" && (j ? y?.(C) : v ? b?.(C) : g && y?.(C)));
+	}, L = !(g && !u) && !u, R = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), I());
+	}, z = e.useRef(null);
 	return e.useEffect(() => {
-		let e = D.current, t = (e) => {
+		let e = z.current, t = (e) => {
 			e.preventDefault();
 		};
 		return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
@@ -115,23 +114,29 @@ var f = r("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i,
 		};
 	}, []), l("[render], props: ", t), /* @__PURE__ */ s("div", {
 		ref: (e) => {
-			D.current = e, S(e), T(e);
+			z.current = e, E(e), k(e);
 		},
 		style: {
-			transform: C ? `translate3d(${C.x}px, ${C.y}px, 0)` : void 0,
+			transform: D ? `translate3d(${D.x}px, ${D.y}px, 0)` : void 0,
 			boxSizing: "border-box",
 			overflow: "visible",
 			padding: 0,
 			margin: 0,
 			textAlign: "center",
 			pointerEvents: "auto",
-			cursor: u ? "not-allowed" : w ? "grabbing" : "grab",
-			zIndex: w ? 1e3 : "auto",
-			willChange: w ? "transform" : "auto"
+			cursor: u ? "not-allowed" : r === "target" && P ? "pointer" : O ? "grabbing" : "grab",
+			zIndex: O ? 1e3 : "auto",
+			willChange: O ? "transform" : "auto"
 		},
+		role: L ? "button" : void 0,
+		tabIndex: L ? 0 : void 0,
+		onKeyDown: L ? R : void 0,
+		onClick: I,
+		onMouseEnter: () => N(!0),
+		onMouseLeave: () => N(!1),
 		...g && !u ? {
-			...x,
-			...b
+			...T,
+			...w
 		} : {},
 		children: /* @__PURE__ */ s(p, {
 			label: n,
@@ -139,8 +144,9 @@ var f = r("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i,
 			empty: c,
 			index: f,
 			guideIndex: m,
-			isOver: E,
-			isDragging: w,
+			isOver: F,
+			isDragging: O,
+			isSelected: j,
 			disabled: u,
 			outcome: d,
 			type: r
@@ -159,7 +165,10 @@ m.propTypes = {
 	guideIndex: n.number,
 	instanceId: n.any,
 	draggable: n.bool,
-	tileIndex: n.number
+	tileIndex: n.number,
+	selectedChoice: n.object,
+	onChoiceClick: n.func,
+	onPlacementClick: n.func
 };
 //#endregion
-export { m as default };
+export { m as Tile, m as default };

package/dist/delivery/tiler.d.ts

@@ -16,6 +16,9 @@ export declare class HorizontalTiler extends React.Component {
         tiles: PropTypes.Validator<any[]>;
         tileSize: PropTypes.Requireable<string>;
         addGuide: PropTypes.Requireable<boolean>;
+        selectedChoice: PropTypes.Requireable<object>;
+        onChoiceClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         tileSize: string;
@@ -32,6 +35,9 @@ export declare class VerticalTiler extends React.Component {
         tiles: PropTypes.Validator<any[]>;
         tileSize: PropTypes.Requireable<string>;
         addGuide: PropTypes.Requireable<boolean>;
+        selectedChoice: PropTypes.Requireable<object>;
+        onChoiceClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         tileSize: string;

package/dist/delivery/tiler.js

@@ -1,4 +1,4 @@
-import e from "./tile.js";
+import { Tile as e } from "./tile.js";
 import t, { createElement as n } from "react";
 import r from "prop-types";
 import { styled as i } from "@mui/material/styles";
@@ -10,13 +10,16 @@ var s = {
 	disabled: r.bool,
 	tiles: r.array.isRequired,
 	tileSize: r.string,
-	addGuide: r.bool
+	addGuide: r.bool,
+	selectedChoice: r.object,
+	onChoiceClick: r.func,
+	onPlacementClick: r.func
 }, c = {
 	tileSize: "1fr",
 	disabled: !1,
 	addGuide: !1
 }, l = (t) => {
-	let r = (r, i) => (r.instanceId = t.instanceId, r.disabled = t.disabled, r.guideIndex = t.addGuide ? r.index + 1 : void 0, r.tileIndex = i, t.includeTargets || r.type === "choice" ? /* @__PURE__ */ n(e, {
+	let r = (r, i) => (r.instanceId = t.instanceId, r.disabled = t.disabled, r.guideIndex = t.addGuide ? r.index + 1 : void 0, r.tileIndex = i, r.selectedChoice = t.selectedChoice, r.onChoiceClick = t.onChoiceClick, r.onPlacementClick = t.onPlacementClick, t.includeTargets || r.type === "choice" ? /* @__PURE__ */ n(e, {
 		...r,
 		key: i
 	}) : /* @__PURE__ */ n(e, {