@pie-element/placement-ordering 14.1.2-next.11 → 14.1.2-next.13

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++) {
@@ -62,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
@@ -91,4 +85,4 @@ function f(e, t) {
 	return t;
 }
 //#endregion
-export { d as buildState, o as push, f as reducer, s as swap };
+export { u as buildState, o as push, d as reducer };

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

@@ -31,6 +31,8 @@ export declare class PlacementOrdering extends React.Component {
     cancelSelection: any;
     endAnyLiveKeyboardDrag: any;
     placeSelectedChoice: any;
+    getDestinationSlotId: any;
+    focusTile: any;
     isClickSoonAfterDragEnd: () => boolean;
     onChoiceClick: any;
     onPlacementClick: any;

package/dist/delivery/placement-ordering.js

@@ -161,13 +161,16 @@ var Q = class extends o.Component {
 		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, t = B(n.rect?.current?.initial, n.rect?.current?.translated);
-			e && e.type === "target" && !t && this.onRemoveChoice(e, r);
+			e && e.type === "target" && !t && (this.onRemoveChoice(e, r), this.focusTile(this.getDestinationSlotId({
+				type: "choice",
+				id: e.id
+			})));
 		}
 	};
 	onDragStart = (e) => {
@@ -197,8 +200,18 @@ var Q = class extends o.Component {
 	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();
+		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) => {

package/dist/delivery/tile.js

@@ -102,20 +102,24 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 		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) => {
+	}, L = !(g && !u) && !u && P, R = (e) => {
 		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), I());
 	}, z = e.useRef(null);
-	return e.useEffect(() => {
+	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) => {
-			z.current = e, E(e), k(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: D ? `translate3d(${D.x}px, ${D.y}px, 0)` : void 0,
 			boxSizing: "border-box",
@@ -134,6 +138,7 @@ var f = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 		onClick: I,
 		onMouseEnter: () => N(!0),
 		onMouseLeave: () => N(!1),
+		"data-tile-id": H,
 		...g && !u ? {
 			...T,
 			...w