@pie-element/placement-ordering 15.0.3-next.20261007184841 → 15.0.3

package/dist/delivery/tile.js

@@ -2,30 +2,30 @@ import e from "react";
 import t from "debug";
 import n from "prop-types";
 import { styled as r } from "@mui/material/styles";
-import { color as i, useMathName as a } from "@pie-lib/render-ui";
-import { jsx as o } from "react/jsx-runtime";
-import { PlaceHolder as s } from "@pie-lib/drag";
-import { useDraggable as c, useDroppable as l } from "@dnd-kit/core";
-import { sanitizeModelHtml as u } from "@pie-element/shared-utils";
+import { color as i } from "@pie-lib/render-ui";
+import { jsx as a } from "react/jsx-runtime";
+import { PlaceHolder as o } from "@pie-lib/drag";
+import { useDraggable as s, useDroppable as c } from "@dnd-kit/core";
+import { sanitizeModelHtml as l } from "@pie-element/shared-utils";
 //#region src/delivery/tile.tsx
-var d = t("pie-elements:placement-ordering:tile"), f = r("div")(({ theme: e }) => ({
+var u = t("pie-elements:placement-ordering:tile"), d = r("div")(({ theme: e }) => ({
 	width: "100%",
 	fontSize: e.typography.fontSize + 4,
 	textAlign: "center",
 	color: "inherit"
-})), p = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ o(s, {
+})), f = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ a(o, {
 	type: e,
 	isOver: n,
 	disabled: r,
-	children: e === "target" && t !== void 0 && /* @__PURE__ */ o(f, { children: t })
+	children: e === "target" && t !== void 0 && /* @__PURE__ */ a(d, { children: t })
 });
-p.propTypes = {
+f.propTypes = {
 	type: n.string,
 	index: n.number,
 	isOver: n.bool,
 	disabled: n.bool
 };
-var m = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: a, outcome: o, label: s, type: c }) => ({
+var p = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: a, outcome: o, label: s, type: c }) => ({
 	cursor: a ? "not-allowed" : "grab",
 	width: "100%",
 	height: "100%",
@@ -69,98 +69,97 @@ var m = r("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled:
 		border: "none",
 		"&:hover": { backgroundColor: "unset" }
 	}
-})), h = (e) => {
-	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: a, label: s, disabled: c, outcome: l, guideIndex: d } = e;
-	return i ? /* @__PURE__ */ o(p, {
+})), m = (e) => {
+	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: o, label: s, disabled: c, outcome: u, guideIndex: d } = e;
+	return i ? /* @__PURE__ */ a(f, {
 		type: t,
 		index: d,
-		isOver: a,
+		isOver: o,
 		disabled: c
-	}) : /* @__PURE__ */ o(m, {
+	}) : /* @__PURE__ */ a(p, {
 		type: t,
 		isDragging: n,
 		isSelected: r,
-		isOver: a,
+		isOver: o,
 		disabled: c,
-		outcome: l,
+		outcome: u,
 		label: s,
-		dangerouslySetInnerHTML: { __html: u(s) }
+		dangerouslySetInnerHTML: { __html: l(s) }
 	});
