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

package/dist/delivery/tile.js

@@ -24,114 +24,124 @@ 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);
-	return e.useEffect(() => {
-		let e = D.current, t = (e) => {
+	}), { 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 && P, R = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), I());
+	}, z = e.useRef(null);
+	e.useEffect(() => {
+		let e = z.current, t = (e) => {
 			e.preventDefault();
 		};
 		return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
 			e && e.removeEventListener("touchstart", t);
 		};
-	}, []), l("[render], props: ", t), /* @__PURE__ */ s("div", {
-		ref: (e) => {
-			D.current = e, S(e), T(e);
-		},
+	}, []);
+	let B = (e) => {
+		z.current = e, E(e), k(e);
+	};
+	l("[render], props: ", t);
+	let V = r === "target" ? `target-${f}` : r === "choice" ? `choice-${o}` : null, H = V ? `${h}:${V}` : void 0;
+	return /* @__PURE__ */ s("div", {
+		ref: B,
 		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),
+		"data-tile-id": H,
 		...g && !u ? {
-			...x,
-			...b
+			...T,
+			...w
 		} : {},
 		children: /* @__PURE__ */ s(p, {
 			label: n,
@@ -139,8 +149,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 +170,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, {