@pie-element/categorize 13.2.0-next.11 → 13.2.0-next.13

package/dist/delivery/categorize/index.js

@@ -10,32 +10,33 @@ import m from "prop-types";
 import h from "debug";
 import { styled as g } from "@mui/material/styles";
 import { DragOverlay as _ } from "@dnd-kit/core";
-import v from "@pie-lib/correct-answer-toggle";
-import { buildState as y, moveChoiceToCategory as b, removeChoiceFromCategory as x } from "@pie-lib/categorize";
-import { DragProvider as S, uid as C } from "@pie-lib/drag";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import E from "@pie-lib/translator";
-import { AlertDialog as D } from "@pie-lib/config-ui";
+import { restrictToFirstScrollableAncestor as v } from "@dnd-kit/modifiers";
+import y from "@pie-lib/correct-answer-toggle";
+import { buildState as b, moveChoiceToCategory as x, removeChoiceFromCategory as S } from "@pie-lib/categorize";
+import { DragProvider as C, uid as w } from "@pie-lib/drag";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import D from "@pie-lib/translator";
+import { AlertDialog as O } from "@pie-lib/config-ui";
 //#region src/delivery/categorize/index.tsx
-function O(e) {
+function k(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;
+function A(e, t) {
+	return !e || k(e) ? e : k(e.default) ? e.default : t && k(e[t]) ? e[t] : t && k(e[t]?.default) ? e[t].default : e;
 }
-var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt") || k(I.PreviewPrompt, "PreviewPrompt"), M = k(s, "Collapsible") || k(I.Collapsible, "Collapsible"), N = k(c, "Feedback") || k(I.Feedback, "Feedback"), P = o, F = P.default, I = F && typeof F == "object" ? F : P, { translator: L } = E, R = h("@pie-ui:categorize"), z = "choices-board", B = 250, V = class extends i.Component {
+var j = A(u, "UiLayout") || A(L.UiLayout, "UiLayout"), M = A(l, "PreviewPrompt") || A(L.PreviewPrompt, "PreviewPrompt"), N = A(s, "Collapsible") || A(L.Collapsible, "Collapsible"), P = A(c, "Feedback") || A(L.Feedback, "Feedback"), F = o, I = F.default, L = I && typeof I == "object" ? I : F, { translator: R } = D, z = h("@pie-ui:categorize"), B = "choices-board", V = 250, H = class extends i.Component {
 	static propTypes = { children: m.node };
 	containerRef = i.createRef();
 	componentDidMount() {
 		this.containerRef.current && a(this.containerRef.current);
 	}
 	render() {
-		return /* @__PURE__ */ w("div", {
+		return /* @__PURE__ */ T("div", {
 			ref: this.containerRef,
 			children: this.props.children
 		});
 	}
-}, H = class extends i.Component {
+}, U = class extends i.Component {
 	static propTypes = {
 		model: m.object,
 		session: m.shape({ answers: m.arrayOf(m.shape({
@@ -58,19 +59,19 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 		};
 	}
 	removeChoice = (e) => {
-		R("[removeChoice]: ", e);
+		z("[removeChoice]: ", e);
 		let { onAnswersChange: t, session: n } = this.props;
-		t(x(e.id, e.categoryId, e.choiceIndex, n.answers));
+		t(S(e.id, e.categoryId, e.choiceIndex, n.answers));
 	};
 	dropChoice = (e, t) => {
 		let { session: n, onAnswersChange: r, model: i } = this.props, { maxChoicesPerCategory: a = 0 } = i || {}, { answers: o = [] } = n || {}, s;
-		t ? R("[dropChoice] category: ", t.categoryId, "choice: ", t) : R("[dropChoice] category: ", void 0, "choice: ", void 0);
+		t ? z("[dropChoice] category: ", t.categoryId, "choice: ", t) : z("[dropChoice] category: ", void 0, "choice: ", void 0);
 		let c = o.find((t) => t.category === e);
-		t && a === 1 && c && c.choices && c.choices.length === 1 ? (s = b(t.id, t.categoryId, e, t.choiceIndex, o), s = x(c.choices[0], e, 0, s)) : t && a > 1 && c && c.choices && c.choices.length === a ? (s = t.categoryId ? b(t.id, t.categoryId, t.categoryId, t.choiceIndex, o) : x(t.id, t.categoryId, t.choiceIndex, o), this.setState({ showMaxChoiceAlert: !0 })) : a !== 0 && c && c.choices && c.choices.length > a ? (s = o, this.setState({ showMaxChoiceAlert: !0 })) : s = t ? b(t.id, t.categoryId, e, t.choiceIndex, o) : this.removeChoice(e), t && r(s);
+		t && a === 1 && c && c.choices && c.choices.length === 1 ? (s = x(t.id, t.categoryId, e, t.choiceIndex, o), s = S(c.choices[0], e, 0, s)) : t && a > 1 && c && c.choices && c.choices.length === a ? (s = t.categoryId ? x(t.id, t.categoryId, t.categoryId, t.choiceIndex, o) : S(t.id, t.categoryId, t.choiceIndex, o), this.setState({ showMaxChoiceAlert: !0 })) : a !== 0 && c && c.choices && c.choices.length > a ? (s = o, this.setState({ showMaxChoiceAlert: !0 })) : s = t ? x(t.id, t.categoryId, e, t.choiceIndex, o) : this.removeChoice(e), t && r(s);
 	};
 	UNSAFE_componentWillReceiveProps(e) {
 		let { model: t } = this.props, { model: n } = e;
-		t.note && t.language && t.language !== n.language && t.note === L.t("common:commonCorrectAnswerWithAlternates", { lng: t.language }) && (t.note = L.t("common:commonCorrectAnswerWithAlternates", { lng: n.language })), this.setState({ showCorrect: !1 });
+		t.note && t.language && t.language !== n.language && t.note === R.t("common:commonCorrectAnswerWithAlternates", { lng: t.language }) && (t.note = R.t("common:commonCorrectAnswerWithAlternates", { lng: n.language })), this.setState({ showCorrect: !1 });
 	}
 	toggleShowCorrect = () => this.setState({ showCorrect: !this.state.showCorrect }, () => {
 		this.props.onShowCorrectToggle();
@@ -95,46 +96,46 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 	};
 	existAlternateResponse = (e) => e?.some((e) => e.alternateResponses?.length > 0);
 	render() {
-		let { model: e, session: r, selectedItem: a, onSelectClick: o, onPlacementClick: s } = this.props, { showCorrect: c, showMaxChoiceAlert: l } = this.state, { choicesPosition: u, extraCSSRules: d, note: m, showNote: h, env: g, language: _, maxChoicesPerCategory: b, autoplayAudioEnabled: x, customAudioButton: S } = e, { mode: C, role: E } = g || {}, O = u || "above", k = {
-			flexDirection: this.getPositionDirection(O),
+		let { model: e, session: r, selectedItem: a, onSelectClick: o, onPlacementClick: s } = this.props, { showCorrect: c, showMaxChoiceAlert: l } = this.state, { choicesPosition: u, extraCSSRules: d, note: m, showNote: h, env: g, language: _, maxChoicesPerCategory: v, autoplayAudioEnabled: x, customAudioButton: S } = e, { mode: C, role: w } = g || {}, D = u || "above", k = {
+			flexDirection: this.getPositionDirection(D),
 			gap: "8px"
-		}, { categories: A, choices: M, correct: P } = y(e.categories, e.choices, c ? e.correctResponse : r.answers, e.correctResponse);
-		R("[render] disabled: ", e.disabled);
-		let { rowLabels: F, categoriesPerRow: I, correctResponse: z, fontSizeFactor: B } = e, V = A && Math.ceil(A.length / I) || 0, H = this.existAlternateResponse(z) || !1, U = (c || C === "view" && E === "instructor") && h && m && H, J = L.t("translation:categorize:limitMaxChoicesPerCategory", {
+		}, { categories: A, choices: j, correct: N } = b(e.categories, e.choices, c ? e.correctResponse : r.answers, e.correctResponse);
+		z("[render] disabled: ", e.disabled);
+		let { rowLabels: F, categoriesPerRow: I, correctResponse: L, fontSizeFactor: B } = e, V = A && Math.ceil(A.length / I) || 0, H = this.existAlternateResponse(L) || !1, U = (c || C === "view" && w === "instructor") && h && m && H, W = R.t("translation:categorize:limitMaxChoicesPerCategory", {
 			lng: e.language,
-			maxChoicesPerCategory: b
-		}), Y = L.t("common:warning", { lng: e.language }), X = L.t("common:cancel", { lng: e.language }), Z = e.rationale && (p(e.rationale) || f(e.rationale));
-		return /* @__PURE__ */ T(W, {
+			maxChoicesPerCategory: v
+		}), X = R.t("common:warning", { lng: e.language }), Z = R.t("common:cancel", { lng: e.language }), Q = e.rationale && (p(e.rationale) || f(e.rationale));
+		return /* @__PURE__ */ E(G, {
 			extraCSSRules: d,
 			id: "main-container",
 			fontSizeFactor: B,
 			children: [
-				e.teacherInstructions && (p(e.teacherInstructions) || f(e.teacherInstructions)) && /* @__PURE__ */ w(i.Fragment, { children: /* @__PURE__ */ w(q, {
+				e.teacherInstructions && (p(e.teacherInstructions) || f(e.teacherInstructions)) && /* @__PURE__ */ T(i.Fragment, { children: /* @__PURE__ */ T(Y, {
 					labels: {
 						hidden: "Show Teacher Instructions",
 						visible: "Hide Teacher Instructions"
 					},
-					children: /* @__PURE__ */ w(j, { prompt: e.teacherInstructions })
+					children: /* @__PURE__ */ T(M, { prompt: e.teacherInstructions })
 				}) }),
-				e.prompt && /* @__PURE__ */ w(j, {
+				e.prompt && /* @__PURE__ */ T(M, {
 					prompt: e.prompt,
 					autoplayAudioEnabled: x,
 					customAudioButton: S
 				}),
-				/* @__PURE__ */ w(v, {
-					show: c || P === !1,
+				/* @__PURE__ */ T(y, {
+					show: c || N === !1,
 					toggled: c,
 					onToggle: this.toggleShowCorrect,
 					language: _
 				}),
-				/* @__PURE__ */ T(K, {
+				/* @__PURE__ */ T(q, { children: /* @__PURE__ */ E(J, {
 					style: k,
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ T("div", {
 						style: {
 							display: "flex",
 							flex: 1
 						},
-						children: /* @__PURE__ */ w(n, {
+						children: /* @__PURE__ */ T(n, {
 							model: e,
 							disabled: e.disabled,
 							categories: A,
@@ -145,42 +146,42 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 							onSelectClick: o,
 							onPlacementClick: s
 						})
-					}), /* @__PURE__ */ w(t, {
+					}), /* @__PURE__ */ T(t, {
 						disabled: e.disabled,
 						model: e,
-						choices: M,
-						choicePosition: O,
+						choices: j,
+						choicePosition: D,
 						onDropChoice: this.dropChoice,
 						onRemoveChoice: this.removeChoice,
-						correct: P,
+						correct: N,
 						selectedItem: a,
 						onSelectClick: o,
 						onPlacementClick: s
 					})]
-				}),
-				U && /* @__PURE__ */ w(G, { dangerouslySetInnerHTML: { __html: m } }),
-				Z && /* @__PURE__ */ w(q, {
+				}) }),
+				U && /* @__PURE__ */ T(K, { dangerouslySetInnerHTML: { __html: m } }),
+				Q && /* @__PURE__ */ T(Y, {
 					labels: {
 						hidden: "Show Rationale",
 						visible: "Hide Rationale"
 					},
-					children: /* @__PURE__ */ w(j, { prompt: e.rationale })
+					children: /* @__PURE__ */ T(M, { prompt: e.rationale })
 				}),
-				e.correctness && e.feedback && !c && /* @__PURE__ */ w(N, {
+				e.correctness && e.feedback && !c && /* @__PURE__ */ T(P, {
 					correctness: e.correctness,
 					feedback: e.feedback
 				}),
-				/* @__PURE__ */ w(D, {
-					title: Y,
-					text: J,
+				/* @__PURE__ */ T(O, {
+					title: X,
+					text: W,
 					open: l,
-					onCloseText: X,
+					onCloseText: Z,
 					onClose: () => this.setState({ showMaxChoiceAlert: !1 })
 				})
 			]
 		});
 	}
-}, U = class extends i.Component {
+}, W = class extends i.Component {
 	static propTypes = {
 		model: m.object,
 		session: m.shape({ answers: m.arrayOf(m.shape({
@@ -193,7 +194,7 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 		resumeMathObserver: m.func
 	};
 	constructor(e) {
-		super(e), this.uid = C.generateId(), this.state = {
+		super(e), this.uid = w.generateId(), this.state = {
 			activeDragItem: null,
 			isValidDrop: !1,
 			selectedItem: null
@@ -209,7 +210,7 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 	};
 	commitPlacement = (e, t) => {
 		if (this.categorizeRef) {
-			if (t === void 0 || t === z) {
+			if (t === void 0 || t === B) {
 				e.categoryId && this.categorizeRef.removeChoice && this.categorizeRef.removeChoice(e);
 				return;
 			}
@@ -258,7 +259,7 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 		let { selectedItem: t } = this.state;
 		t && (this.commitPlacement(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag());
 	};
-	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < B;
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < V;
 	onItemClick = (e) => {
 		this.isClickSoonAfterDragEnd() || (this.endAnyLiveKeyboardDrag(), this.toggleItemSelection(e));
 	};
@@ -270,7 +271,7 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 		if (!t) return null;
 		if (t.type === "choice") {
 			let r = n.choices?.find((e) => e.id === t.id);
-			if (r) return /* @__PURE__ */ w(e, {
+			if (r) return /* @__PURE__ */ T(e, {
 				id: r.id,
 				...r
 			}, r.id);
@@ -279,7 +280,7 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 	};
 	render() {
 		let { isValidDrop: e, selectedItem: t } = this.state, n = e ? null : void 0;
-		return /* @__PURE__ */ w(S, {
+		return /* @__PURE__ */ T(C, {
 			onDragStart: this.onDragStart,
 			onDragEnd: this.onDragEnd,
 			onDragCancel: this.onDragCancel,
@@ -289,29 +290,34 @@ var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt")
 				cancel: ["Escape"],
 				end: ["Space", "Enter"]
 			},
-			children: /* @__PURE__ */ T(C.Provider, {
+			modifiers: [v],
+			children: /* @__PURE__ */ E(w.Provider, {
 				value: this.uid,
-				children: [/* @__PURE__ */ w(H, {
+				children: [/* @__PURE__ */ T(U, {
 					ref: (e) => this.categorizeRef = e,
 					...this.props,
 					selectedItem: t,
 					onSelectClick: this.onItemClick,
 					onPlacementClick: this.onPlacementClick
-				}), /* @__PURE__ */ w(_, {
+				}), /* @__PURE__ */ T(_, {
 					dropAnimation: n,
-					children: /* @__PURE__ */ w(V, { children: this.renderDragOverlay() })
+					children: /* @__PURE__ */ T(H, { children: this.renderDragOverlay() })
 				})]
 			})
 		});
 	}
-}, W = g(A)({
+}, G = g(j)({
 	color: d.text(),
 	backgroundColor: d.background(),
 	position: "relative"
-}), G = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), K = g("div")(({ theme: e }) => ({
+}), K = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), q = g("div")(({ theme: e }) => ({
 	marginBottom: e.spacing(1),
+	maxWidth: "100%",
+	overflowX: "auto",
+	overflowY: "hidden"
+})), J = g("div")(() => ({
 	display: "flex",
-	flexDirection: "column"
-})), q = g(M)(({ theme: e }) => ({ paddingBottom: e.spacing(2) }));
+	minWidth: "min-content"
+})), Y = g(N)(({ theme: e }) => ({ paddingBottom: e.spacing(2) }));
 //#endregion
-export { H as Categorize, U as default };
+export { U as Categorize, W as default };