-}, g = (t) => {
-	let { label: n, type: r, id: i, empty: s, disabled: u, outcome: f, index: p, guideIndex: m, instanceId: g, draggable: _, tileIndex: v, selectedChoice: y, onChoiceClick: b, onPlacementClick: x } = t, S = `tile-${r}-${i ?? "empty"}-${v}-${g}`, C = `drop-${r}-${i ?? "empty"}-${v}-${g}`, w = {
+}, h = (t) => {
+	let { label: n, type: r, id: i, empty: o, disabled: l, outcome: d, index: f, guideIndex: p, instanceId: h, draggable: g, tileIndex: _, selectedChoice: v, onChoiceClick: y, onPlacementClick: b } = t, x = `tile-${r}-${i ?? "empty"}-${_}-${h}`, S = `drop-${r}-${i ?? "empty"}-${_}-${h}`, C = {
 		id: i,
 		type: r,
-		instanceId: g,
+		instanceId: h,
 		value: n,
-		index: p
-	}, { attributes: T, listeners: E, setNodeRef: D, transform: O, isDragging: k } = c({
+		index: f
+	}, { attributes: w, listeners: T, setNodeRef: E, transform: D, isDragging: O } = s({
+		id: x,
+		data: C,
+		disabled: !g || l
+	}), { setNodeRef: k, isOver: A } = c({
 		id: S,
-		data: w,
-		disabled: !_ || u
-	}), { setNodeRef: A, isOver: j } = l({
-		id: C,
-		data: w,
-		disabled: k
-	}), M = !!y && y.type === w.type && y.id === w.id && y.index === w.index, [N, P] = e.useState(!1), F = !!y && !u, I = j || r === "target" && F && N, L = () => {
-		u || (r === "choice" ? y?.type === "target" ? x?.(w) : _ && b?.(w) : r === "target" && (M ? b?.(w) : y ? x?.(w) : _ && b?.(w)));
-	}, R = _ && !u, z = !R && !u && F, B = (e) => {
-		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), L());
-	}, V = e.useRef(null), H = a(V);
+		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 && !l, F = A || r === "target" && P && M, I = () => {
+		l || (r === "choice" ? v?.type === "target" ? b?.(C) : g && y?.(C) : r === "target" && (j ? y?.(C) : v ? b?.(C) : g && y?.(C)));
+	}, L = !(g && !l) && !l && P, R = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), I());
+	}, z = e.useRef(null);
 	e.useEffect(() => {
-		let e = V.current, t = (e) => {
+		let e = z.current, t = (e) => {
 			e.preventDefault();
 		};
 		return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
 			e && e.removeEventListener("touchstart", t);
 		};
 	}, []);
-	let U = (e) => {
-		V.current = e, D(e), A(e);
+	let B = (e) => {
+		z.current = e, E(e), k(e);
 	};
-	d("[render], props: ", t);
-	let W = r === "target" ? `target-${p}` : r === "choice" ? `choice-${i}` : null, G = W ? `${g}:${W}` : void 0;
-	return /* @__PURE__ */ o("div", {
-		ref: U,
+	u("[render], props: ", t);
+	let V = r === "target" ? `target-${f}` : r === "choice" ? `choice-${i}` : null, H = V ? `${h}:${V}` : void 0;
+	return /* @__PURE__ */ a("div", {
+		ref: B,
 		style: {
-			transform: O ? `translate3d(${O.x}px, ${O.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" : r === "target" && F ? "pointer" : k ? "grabbing" : "grab",
-			zIndex: k ? 1e3 : "auto",
-			willChange: k ? "transform" : "auto"
+			cursor: l ? "not-allowed" : r === "target" && P ? "pointer" : O ? "grabbing" : "grab",
+			zIndex: O ? 1e3 : "auto",
+			willChange: O ? "transform" : "auto"
 		},
-		role: z ? "button" : void 0,
-		tabIndex: z ? 0 : void 0,
-		onKeyDown: z ? B : void 0,
-		onClick: L,
-		onMouseEnter: () => P(!0),
-		onMouseLeave: () => P(!1),
-		"data-tile-id": G,
-		"aria-label": R || z ? H : void 0,
-		...R ? {
-			...E,
-			...T
+		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 && !l ? {
+			...T,
+			...w
 		} : {},
-		children: /* @__PURE__ */ o(h, {
+		children: /* @__PURE__ */ a(m, {
 			label: n,
 			id: i,
-			empty: s,
-			index: p,
-			guideIndex: m,
-			isOver: I,
-			isDragging: k,
-			isSelected: M,
-			disabled: u,
-			outcome: f,
+			empty: o,
+			index: f,
+			guideIndex: p,
+			isOver: F,
+			isDragging: O,
+			isSelected: j,
+			disabled: l,
+			outcome: d,
 			type: r
 		})
 	});
 };
-g.propTypes = {
+h.propTypes = {
 	id: n.any,
 	label: n.string,
 	isOver: n.bool,
@@ -178,4 +177,4 @@ g.propTypes = {
 	onPlacementClick: n.func
 };
 //#endregion
-export { g as Tile, g as default };
+export { h as Tile, h as default };