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

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