@pie-element/match-list 7.1.2-next.1 → 7.1.2-next.11

package/dist/delivery/answer.js

@@ -1,19 +1,19 @@
-import e from "react";
-import t from "debug";
-import n from "prop-types";
-import { PlaceHolder as r } from "@pie-lib/drag";
-import { useDraggable as i, useDroppable as a } from "@dnd-kit/core";
-import { color as o } from "@pie-lib/render-ui";
-import { jsx as s } from "react/jsx-runtime";
-import { styled as c } from "@mui/material/styles";
-import { isEmpty as l } from "@pie-element/shared-lodash";
+import e, { useState as t } from "react";
+import n from "debug";
+import r from "prop-types";
+import { PlaceHolder as i } from "@pie-lib/drag";
+import { useDraggable as a, useDroppable as o } from "@dnd-kit/core";
+import { color as s } from "@pie-lib/render-ui";
+import { jsx as c } from "react/jsx-runtime";
+import { styled as l } from "@mui/material/styles";
+import { isEmpty as u } from "@pie-element/shared-lodash";
 //#region src/delivery/answer.tsx
-var u = t("pie-elements:match-title:answer"), d = c("div")(({ theme: e }) => ({
+var d = n("pie-elements:match-title:answer"), f = l("div")(({ theme: e }) => ({
 	width: "100%",
 	fontSize: "18px",
 	textAlign: "center",
 	color: `rgba(${e.palette.common.black}, 0.6)`
-})), f = ({ index: e, isOver: t, disabled: n, type: i }) => /* @__PURE__ */ s(r, {
+})), p = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ c(i, {
 	extraStyles: {
 		display: "flex",
 		padding: "0",
@@ -23,19 +23,19 @@ var u = t("pie-elements:match-title:answer"), d = c("div")(({ theme: e }) => ({
 	},
 	disabled: n,
 	isOver: t,
-	type: i,
-	children: e !== void 0 && /* @__PURE__ */ s(d, { children: e })
+	type: r,
+	children: e !== void 0 && /* @__PURE__ */ c(f, { children: e })
 });
-f.propTypes = {
-	index: n.number,
-	isOver: n.bool,
-	disabled: n.bool,
-	type: n.string
+p.propTypes = {
+	index: r.number,
+	isOver: r.bool,
+	disabled: r.bool,
+	type: r.string
 };
-var p = c("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i }) => ({
-	color: o.text(),
-	backgroundColor: o.white(),
-	border: `1px solid ${i === "correct" ? o.correct() : i === "incorrect" ? o.incorrect() : e.palette.grey[400]}`,
+var m = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcome: i }) => ({
+	color: s.text(),
+	backgroundColor: s.white(),
+	border: `1px solid ${i === "correct" ? s.correct() : i === "incorrect" ? s.incorrect() : s.border()}`,
 	cursor: r ? "not-allowed" : "pointer",
 	width: "100%",
 	padding: "10px",
@@ -43,43 +43,45 @@ var p = c("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i
 	overflow: "hidden",
 	transition: "opacity 200ms linear",
 	wordBreak: "break-word",
-	opacity: t && !r ? .5 : n && !r ? .2 : 1,
+	opacity: (e || t) && !r ? .5 : n && !r ? .2 : 1,
 	touchAction: "none"
-})), m = (e) => {
-	let { isDragging: t, isOver: n, title: r, disabled: i, empty: a, outcome: o, guideIndex: c, type: l } = e;
-	return a ? /* @__PURE__ */ s(f, {
-		index: c,
-		isOver: n,
-		disabled: i,
-		type: l
-	}) : /* @__PURE__ */ s(p, {
+})), h = (e) => {
+	let { isDragging: t, isSelected: n, isOver: r, title: i, disabled: a, empty: o, outcome: s, guideIndex: l, type: u } = e;
+	return o ? /* @__PURE__ */ c(p, {
+		index: l,
+		isOver: r,
+		disabled: a,
+		type: u
+	}) : /* @__PURE__ */ c(m, {
 		isDragging: t,
-		isOver: n,
-		disabled: i,
-		outcome: o,
-		dangerouslySetInnerHTML: { __html: r }
+		isSelected: n,
+		isOver: r,
+		disabled: a,
+		outcome: s,
+		dangerouslySetInnerHTML: { __html: i }
 	});
-}, h = c("div")(({ correct: e, theme: t }) => ({
+}, g = l("div")(({ correct: e, isSelected: t, isDragging: n, theme: r }) => ({
 	boxSizing: "border-box",
 	minHeight: 40,
 	minWidth: "200px",
 	overflow: "hidden",
-	margin: t.spacing(.5),
+	margin: r.spacing(.5),
 	padding: "0px",
 	textAlign: "center",
 	height: "initial",
-	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${o.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${o.incorrect()})` : "none"
-})), g = class extends e.Component {
+	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${s.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${s.incorrect()})` : t && !n ? `2px solid ${s.buttonFocusOutline()}` : "none"
+})), _ = class extends e.Component {
 	static propTypes = {
-		className: n.string,
-		isDragging: n.bool,
-		id: n.any,
-		title: n.string,
-		isOver: n.bool,
-		empty: n.bool,
-		type: n.string,
-		disabled: n.bool,
-		correct: n.bool
+		className: r.string,
+		isDragging: r.bool,
+		isSelected: r.bool,
+		id: r.any,
+		title: r.string,
+		isOver: r.bool,
+		empty: r.bool,
+		type: r.string,
+		disabled: r.bool,
+		correct: r.bool
 	};
 	componentDidMount() {
 		this.ref && this.ref.addEventListener("touchstart", this.handleTouchStart, { passive: !0 });
@@ -89,88 +91,122 @@ var p = c("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i
 	}
 	handleTouchStart = (e) => {};
 	render() {
-		let { id: e, title: t, isDragging: n = !1, className: r, disabled: i, isOver: a = !1, type: o, correct: c } = this.props;
-		return u("[render], props: ", this.props), /* @__PURE__ */ s(h, {
-			correct: c,
-			className: r,
+		let { id: e, title: t, isDragging: n = !1, isSelected: r = !1, className: i, disabled: a, isOver: o = !1, type: s, correct: l } = this.props;
+		return d("[render], props: ", this.props), /* @__PURE__ */ c(g, {
+			correct: l,
+			isSelected: r,
+			isDragging: n,
+			className: i,
 			ref: (e) => this.ref = e,
-			children: /* @__PURE__ */ s(m, {
+			children: /* @__PURE__ */ c(h, {
 				title: t,
 				id: e,
-				isOver: a,
-				empty: l(t),
+				isOver: o,
+				empty: u(t),
 				isDragging: n,
-				disabled: i,
-				type: o
+				isSelected: r,
+				disabled: a,
+				type: s
 			})
 		});
 	}
-};
-function _(e) {
-	let { id: t, instanceId: n, promptId: r, draggable: o = !0, disabled: c = !1, type: l } = e, u = `${l || "answer"}-${t}`, d = r == null ? void 0 : `drop-${r}`, { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: _, isDragging: v } = i({
-		id: u,
-		data: {
-			type: l || "answer",
-			id: t,
-			instanceId: n,
-			value: e.title,
-			promptId: r
-		},
-		disabled: !o || c
-	}), y = a({
-		id: d,
-		data: d ? {
-			type: "drop-zone",
-			promptId: r,
-			instanceId: n
-		} : void 0,
-		disabled: c || !d
-	}), b = y.setNodeRef, x = y.isOver, S = h ? `translate3d(${h.x}px, ${h.y}px, 0)` : void 0;
-	return d ? /* @__PURE__ */ s("div", {
-		ref: b,
-		style: {
-			flex: 1,
-			transform: S,
-			transition: _,
-			opacity: v ? .5 : 1,
-			backgroundColor: x ? "rgba(0,0,0,0.05)" : "transparent"
-		},
-		children: /* @__PURE__ */ s("div", {
-			ref: m,
-			...p,
-			...f,
-			children: /* @__PURE__ */ s(g, {
-				...e,
-				isDragging: v,
-				isOver: x
+}, v = ({ type: e, id: t, promptId: n }) => n == null ? `${e || "answer"}-${t}` : `${e || "answer"}-prompt-${n}`;
+function y(e) {
+	let { id: n, instanceId: r, promptId: i, draggable: s = !0, disabled: l = !1, type: u, selectedAnswer: d, onSelectClick: f, onPlacementClick: p } = e, m = v({
+		type: u,
+		id: n,
+		promptId: i
+	}), h = i == null ? void 0 : `drop-${i}`, g = {
+		type: u || "answer",
+		id: n,
+		instanceId: r,
+		value: e.title,
+		promptId: i
+	}, y = h ? {
+		type: "drop-zone",
+		promptId: i,
+		instanceId: r
+	} : void 0, { attributes: b, listeners: x, setNodeRef: S, transform: C, transition: w, isDragging: T } = a({
+		id: m,
+		data: g,
+		disabled: !s || l,
+		attributes: { tabIndex: s && !l ? 0 : -1 }
+	}), E = o({
+		id: h,
+		data: y,
+		disabled: l || !h
+	}), D = E.setNodeRef, O = E.isOver, [k, A] = t(!1), j = !!d, M = O || j && k && !l, N = !!d && d.type === g.type && d.id === g.id && d.promptId === g.promptId, P = C ? `translate3d(${C.x}px, ${C.y}px, 0)` : void 0;
+	if (h) {
+		let t = () => {
+			l || (N ? f?.(g) : d ? p?.(y) : s && f?.(g));
+		}, n = !s && !l;
+		return /* @__PURE__ */ c("div", {
+			ref: D,
+			role: "button",
+			tabIndex: n ? 0 : -1,
+			onClick: t,
+			onKeyDown: n ? (e) => {
+				(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), t());
+			} : void 0,
+			onMouseEnter: () => A(!0),
+			onMouseLeave: () => A(!1),
+			style: {
+				flex: 1,
+				opacity: T ? .5 : 1,
+				backgroundColor: T || N || M ? "rgba(0,0,0,0.05)" : "transparent",
+				cursor: j && !l ? "pointer" : void 0
+			},
+			children: /* @__PURE__ */ c("div", {
+				ref: S,
+				...x,
+				...b,
+				style: {
+					transform: P,
+					transition: w
+				},
+				children: /* @__PURE__ */ c(_, {
+					...e,
+					isDragging: T,
+					isSelected: N,
+					isOver: M
+				})
 			})
-		})
-	}) : /* @__PURE__ */ s("div", {
-		ref: m,
-		...p,
-		...f,
+		});
+	}
+	let F = (e) => {
+		l || (e.stopPropagation(), f?.(g));
+	};
+	return /* @__PURE__ */ c("div", {
+		ref: S,
+		...x,
+		...b,
+		onClick: F,
 		style: {
-			transform: S,
-			transition: _,
-			cursor: c ? "not-allowed" : "grab",
-			opacity: v ? .5 : 1,
-			touchAction: o && !c ? "none" : "auto"
+			transform: P,
+			transition: w,
+			cursor: l ? "not-allowed" : "grab",
+			opacity: T ? .5 : 1,
+			touchAction: s && !l ? "none" : "auto"
 		},
-		children: /* @__PURE__ */ s(g, {
+		children: /* @__PURE__ */ c(_, {
 			...e,
-			isDragging: v,
+			isDragging: T,
+			isSelected: N,
 			isOver: !1
 		})
 	});
 }
-_.propTypes = {
-	id: n.any,
-	instanceId: n.string,
-	promptId: n.any,
-	title: n.string,
-	draggable: n.bool,
-	disabled: n.bool,
-	type: n.string
+y.propTypes = {
+	id: r.any,
+	instanceId: r.string,
+	promptId: r.any,
+	title: r.string,
+	draggable: r.bool,
+	disabled: r.bool,
+	type: r.string,
+	selectedAnswer: r.object,
+	onSelectClick: r.func,
+	onPlacementClick: r.func
 };
 //#endregion
-export { g as Answer, _ as default };
+export { _ as Answer, v as buildDragId, y as default };

package/dist/delivery/arrow.js

@@ -1,35 +1,36 @@
 import e from "react";
 import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-import a from "@mui/icons-material/ArrowDropDown";
+import { color as n } from "@pie-lib/render-ui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import o from "@mui/icons-material/ArrowDropDown";
 //#region src/delivery/arrow.tsx
-var o = i("div")({
+var s = a("div")({
 	display: "inline-block",
 	position: "relative",
 	width: "100%"
-}), s = i("span")(({ theme: e, isRight: t }) => ({
-	backgroundColor: e.palette.grey[500],
-	bottom: t ? 20 : 19,
+}), c = a("span")(({ isRight: e }) => ({
+	backgroundColor: n.border(),
+	bottom: e ? 20 : 19,
 	content: "\"\"",
 	display: "block",
 	height: 1,
 	left: 20,
 	position: "absolute",
 	width: "100%"
-})), c = class extends e.Component {
+})), l = class extends e.Component {
 	static propTypes = { direction: t.string };
 	render() {
 		let { direction: e } = this.props;
-		return /* @__PURE__ */ r(o, {
+		return /* @__PURE__ */ i(s, {
 			style: e === "left" ? {} : { transform: "rotate(180deg)" },
-			children: [/* @__PURE__ */ n(a, { style: {
+			children: [/* @__PURE__ */ r(o, { style: {
 				transform: "rotate(90deg)",
-				color: "#979797",
+				color: n.border(),
 				fontSize: 40
-			} }), /* @__PURE__ */ n(s, { isRight: e !== "left" })]
+			} }), /* @__PURE__ */ r(c, { isRight: e !== "left" })]
 		});
 	}
 };
 //#endregion
-export { c as default };
+export { l as Arrow, l as default };

package/dist/delivery/choices-list.d.ts

@@ -15,6 +15,9 @@ export declare class ChoicesList extends React.Component {
         model: PropTypes.Validator<object>;
         disabled: PropTypes.Validator<boolean>;
         onRemoveAnswer: PropTypes.Requireable<(...args: any[]) => any>;
+        selectedAnswer: PropTypes.Requireable<object>;
+        onChoiceClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     render(): React.JSX.Element;
 }

package/dist/delivery/choices-list.js

@@ -1,5 +1,5 @@
 import e from "./answer.js";
-import t from "./droppable-placeholder.js";
+import { DroppablePlaceholder as t } from "./droppable-placeholder.js";
 import n from "react";
 import r from "prop-types";
 import { jsx as i } from "react/jsx-runtime";
@@ -12,24 +12,30 @@ var l = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), u = class
 		instanceId: r.string.isRequired,
 		model: r.object.isRequired,
 		disabled: r.bool.isRequired,
-		onRemoveAnswer: r.func
+		onRemoveAnswer: r.func,
+		selectedAnswer: r.object,
+		onChoiceClick: r.func,
+		onPlacementClick: r.func
 	};
 	render() {
-		let { model: n, disabled: r, session: a, instanceId: u, onRemoveAnswer: d } = this.props, { config: f } = n, { duplicates: p } = f;
+		let { model: n, disabled: r, session: a, instanceId: u, onRemoveAnswer: d, selectedAnswer: f, onChoiceClick: p, onPlacementClick: m } = this.props, { config: h } = n, { duplicates: g } = h;
 		return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(t, {
 			id: "choices-pool",
 			disabled: r,
 			onRemoveAnswer: d,
-			children: f.answers.filter((e) => p || s(a) || !a.value || c(o(a.value, (t) => t === e.id))).map((t) => /* @__PURE__ */ i(e, {
+			onPlacementClick: m,
+			children: h.answers.filter((e) => g || s(a) || !a.value || c(o(a.value, (t) => t === e.id))).map((t) => /* @__PURE__ */ i(e, {
 				instanceId: u,
 				draggable: !0,
 				disabled: r,
 				session: a,
 				type: "choice",
+				selectedAnswer: f,
+				onSelectClick: p,
 				...t
 			}, t.id))
 		}) });
 	}
 };
 //#endregion
-export { u as default };
+export { u as ChoicesList, u as default };

package/dist/delivery/droppable-placeholder.d.ts

@@ -8,17 +8,19 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-export declare function DroppablePlaceholder({ id, disabled, children, ...rest }: {
+export declare function DroppablePlaceholder({ id, disabled, children, onPlacementClick, ...rest }: {
     [x: string]: any;
     id: any;
     disabled: any;
     children: any;
+    onPlacementClick: any;
 }): React.JSX.Element;
 export declare namespace DroppablePlaceholder {
     var propTypes: {
         id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         disabled: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
 }
 export default DroppablePlaceholder;

package/dist/delivery/droppable-placeholder.js

@@ -16,16 +16,19 @@ var a = i("div")(({ theme: e }) => ({
 	minHeight: 50,
 	transition: "background-color 200ms ease"
 }));
-function o({ id: e, disabled: i, children: o, ...s }) {
-	let { setNodeRef: c, isOver: l } = n({
+function o({ id: e, disabled: i, children: o, onPlacementClick: s, ...c }) {
+	let { setNodeRef: l, isOver: u } = n({
 		id: e || "choices-pool",
 		data: { type: "choices-pool" },
 		disabled: i
 	});
 	return /* @__PURE__ */ r(a, {
-		ref: c,
-		style: { backgroundColor: l ? "rgba(0,0,0,0.05)" : "transparent" },
-		...s,
+		ref: l,
+		onClick: () => {
+			i || s?.({ type: "choices-pool" });
+		},
+		style: { backgroundColor: u ? "rgba(0,0,0,0.05)" : "transparent" },
+		...c,
 		children: /* @__PURE__ */ r(t, {
 			id: e,
 			disabled: i,
@@ -36,7 +39,8 @@ function o({ id: e, disabled: i, children: o, ...s }) {
 o.propTypes = {
 	id: e.oneOfType([e.string, e.number]),
 	disabled: e.bool,
-	children: e.node
+	children: e.node,
+	onPlacementClick: e.func
 };
 //#endregion
-export { o as default };
+export { o as DroppablePlaceholder, o as default };

package/dist/delivery/index.js

@@ -1,4 +1,4 @@
-import e from "./main.js";
+import { Main as e } from "./main.js";
 import t from "react";
 import { createRoot as n } from "react-dom/client";
 import r from "debug";
@@ -42,7 +42,7 @@ var o = r("pie-ui:graph-lines"), s = (e, t) => {
 		});
 	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

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

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/match-list/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 non-sortable drag-and-drop.
+ *
+ * Tab/Shift+Tab cycle the dragged item directly onto the next/previous droppable
+ * (response area or the choices pool), in DOM order, placing the dragged item's own
+ * top-left corner at the target's center-left point. Arrow keys are left doing plain
+ * free-form movement (nudging the dragged item by a fixed step, same as dnd-kit's own
+ * default keyboard behavior) rather than jumping between droppables — collision
+ * detection (rectIntersection) still picks up whatever the item ends up actually
+ * overlapping.
+ */
+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,63 @@
+import { KeyboardCode as e } from "@dnd-kit/core";
+//#region src/delivery/keyboard-coordinates.ts
+var t = 25, 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 (n.preventDefault(), l) switch (s) {
+		case e.Down: return {
+			...o,
+			y: o.y + t
+		};
+		case e.Up: return {
+			...o,
+			y: o.y - t
+		};
+		case e.Right: return {
+			...o,
+			x: o.x + t
+		};
+		case e.Left: return {
+			...o,
+			x: o.x - t
+		};
+		default: return o;
+	}
+	let { droppableRects: u, droppableContainers: d, collisionRect: f } = a;
+	if (!u || u.size === 0) return o;
+	let p = i?.data?.current, m = p?.promptId == null ? void 0 : `drop-${p.promptId}`, h = [];
+	for (let [e, t] of d) {
+		if (t?.disabled || e === m) continue;
+		let n = t?.node?.current?.getBoundingClientRect() ?? u.get(e);
+		if (!n) continue;
+		let r = {
+			x: n.left + n.width / 2,
+			y: n.top + n.height / 2
+		}, i = f?.height ?? 0, a = {
+			x: n.left,
+			y: n.top + n.height / 2 - i / 2
+		};
+		h.push({
+			id: e,
+			rect: n,
+			dropPosition: a,
+			center: r
+		});
+	}
+	if (h.length === 0) return o;
+	let g = n.shiftKey;
+	h.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 _ = f ? {
+		x: f.left + f.width / 2,
+		y: f.top + f.height / 2
+	} : o, v = h.findIndex((e) => _.x >= e.rect.left && _.x <= e.rect.right && _.y >= e.rect.top && _.y <= e.rect.bottom);
+	if (v === -1) {
+		let e = Infinity;
+		for (let t = 0; t < h.length; t++) {
+			let n = r(o, h[t].dropPosition);
+			n < e && (e = n, v = t);
+		}
+	}
+	return h[g ? (v - 1 + h.length) % h.length : (v + 1) % h.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.d.ts

@@ -18,7 +18,18 @@ export declare class Main extends React.Component {
     constructor(props: any);
     onRemoveAnswer(id: any): void;
     onDragStart: any;
+    onDragCancel: any;
+    placeAnswer: any;
     onPlaceAnswer: any;
+    isSameAnswer: (a: any, b: any) => boolean;
+    selectAnswer: any;
+    toggleAnswerSelection: any;
+    cancelSelection: any;
+    endAnyLiveKeyboardDrag: any;
+    placeSelectedAnswer: any;
+    isClickSoonAfterDragEnd: () => boolean;
+    onChoiceClick: any;
+    onPlacementClick: any;
     toggleShowCorrect: any;
     renderDragOverlay: any;
     render(): React.JSX.Element;