@pie-element/placement-ordering 14.1.2-next.5 → 14.1.3

package/dist/delivery/placement-ordering.js

@@ -1,213 +0,0 @@
-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

@@ -1,28 +0,0 @@
-/**
- * @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

@@ -1,165 +0,0 @@
-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

@@ -1,42 +0,0 @@
-/**
- * @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

@@ -1,89 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/**
- * @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

@@ -1,8 +0,0 @@
-//#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

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

package/dist/index.iife.d.ts

@@ -1,8 +0,0 @@
-/**
- * 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;