@pie-element/placement-ordering 14.1.1 → 14.1.2-next.1

package/dist/delivery/placement-ordering.js

@@ -0,0 +1,213 @@
+import { HorizontalTiler as e, VerticalTiler as t } from "./tiler.js";
+import { buildState as n, reducer as r } from "./ordering.js";
+import { haveSameValuesButDifferentOrder as i } from "./utils.js";
+import a from "react";
+import { difference as o, isEqual as s, uniqueId as c } from "@pie-element/shared-lodash";
+import l from "debug";
+import { renderMath as u } from "@pie-element/shared-math-rendering-mathjax";
+import d from "prop-types";
+import f from "react-dom";
+import { styled as p } from "@mui/material/styles";
+import { closestCenter as m } from "@dnd-kit/core";
+import * as h from "@pie-lib/render-ui";
+import { Collapsible as g, Feedback as _, PreviewPrompt as v, UiLayout as y, color as b, hasMedia as x, hasText as S } from "@pie-lib/render-ui";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import T from "@pie-lib/translator";
+import E from "@pie-lib/correct-answer-toggle";
+import { DragProvider as D } from "@pie-lib/drag";
+//#region src/delivery/placement-ordering.tsx
+function O(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function k(e, t) {
+	return !e || O(e) ? e : O(e.default) ? e.default : t && O(e[t]) ? e[t] : t && O(e[t]?.default) ? e[t].default : e;
+}
+var A = k(y, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(v, "PreviewPrompt") || k(I.PreviewPrompt, "PreviewPrompt"), M = k(_, "Feedback") || k(I.Feedback, "Feedback"), N = k(g, "Collapsible") || k(I.Collapsible, "Collapsible"), P = h, F = P.default, I = F && typeof F == "object" ? F : P, { translator: L } = T, R = l("pie-elements:placement-ordering"), z = p("div")({
+	color: b.text(),
+	backgroundColor: b.background(),
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	boxSizing: "border-box"
+}), B = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), V = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), H = p(E)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), U = p(N)(({ theme: e }) => ({
+	marginBottom: e.spacing(2),
+	alignSelf: "flex-start"
+})), W = (e) => {
+	let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
+	return /* @__PURE__ */ C(t, {
+		...a,
+		tiles: n.tiles,
+		onDropChoice: (e, t) => r(e, t, n),
+		onRemoveChoice: (e) => i(e, n)
+	});
+};
+W.propTypes = {
+	tiler: d.func,
+	ordering: d.any,
+	onDropChoice: d.func,
+	onRemoveChoice: d.func
+};
+var G = class extends a.Component {
+	static propTypes = {
+		onSessionChange: d.func.isRequired,
+		model: d.object.isRequired,
+		session: d.oneOfType([d.array.isRequired, d.object.isRequired])
+	};
+	constructor(e) {
+		super(e), this.instanceId = c();
+		let { value: t, needsReset: n } = this.validateSession(e);
+		this.state = { showingCorrect: !1 };
+		let { model: r } = e || {}, { env: i } = r || {}, { mode: a } = i || {};
+		n && a === "gather" && this.props.onSessionChange({
+			...e.session,
+			value: t
+		});
+	}
+	toggleCorrect = (e) => this.setState({ showingCorrect: e });
+	componentDidUpdate() {
+		u(f.findDOMNode(this));
+	}
+	validateSession = ({ model: e, session: t }, n = !1) => {
+		let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, c = i.map((e) => e.id), { value: l } = t || {}, u;
+		if (a) l && l.length !== c.length && (u = !0, l = l.length < c.length ? l.concat(Array(c.length - l.length)) : l.filter((e) => c.includes(e)));
+		else {
+			if (!l || !l.length || n) l = c;
+			else {
+				let e = o(c, l), t = o(l, c);
+				(e.length || t.length) && (l = c);
+			}
+			u = !s(t.value, l);
+		}
+		return u && console.warn("This session is not valid anymore. It will be reset."), {
+			value: l,
+			needsReset: u
+		};
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: a, choices: o = [], env: s } = t, { includeTargets: c } = a || {}, l = {}, u = n.language && n.language !== t.language, d = n.note && n.note === L.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
+		u && d && (n.note = L.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (l.showingCorrect = !1);
+		let f = i(o, n.choices), { value: p, needsReset: m } = this.validateSession(e, f), h = {
+			...e.session,
+			value: p
+		}, g = n.config?.includeTargets !== c;
+		c && g && (m = !0, delete h.value), this.setState(l, () => {
+			let { mode: e } = s || {};
+			m && e === "gather" && this.props.onSessionChange(h);
+		});
+	}
+	onDropChoice = (e, t, n) => {
+		let { onSessionChange: i, session: a } = this.props, o = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), s = e;
+		R("[onDropChoice] ", o, s);
+		let c = r({
+			type: "move",
+			from: o,
+			to: s
+		}, n);
+		i(Object.assign({}, a, { value: c.response }));
+	};
+	onRemoveChoice = (e, t) => {
+		let { onSessionChange: n, session: i } = this.props;
+		R("[onRemoveChoice]", e);
+		let a = r({
+			type: "remove",
+			target: e
+		}, t);
+		n(Object.assign({}, i, { value: a.response }));
+	};
+	createOrdering = () => {
+		let { model: e, session: t } = this.props, { showingCorrect: r } = this.state, { includeTargets: i } = e.config || {
+			orientation: "vertical",
+			includeTargets: !0
+		};
+		return r ? n(e.choices, e.correctResponse, e.correctResponse.map((e) => ({
+			id: e,
+			outcome: "correct"
+		})), {
+			includeTargets: i,
+			allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
+		}) : n(e.choices, t.value, e.outcomes, {
+			includeTargets: i,
+			allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
+		});
+	};
+	onDragEnd = (e) => {
+		let { over: t, active: n } = e, r = this.createOrdering();
+		if (t && n) {
+			let e = n.data.current, i = t.data.current;
+			if (e && i && i.type === "target") {
+				this.onDropChoice(i, e, r);
+				return;
+			}
+			e && i && this.onDropChoice(i, e, r);
+		} else if (!t && n) {
+			let e = n.data.current;
+			e && e.type === "target" && this.onRemoveChoice(e, r);
+		}
+	};
+	render() {
+		let { model: n } = this.props, { correctResponse: r, correctness: i, extraCSSRules: a, prompt: o, rationale: s, feedback: c, config: l, note: u, showNote: d, env: f, disabled: p, teacherInstructions: h, language: g } = n, _ = r && r.length > 0, { showingCorrect: v } = this.state, y = l || {
+			orientation: "vertical",
+			includeTargets: !0
+		}, { orientation: T, includeTargets: E } = y, O = T === "vertical", k = this.createOrdering(), { mode: N, role: P } = f || {}, F = O ? t : e, I = (v || N === "view" && P === "instructor") && d && u, L = s && (S(s) || x(s)), R = h && (S(h) || x(h)), G = {
+			color: b.text(),
+			backgroundColor: b.background(),
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			boxSizing: "border-box"
+		};
+		return /* @__PURE__ */ C(D, {
+			onDragStart: () => {},
+			onDragEnd: this.onDragEnd,
+			collisionDetection: m,
+			children: /* @__PURE__ */ C(z, { children: /* @__PURE__ */ w(A, {
+				extraCSSRules: a,
+				style: G,
+				children: [
+					R && /* @__PURE__ */ C(U, {
+						labels: {
+							hidden: "Show Teacher Instructions",
+							visible: "Hide Teacher Instructions"
+						},
+						className: "collapsible",
+						children: /* @__PURE__ */ C(j, { prompt: h })
+					}),
+					/* @__PURE__ */ C(B, { children: /* @__PURE__ */ C(j, { prompt: o }) }),
+					/* @__PURE__ */ C(H, {
+						show: _,
+						toggled: v,
+						onToggle: this.toggleCorrect,
+						language: g
+					}),
+					/* @__PURE__ */ C(W, {
+						instanceId: this.instanceId,
+						choiceLabel: y.choiceLabel,
+						targetLabel: y.targetLabel,
+						ordering: k,
+						tiler: F,
+						disabled: p,
+						addGuide: y.showOrdering,
+						tileSize: y.tileSize,
+						includeTargets: E,
+						choiceLabelEnabled: n.config && n.config.choiceLabelEnabled
+					}),
+					I && /* @__PURE__ */ C(V, { dangerouslySetInnerHTML: { __html: u } }),
+					L && /* @__PURE__ */ C(U, {
+						labels: {
+							hidden: "Show Rationale",
+							visible: "Hide Rationale"
+						},
+						className: "collapsible",
+						children: /* @__PURE__ */ C(j, { prompt: s })
+					}),
+					!v && /* @__PURE__ */ C(M, {
+						correctness: i,
+						feedback: c
+					})
+				]
+			}) })
+		});
+	}
+};
+//#endregion
+export { G as default };

