@pie-element/multiple-choice 13.2.2-next.0 → 13.2.2-next.2

package/dist/author/index.js

@@ -1,8 +1,8 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/defaults.js";
-import t from "./main.js";
-import n from "./defaults.js";
-import r from "react";
-import { createRoot as i } from "react-dom/client";
+import e from "./main.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { defaults as i } from "@pie-element/shared-lodash";
 import a from "debug";
 import { DeleteImageEvent as o, DeleteSoundEvent as s, InsertImageEvent as c, InsertSoundEvent as l, ModelUpdatedEvent as u } from "@pie-element/shared-configure-events";
 import { choiceUtils as d } from "@pie-lib/config-ui";
@@ -21,36 +21,36 @@ var f = a("multiple-choice:configure"), p = (e, t = 0) => {
 		return e;
 	}
 	return e;
-}, m = (t, r) => {
-	let i = e(t, n.configuration);
+}, m = (e, n) => {
+	let r = i(e, t.configuration);
 	return {
-		configuration: i,
+		configuration: r,
 		model: {
-			...r,
-			choices: p(r && r.choices || [], i && i.answerChoiceCount)
+			...n,
+			choices: p(n && n.choices || [], r && r.answerChoiceCount)
 		}
 	};
-}, h = class e extends HTMLElement {
+}, h = class i extends HTMLElement {
 	static createDefaultModel = (e = {}) => {
-		let t = d.normalizeChoices({
-			...n.model,
+		let n = d.normalizeChoices({
+			...t.model,
 			...e,
 			choices: p(e && e.choices || [])
 		});
-		return t.choicesLayout = e.choicesLayout || e.verticalMode === !1 && "horizontal" || n.model.choicesLayout, t;
+		return n.choicesLayout = e.choicesLayout || e.verticalMode === !1 && "horizontal" || t.model.choicesLayout, n;
 	};
 	constructor() {
-		super(), this._root = null, this._reactContainer = null, this._model = e.createDefaultModel(), this._configuration = n.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+		super(), this._root = null, this._reactContainer = null, this._model = i.createDefaultModel(), this._configuration = t.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
 	}
-	set model(t) {
-		this._model = e.createDefaultModel(t), this._render();
+	set model(e) {
+		this._model = i.createDefaultModel(e), this._render();
 	}
 	set configuration(e) {
-		let t = m(e, this._model);
-		this.onModelChanged(t.model);
+		let n = m(e, this._model);
+		this.onModelChanged(n.model);
 		let r = {
-			...n.configuration,
-			...t.configuration
+			...t.configuration,
+			...n.configuration
 		};
 		this._configuration = r, r?.language?.enabled ? r?.languageChoices?.options?.length && (this._model.language = r?.languageChoices.options[0].value) : r.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
 			value: this._model.language,
@@ -88,7 +88,7 @@ var f = a("multiple-choice:configure"), p = (e, t = 0) => {
 	_render() {
 		f("_render - Starting render"), f("_render - Model:", this._model ? "present" : "missing"), f("_render - Configuration:", this._configuration ? "present" : "missing"), f("_render - Root exists:", !!this._root);
 		try {
-			let e = r.createElement(t, {
+			let t = n.createElement(e, {
 				model: this._model,
 				configuration: this._configuration,
 				onModelChanged: this.onModelChanged,
@@ -103,7 +103,7 @@ var f = a("multiple-choice:configure"), p = (e, t = 0) => {
 					delete: this.onDeleteSound.bind(this)
 				}
 			});
-			this._root || (f("_render - Creating React container"), this._reactContainer = document.createElement("div"), this._reactContainer.className = "pie-configure-wrapper", this.appendChild(this._reactContainer), f("_render - Creating new React root"), this._root = i(this._reactContainer), f("_render - React root created successfully")), f("_render - Calling root.render()"), this._root.render(e), f("_render - Render completed successfully");
+			this._root || (f("_render - Creating React container"), this._reactContainer = document.createElement("div"), this._reactContainer.className = "pie-configure-wrapper", this.appendChild(this._reactContainer), f("_render - Creating new React root"), this._root = r(this._reactContainer), f("_render - React root created successfully")), f("_render - Calling root.render()"), this._root.render(t), f("_render - Render completed successfully");
 		} catch (e) {
 			throw console.error("❌ [multiple-choice-configure] Render error:", e), console.error("Error stack:", e.stack), e;
 		}

package/dist/author/main.js

@@ -1,11 +1,11 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/merge.js";
-import { generateValidationMessage as t } from "./utils.js";
-import n from "react";
-import r from "prop-types";
-import { color as i } from "@pie-lib/render-ui";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { styled as s } from "@mui/material/styles";
-import c from "@mui/material/Box";
+import { generateValidationMessage as e } from "./utils.js";
+import t from "react";
+import n from "prop-types";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o } from "@mui/material/styles";
+import s from "@mui/material/Box";
+import { merge as c } from "@pie-element/shared-lodash";
 import l from "@pie-lib/editable-html-tip-tap";
 import { AlertDialog as u, ChoiceConfiguration as ee, InputContainer as d, choiceUtils as f, layout as te, settings as p } from "@pie-lib/config-ui";
 import m from "@mui/material/Button";
@@ -13,56 +13,56 @@ import h from "@mui/material/Tooltip";
 import g from "@mui/material/Typography";
 import ne from "@mui/icons-material/Info";
 //#region src/author/main.tsx
-var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ theme: e }) => ({
+var { Panel: re, toggle: _, radio: v, dropdown: y } = p, ie = 9, b = o(d)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), ae = s(d)(({ theme: e }) => ({
+})), ae = o(d)(({ theme: e }) => ({
 	flex: 1,
 	marginTop: e.spacing(1.5),
 	paddingTop: e.spacing(2),
 	marginLeft: e.spacing(3.5)
-})), oe = s(d)(({ theme: e }) => ({
+})), oe = o(d)(({ theme: e }) => ({
 	display: "flex",
 	flexDirection: "column",
 	marginBottom: e.spacing(1),
 	width: "100%"
-})), x = s(m)(({ theme: e }) => ({
+})), x = o(m)(({ theme: e }) => ({
 	marginTop: e.spacing(1),
 	float: "right"
-})), se = s(x)({
+})), se = o(x)({
 	cursor: "not-allowed",
 	pointerEvents: "all",
-	backgroundColor: i.disabled(),
-	"&:hover": { backgroundColor: i.disabled() },
-	"&:focus": { backgroundColor: i.disabled() }
-}), ce = s(c)({
+	backgroundColor: r.disabled(),
+	"&:hover": { backgroundColor: r.disabled() },
+	"&:focus": { backgroundColor: r.disabled() }
+}), ce = o(s)({
 	display: "flex",
 	alignItems: "center"
-}), le = s(g)(({ theme: e }) => ({
+}), le = o(g)(({ theme: e }) => ({
 	fontSize: e.typography.fontSize + 2,
 	marginRight: e.spacing(1)
-})), S = s(h)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+})), S = o(h)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), C = s("div")(({ theme: e }) => ({
+} })), C = o("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), w = (e) => {
-	let { model: n, configuration: r, onPromptChanged: i, onChoiceChanged: s, onRemoveChoice: c, onAddChoice: u, imageSupport: d, uploadSoundSupport: f, onChangeModel: p, onConfigurationChanged: m, onTeacherInstructionsChanged: h } = e, { addChoiceButton: g = {}, contentDimensions: w = {}, feedback: T = {}, deleteChoice: ue = {}, choiceMode: de = {}, choicePrefix: fe = {}, partialScoring: E = {}, lockChoiceOrder: D = {}, teacherInstructions: O = {}, studentInstructions: k = {}, rationale: A = {}, scoringType: j = {}, sequentialChoiceLabels: M = {}, settingsPanelDisabled: pe, choicesLayout: N, spellCheck: P = {}, gridColumns: me, maxImageWidth: F = {}, maxImageHeight: I = {}, prompt: L = {}, withRubric: R = {}, mathMlOptions: z = {}, language: B = {}, languageChoices: V = {} } = r || {}, { maxAnswerChoices: H } = r || {}, { limitChoicesNumber: he, teacherInstructionsEnabled: ge, rationaleEnabled: _e, feedbackEnabled: ve, promptEnabled: ye, spellCheckEnabled: U, choices: W, errors: be, toolbarEditorPosition: xe, extraCSSRules: Se } = n || {}, { answerChoices: G, choices: Ce, correctResponse: K, prompt: q, rationale: J, teacherInstructions: Y } = be || {}, we = W?.length ? Array.from({ length: W.length }, (e, t) => `${t + 1}`) : [], { baseInputConfiguration: Te = {} } = r, X = { position: xe === "top" ? "top" : "bottom" };
-	he && (H = b);
+})), ue = (t) => {
+	let { model: n, configuration: r, onPromptChanged: o, onChoiceChanged: s, onRemoveChoice: c, onAddChoice: u, imageSupport: d, uploadSoundSupport: f, onChangeModel: p, onConfigurationChanged: m, onTeacherInstructionsChanged: h } = t, { addChoiceButton: g = {}, contentDimensions: ue = {}, feedback: w = {}, deleteChoice: de = {}, choiceMode: T = {}, choicePrefix: fe = {}, partialScoring: E = {}, lockChoiceOrder: D = {}, teacherInstructions: O = {}, studentInstructions: k = {}, rationale: A = {}, scoringType: j = {}, sequentialChoiceLabels: M = {}, settingsPanelDisabled: pe, choicesLayout: N, spellCheck: P = {}, gridColumns: me, maxImageWidth: F = {}, maxImageHeight: I = {}, prompt: L = {}, withRubric: R = {}, mathMlOptions: z = {}, language: B = {}, languageChoices: V = {} } = r || {}, { maxAnswerChoices: H } = r || {}, { limitChoicesNumber: he, teacherInstructionsEnabled: ge, rationaleEnabled: _e, feedbackEnabled: ve, promptEnabled: ye, spellCheckEnabled: U, choices: W, errors: be, toolbarEditorPosition: xe, extraCSSRules: Se } = n || {}, { answerChoices: G, choices: Ce, correctResponse: K, prompt: q, rationale: J, teacherInstructions: Y } = be || {}, we = W?.length ? Array.from({ length: W.length }, (e, t) => `${t + 1}`) : [], { baseInputConfiguration: Te = {} } = r, X = { position: xe === "top" ? "top" : "bottom" };
+	he && (H = ie);
 	let Z = (e = {}) => ({
 		...Te,
 		...e
-	}), Ee = t(r), Q = F && F.prompt, $ = I && I.prompt, De = H && W?.length >= H ? `Only ${H} allowed maximum` : "", Oe = {
-		choiceMode: de.settings && v(de.label, ["checkbox", "radio"]),
+	}), Ee = e(r), Q = F && F.prompt, $ = I && I.prompt, De = H && W?.length >= H ? `Only ${H} allowed maximum` : "", Oe = {
+		choiceMode: T.settings && v(T.label, ["checkbox", "radio"]),
 		"sequentialChoiceLabels.enabled": M.settings && _(M.label, !0),
 		choicePrefix: fe.settings && v(fe.label, ["numbers", "letters"]),
 		partialScoring: E.settings && _(E.label),
 		lockChoiceOrder: D.settings && _(D.label),
-		feedbackEnabled: T.settings && _(T.label),
+		feedbackEnabled: w.settings && _(w.label),
 		choicesLayout: N.settings && y(N.label, [
 			"vertical",
 			"grid",
@@ -80,12 +80,12 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 		scoringType: j.settings && v(j.label, ["auto", "rubric"]),
 		rubricEnabled: R?.settings && _(R?.label)
 	};
-	return /* @__PURE__ */ o(te.ConfigLayout, {
-		dimensions: w,
+	return /* @__PURE__ */ a(te.ConfigLayout, {
+		dimensions: ue,
 		hideSettings: pe,
 		extraCSSRules: Se,
 		classes: {},
-		settings: /* @__PURE__ */ a(re, {
+		settings: /* @__PURE__ */ i(re, {
 			model: n,
 			onChangeModel: p,
 			configuration: r,
@@ -96,9 +96,9 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 			}
 		}),
 		children: [
-			ge && /* @__PURE__ */ o(ie, {
+			ge && /* @__PURE__ */ a(b, {
 				label: O.label,
-				children: [/* @__PURE__ */ a(l, {
+				children: [/* @__PURE__ */ i(l, {
 					markup: n.teacherInstructions || "",
 					onChange: h,
 					imageSupport: d,
@@ -113,13 +113,13 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 					uploadSoundSupport: f,
 					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 					mathMlOptions: z
-				}), Y && /* @__PURE__ */ a(C, { children: Y })]
+				}), Y && /* @__PURE__ */ i(C, { children: Y })]
 			}),
-			ye && /* @__PURE__ */ o(ie, {
+			ye && /* @__PURE__ */ a(b, {
 				label: L.label,
-				children: [/* @__PURE__ */ a(l, {
+				children: [/* @__PURE__ */ i(l, {
 					markup: n.prompt,
-					onChange: i,
+					onChange: o,
 					imageSupport: d,
 					nonEmpty: !1,
 					disableUnderline: !0,
@@ -132,22 +132,22 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 					uploadSoundSupport: f,
 					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 					mathMlOptions: z
-				}), q && /* @__PURE__ */ a(C, { children: q })]
+				}), q && /* @__PURE__ */ i(C, { children: q })]
 			}),
-			/* @__PURE__ */ o(ce, { children: [/* @__PURE__ */ a(le, {
+			/* @__PURE__ */ a(ce, { children: [/* @__PURE__ */ i(le, {
 				component: "div",
 				children: "Choices"
-			}), /* @__PURE__ */ a(S, {
+			}), /* @__PURE__ */ i(S, {
 				disableFocusListener: !0,
 				disableTouchListener: !0,
 				placement: "right",
 				title: Ee,
-				children: /* @__PURE__ */ a(ne, {
+				children: /* @__PURE__ */ i(ne, {
 					fontSize: "small",
 					color: "primary"
 				})
 			})] }),
-			W.map((e, t) => /* @__PURE__ */ o(oe, { children: [/* @__PURE__ */ a(ee, {
+			W.map((e, t) => /* @__PURE__ */ a(oe, { children: [/* @__PURE__ */ i(ee, {
 				index: t + 1,
 				useLetterOrdering: n.choicePrefix === "letters",
 				mode: n.choiceMode,
@@ -158,7 +158,7 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 				onDelete: () => c(t),
 				onChange: (e) => s(t, e),
 				allowFeedBack: ve,
-				allowDelete: ue.settings,
+				allowDelete: de.settings,
 				noLabels: !0,
 				pluginOpts: Z(r?.choices?.inputConfiguration),
 				toolbarOpts: X,
@@ -169,9 +169,9 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 				maxImageHeight: I && I.choices || $,
 				uploadSoundSupport: f,
 				mathMlOptions: z
-			}, t), _e && /* @__PURE__ */ o(ae, {
+			}, t), _e && /* @__PURE__ */ a(ae, {
 				label: A.label,
-				children: [/* @__PURE__ */ a(l, {
+				children: [/* @__PURE__ */ i(l, {
 					markup: e.rationale || "",
 					onChange: (n) => s(t, {
 						...e,
@@ -187,19 +187,19 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 					uploadSoundSupport: f,
 					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 					mathMlOptions: z
-				}), J?.[e.value] && /* @__PURE__ */ a(C, { children: J?.[e.value] })]
+				}), J?.[e.value] && /* @__PURE__ */ i(C, { children: J?.[e.value] })]
 			}, `rationale-${t}`)] }, `choice-${t}`)),
-			K && /* @__PURE__ */ a(C, { children: K }),
-			G && /* @__PURE__ */ a(C, { children: G }),
-			g.settings && /* @__PURE__ */ a(S, {
+			K && /* @__PURE__ */ i(C, { children: K }),
+			G && /* @__PURE__ */ i(C, { children: G }),
+			g.settings && /* @__PURE__ */ i(S, {
 				title: De,
-				children: H && W?.length >= H ? /* @__PURE__ */ a(se, {
+				children: H && W?.length >= H ? /* @__PURE__ */ i(se, {
 					variant: "contained",
 					color: "primary",
 					onClick: u,
 					disabled: !0,
 					children: g.label
-				}) : /* @__PURE__ */ a(x, {
+				}) : /* @__PURE__ */ i(x, {
 					variant: "contained",
 					color: "primary",
 					onClick: u,
@@ -208,16 +208,16 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 			})
 		]
 	});
-}, T = class extends n.Component {
+}, w = class extends t.Component {
 	static propTypes = {
-		model: r.object.isRequired,
-		configuration: r.object.isRequired,
-		disableSidePanel: r.bool,
-		onModelChanged: r.func.isRequired,
-		onConfigurationChanged: r.func.isRequired,
-		imageSupport: r.shape({
-			add: r.func.isRequired,
-			delete: r.func.isRequired
+		model: n.object.isRequired,
+		configuration: n.object.isRequired,
+		disableSidePanel: n.bool,
+		onModelChanged: n.func.isRequired,
+		onConfigurationChanged: n.func.isRequired,
+		imageSupport: n.shape({
+			add: n.func.isRequired,
+			delete: n.func.isRequired
 		})
 	};
 	state = { showWarning: !1 };
@@ -231,15 +231,15 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 	};
 	onAddChoice = () => {
 		let { model: e, configuration: t, onModelChanged: n } = this.props, { maxAnswerChoices: r } = t || {}, { limitChoicesNumber: i } = e || {};
-		i && (r = b), !(r && e.choices.length >= r) && (e.choices.push({
+		i && (r = ie), !(r && e.choices.length >= r) && (e.choices.push({
 			label: "",
 			value: f.firstAvailableIndex(e.choices.map((e) => e.value), 0),
 			feedback: { type: "none" }
 		}), n({ choices: e.choices }));
 	};
-	onChoiceChanged = (t, n) => {
-		let { model: r, onModelChanged: i } = this.props;
-		n.correct && r.choiceMode === "radio" && (r.choices = r.choices.map((t) => e({}, t, { correct: !1 }))), r.choices.splice(t, 1, n), i({ choices: r.choices });
+	onChoiceChanged = (e, t) => {
+		let { model: n, onModelChanged: r } = this.props;
+		t.correct && n.choiceMode === "radio" && (n.choices = n.choices.map((e) => c({}, e, { correct: !1 }))), n.choices.splice(e, 1, t), r({ choices: n.choices });
 	};
 	onPromptChanged = (e) => {
 		this.props.onModelChanged({ prompt: e });
@@ -266,13 +266,13 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 		}
 	};
 	render() {
-		let { configuration: { minAnswerChoices: e } = {} } = this.props, { showWarning: t } = this.state;
-		return /* @__PURE__ */ o(n.Fragment, { children: [/* @__PURE__ */ a(u, {
-			open: t,
+		let { configuration: { minAnswerChoices: e } = {} } = this.props, { showWarning: n } = this.state;
+		return /* @__PURE__ */ a(t.Fragment, { children: [/* @__PURE__ */ i(u, {
+			open: n,
 			title: "Warning",
 			text: `There can't be less than ${e || 0} choices.`,
 			onConfirm: () => this.setState({ showWarning: !1 })
-		}), /* @__PURE__ */ a(w, {
+		}), /* @__PURE__ */ i(ue, {
 			...this.props,
 			onChangeModel: this.onModelChanged,
 			onRemoveChoice: this.onRemoveChoice,
@@ -284,4 +284,4 @@ var { Panel: re, toggle: _, radio: v, dropdown: y } = p, b = 9, ie = s(d)(({ the
 	}
 };
 //#endregion
-export { T as default };
+export { w as default };