package/dist/delivery/tile.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/src/tile.jsx
+ * @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.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare const Tile: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        id: PropTypes.Requireable<any>;
+        label: PropTypes.Requireable<string>;
+        isOver: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+        empty: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        outcome: PropTypes.Requireable<string>;
+        index: PropTypes.Requireable<number>;
+        guideIndex: PropTypes.Requireable<number>;
+        instanceId: PropTypes.Requireable<any>;
+        draggable: PropTypes.Requireable<boolean>;
+        tileIndex: PropTypes.Requireable<number>;
+    };
+};
+export default Tile;

package/dist/delivery/tile.js

@@ -0,0 +1,165 @@
+import e from "react";
+import t from "debug";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+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 { PlaceHolder as c } from "@pie-lib/drag";
+//#region src/delivery/tile.tsx
+var l = t("pie-elements:placement-ordering:tile"), u = r("div")(({ theme: e }) => ({
+	width: "100%",
+	fontSize: e.typography.fontSize + 4,
+	textAlign: "center",
+	color: `rgba(${e.palette.common.black}, 0.6)`
+})), d = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ s(c, {
+	type: e,
+	isOver: n,
+	disabled: r,
+	children: e === "target" && t !== void 0 && /* @__PURE__ */ s(u, { children: t })
+});
+d.propTypes = {
+	type: n.string,
+	index: n.number,
+	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",
+	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",
+	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)"
+	} },
+	...(s === "choice" || s === "target") && n && !r && {
+		opacity: .4,
+		backgroundColor: o.primaryLight(),
+		borderColor: e.palette.primary.main,
+		borderStyle: "dashed",
+		transform: "scale(1.05)"
+	},
+	...(s === "choice" || s === "target") && t && !r && {
+		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 && {
+		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 && {
+		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, {
+		type: t,
+		index: l,
+		isOver: i,
+		disabled: o
+	}) : /* @__PURE__ */ s(f, {
+		type: t,
+		isDragging: n,
+		isOver: i,
+		disabled: o,
+		outcome: c,
+		label: a,
+		dangerouslySetInnerHTML: { __html: a }
+	});
+}, 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
+		},
+		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) => {
+			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);
+		},
+		style: {
+			transform: C ? `translate3d(${C.x}px, ${C.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"
+		},
+		...g && !u ? {
+			...x,
+			...b
+		} : {},
+		children: /* @__PURE__ */ s(p, {
+			label: n,
+			id: o,
+			empty: c,
+			index: f,
+			guideIndex: m,
+			isOver: E,
+			isDragging: w,
+			disabled: u,
+			outcome: d,
+			type: r
+		})
+	});
+};
+m.propTypes = {
+	id: n.any,
+	label: n.string,
+	isOver: n.bool,
+	type: n.string,
+	empty: n.bool,
+	disabled: n.bool,
+	outcome: n.string,
+	index: n.number,
+	guideIndex: n.number,
+	instanceId: n.any,
+	draggable: n.bool,
+	tileIndex: n.number
+};
+//#endregion
+export { m as default };

package/dist/delivery/tiler.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/src/tiler.jsx
+ * @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.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export declare class HorizontalTiler extends React.Component {
+    static propTypes: {
+        choiceLabel: PropTypes.Requireable<string>;
+        targetLabel: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        tiles: PropTypes.Validator<any[]>;
+        tileSize: PropTypes.Requireable<string>;
+        addGuide: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        tileSize: string;
+        disabled: boolean;
+        addGuide: boolean;
+    };
+    render(): React.JSX.Element;
+}
+export declare class VerticalTiler extends React.Component {
+    static propTypes: {
+        choiceLabel: PropTypes.Requireable<string>;
+        targetLabel: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        tiles: PropTypes.Validator<any[]>;
+        tileSize: PropTypes.Requireable<string>;
+        addGuide: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        tileSize: string;
+        disabled: boolean;
+        addGuide: boolean;
+    };
+    render(): React.JSX.Element;
+}

package/dist/delivery/tiler.js

@@ -0,0 +1,89 @@
+import e from "./tile.js";
+import t, { createElement as n } from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/delivery/tiler.tsx
+var s = {
+	choiceLabel: r.string,
+	targetLabel: r.string,
+	disabled: r.bool,
+	tiles: r.array.isRequired,
+	tileSize: r.string,
+	addGuide: r.bool
+}, 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, {
+		...r,
+		key: i
+	}) : /* @__PURE__ */ n(e, {
+		...r,
+		label: "",
+		key: i
+	}));
+	return r.propTypes = { ...s }, r;
+}, u = i("div")(({ theme: e, includeTargets: t }) => ({
+	display: "grid",
+	paddingBottom: e.spacing(2),
+	...t && { gridGap: "10px" }
+})), d = i("div")({ textAlign: "center" }), f = i("div")({
+	textAlign: "center",
+	gridRow: "3/4"
+}), p = i("div")(({ includeTargets: e }) => ({
+	gridAutoFlow: "column",
+	display: "grid",
+	...e && { gridGap: "10px" }
+})), m = i("div")({
+	gridColumn: "1/2",
+	textAlign: "center"
+}), h = i("div")({
+	gridColumn: "2/3",
+	textAlign: "center"
+}), g = class extends t.Component {
+	static propTypes = { ...s };
+	static defaultProps = { ...c };
+	render() {
+		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: s } = this.props, c = e ? `auto ${s} auto ${s}` : `auto ${s} auto`, p = e ? i.length / 2 : i.length, m = {
+			gridTemplateColumns: e ? `repeat(${p}, ${s})` : `auto repeat(${Math.floor(p / 2) - 1}, ${s} 10px) ${s} auto`,
+			gridTemplateRows: c
+		}, h = { gridColumn: `1/${p + 1}` };
+		return /* @__PURE__ */ o(u, {
+			includeTargets: e,
+			style: m,
+			children: [
+				/* @__PURE__ */ a(d, {
+					style: h,
+					dangerouslySetInnerHTML: { __html: t ? n : "" }
+				}),
+				e && /* @__PURE__ */ a(f, {
+					style: h,
+					dangerouslySetInnerHTML: { __html: r }
+				}),
+				i.map(l(this.props))
+			]
+		});
+	}
+}, _ = class extends t.Component {
+	static propTypes = { ...s };
+	static defaultProps = { ...c };
+	render() {
+		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: s } = this.props, c = e ? 2 : 1, u = e ? i.length / 2 : i.length;
+		return /* @__PURE__ */ o(p, {
+			includeTargets: e,
+			style: {
+				gridTemplateColumns: `repeat(${c}, ${s})`,
+				gridTemplateRows: e ? `auto repeat(${u}, ${s})` : `auto auto repeat(${Math.floor(u / 2) - 1}, ${s} 10px) ${s} auto`
+			},
+			children: [
+				/* @__PURE__ */ a(m, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
+				e && /* @__PURE__ */ a(h, { dangerouslySetInnerHTML: { __html: r } }),
+				i.map(l(this.props))
+			]
+		});
+	}
+};
+//#endregion
+export { g as HorizontalTiler, _ as VerticalTiler };

package/dist/delivery/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/src/utils.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.
+ */
+export declare const haveSameValuesButDifferentOrder: (arr1: any, arr2: any) => any;

package/dist/delivery/utils.js

@@ -0,0 +1,8 @@
+//#region src/delivery/utils.ts
+var e = (e, t) => {
+	if (!Array.isArray(e) || !Array.isArray(t) || e.length !== t.length) return !1;
+	let n = (e) => e.map((e) => JSON.stringify(e)).sort(), r = n(e), i = n(t), a = r.every((e, t) => e === i[t]), o = e.every((e, n) => JSON.stringify(e) === JSON.stringify(t[n]));
+	return a && !o;
+};
+//#endregion
+export { e as haveSameValuesButDifferentOrder };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for placement-ordering element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;