@pie-element/inline-dropdown 11.0.4-next.20261011174919 → 11.0.4

package/dist/author/main.js

@@ -4,83 +4,67 @@ import n from "./response-area.js";
 import r from "react";
 import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
 import a from "react-dom";
-import o from "prop-types";
-import { cloneDeep as s, isEmpty as c, isEqual as l, isUndefined as u, max as d, reduce as f } from "@pie-element/shared-lodash";
-import { color as p } from "@pie-lib/render-ui";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { styled as g } from "@mui/material/styles";
-import _, { ALL_PLUGINS as v, deleteInlineDropdownByIndex as y } from "@pie-lib/editable-html-tip-tap";
-import { AlertDialog as ee, InputContainer as b, layout as te, settings as x } from "@pie-lib/config-ui";
-import S from "@mui/material/Tooltip";
-import C from "@mui/material/Typography";
-import w from "@mui/material/Accordion";
-import ne from "@mui/material/AccordionSummary";
-import T from "@mui/material/AccordionDetails";
-import E from "@mui/icons-material/ExpandMore";
-import re from "@mui/icons-material/Info";
+import { cloneDeep as o, isEmpty as s, isEqual as c, isUndefined as l, max as u, reduce as d } from "@pie-element/shared-lodash";
+import { color as f } from "@pie-lib/render-ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { styled as h } from "@mui/material/styles";
+import g, { ALL_PLUGINS as ee, deleteInlineDropdownByIndex as _ } from "@pie-lib/editable-html-tip-tap";
+import { AlertDialog as te, InputContainer as v, layout as y, settings as b } from "@pie-lib/config-ui";
+import x from "@mui/material/Tooltip";
+import S from "@mui/material/Typography";
+import ne from "@mui/material/Accordion";
+import re from "@mui/material/AccordionSummary";
+import C from "@mui/material/AccordionDetails";
+import w from "@mui/icons-material/ExpandMore";
+import T from "@mui/icons-material/Info";
 //#region src/author/main.tsx
-var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
+var { toggle: E, Panel: D, dropdown: ie } = b, O = h(v)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), oe = g(b)(({ theme: e }) => ({
+})), ae = h(v)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(.5),
 	marginBottom: e.spacing(2)
-})), k = g(C)(({ theme: e }) => ({
+})), k = h(S)(({ theme: e }) => ({
 	fontSize: e.typography.fontSize + 2,
 	marginRight: e.spacing(1)
-})), se = g("span")(({ theme: e }) => ({
+})), oe = h("span")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	whiteSpace: "break-spaces",
-	color: p.disabled(),
+	color: f.disabled(),
 	padding: 0,
 	fontSize: e.typography.fontSize - 2,
 	lineHeight: 1
-})), A = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), j = g(T)({
+})), se = h("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), A = h(C)({
 	display: "block",
 	paddingTop: 0,
 	paddingBottom: 0
-}), M = g("div")(({ theme: e }) => ({
+}), j = h("div")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	marginBottom: e.spacing(1)
-})), N = g(S)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+})), M = h(x)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), P = g("div")(({ theme: e }) => ({
+} })), N = h("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), F = (e) => {
+})), P = (e) => {
 	let t = document.createElement("div");
 	return t.innerHTML = (e || "").trim(), t;
-}, I = class extends r.Component {
-	static propTypes = {
-		configuration: o.object.isRequired,
-		model: o.object.isRequired,
-		disableSidePanel: o.bool,
-		onModelChanged: o.func.isRequired,
-		onConfigurationChanged: o.func.isRequired,
-		imageSupport: o.shape({
-			add: o.func.isRequired,
-			delete: o.func.isRequired
-		}),
-		uploadSoundSupport: o.shape({
-			add: o.func.isRequired,
-			delete: o.func.isRequired
-		})
-	};
+}, F = class extends r.Component {
 	state = { warning: { open: !1 } };
 	componentDidMount() {
 		let { model: { choices: e } } = this.props;
-		this.setState({ respAreaChoices: s(e) });
+		this.setState({ respAreaChoices: o(e) });
 	}
 	UNSAFE_componentWillReceiveProps(e) {
 		let t = {};
-		(!l(e.model.choices, this.props.model.choices) || !l(e.model.choices, this.state.respAreaChoices)) && (t.respAreaChoices = s(e.model.choices)), c(t) || this.setState(t);
+		(!c(e.model.choices, this.props.model.choices) || !c(e.model.choices, this.state.respAreaChoices)) && (t.respAreaChoices = o(e.model.choices)), s(t) || this.setState(t);
 	}
 	componentDidUpdate() {
 		i(a.findDOMNode(this));
@@ -120,31 +104,31 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 		} });
 	};
 	validateResponseAreaClose = (e, t, n, r, i) => {
-		let { respAreaChoices: a } = this.state, o = e.attrs.index, s = a[o] || [];
+		let a = this.state.respAreaChoices, o = e.attrs.index, s = a[o] || [];
 		if (!(s.length < 2 || !s.find((e) => e.correct))) {
 			r();
 			return;
 		}
 		n._holdInlineDropdownToolbarIndex = o, this.onCheck(() => {
-			delete n._holdInlineDropdownToolbarIndex, y(n, o, t), r();
+			delete n._holdInlineDropdownToolbarIndex, _(n, o, t), r();
 		}, i);
 	};
 	onChange = (e) => {
-		let { respAreaChoices: t } = this.state, n = F(e), r = n.querySelectorAll("[data-type=\"inline_dropdown\"]"), i = {};
+		let t = this.state.respAreaChoices, n = P(e), r = n.querySelectorAll("[data-type=\"inline_dropdown\"]"), i = {};
 		r.forEach((e) => {
 			i[e.dataset.index] = e.dataset.value || "";
 		});
-		let a = f(t, (e, n, r) => (u(i[r]) || (e[r] = t[r]), e), {}), o = {};
+		let a = d(t, (e, n, r) => (l(i[r]) || (e[r] = t[r]), e), {}), s = {};
 		r.forEach((e, t) => {
 			let n = a[e.dataset.index];
-			n && (o[t] = n), e.dataset.index = t;
+			n && (s[t] = n), e.dataset.index = `${t}`;
 		}), this.onModelChange({
-			choices: s(o),
+			choices: o(s),
 			slateMarkup: n.innerHTML
 		});
 	};
 	onAddChoice = (e, t, n) => {
-		let { respAreaChoices: r } = this.state, { maxResponseAreaChoices: i } = this.props.configuration, a = (e) => this.setState({ warning: {
+		let r = this.state.respAreaChoices, { maxResponseAreaChoices: i } = this.props.configuration, a = (e) => this.setState({ warning: {
 			open: !0,
 			text: e,
 			onClose: void 0,
@@ -162,39 +146,39 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 		}
 		if (n >= 0 && r[e]?.[n]) r[e][n].label = t;
 		else {
-			let n = r[e] && d(r[e].map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
+			let n = r[e] && u(r[e].map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
 			r[e].push({
 				label: t,
 				value: `${n + 1}`,
 				correct: !1
 			});
 		}
-		this.onModelChange({ choices: s(r) });
+		this.onModelChange({ choices: o(r) });
 	};
 	onRemoveChoice = (e, t) => {
-		let { respAreaChoices: n } = this.state;
-		n[e].splice(t, 1), this.onModelChange({ choices: s(n) });
+		let n = this.state.respAreaChoices;
+		n[e].splice(t, 1), this.onModelChange({ choices: o(n) });
 	};
 	onSelectChoice = (e, t) => {
-		let { respAreaChoices: n } = this.state;
+		let n = this.state.respAreaChoices;
 		n[e] = n[e].map((e, n) => ({
 			...e,
 			correct: n === t
-		})), this.onModelChange({ choices: s(n) });
+		})), this.onModelChange({ choices: o(n) });
 	};
 	render() {
-		let { warning: i } = this.state, { model: a, configuration: o, onConfigurationChanged: s, imageSupport: c, uploadSoundSupport: l } = this.props, { baseInputConfiguration: u = {}, choiceRationale: d = {}, contentDimensions: f = {}, lockChoiceOrder: p = {}, maxResponseAreas: g, maxImageWidth: y = {}, maxImageHeight: b = {}, partialScoring: x = {}, prompt: S = {}, rationale: C = {}, settingsPanelDisabled: T, spellCheck: F = {}, teacherInstructions: I = {}, template: ce = {}, withRubric: L = {}, mathMlOptions: R = {}, language: z = {}, languageChoices: B = {}, responseAreaInputConfiguration: V = {} } = o || {}, { choiceRationaleEnabled: H, choices: U, errors: W, extraCSSRules: le, promptEnabled: ue, rationaleEnabled: de, spellCheckEnabled: G, teacherInstructionsEnabled: fe, toolbarEditorPosition: pe } = a || {}, { prompt: K, rationale: q, responseAreasError: J, responseAreaChoicesError: me, teacherInstructions: Y } = W || {}, X = y && y.prompt, Z = b && b.prompt, he = () => (Object.keys(U) || []).map((e, t) => /* @__PURE__ */ m(A, { children: /* @__PURE__ */ h(w, {
+		let { warning: i } = this.state, { model: a, configuration: o, onConfigurationChanged: s, imageSupport: c, uploadSoundSupport: l } = this.props, { baseInputConfiguration: u = {}, choiceRationale: d = {}, contentDimensions: f = {}, lockChoiceOrder: h = {}, maxResponseAreas: _, maxImageWidth: v = {}, maxImageHeight: b = {}, partialScoring: x = {}, prompt: S = {}, rationale: C = {}, settingsPanelDisabled: P, spellCheck: F = {}, teacherInstructions: I = {}, template: ce = {}, withRubric: L = {}, mathMlOptions: R = {}, language: z = {}, languageChoices: B = {}, responseAreaInputConfiguration: V = {} } = o || {}, { choiceRationaleEnabled: H, choices: U, errors: W, promptEnabled: le, rationaleEnabled: ue, spellCheckEnabled: G, teacherInstructionsEnabled: de, toolbarEditorPosition: fe } = a || {}, { prompt: K, rationale: q, responseAreasError: J, responseAreaChoicesError: pe, teacherInstructions: Y } = W || {}, X = v && v.prompt, Z = b && b.prompt, me = () => (Object.keys(U) || []).map((e, t) => /* @__PURE__ */ p(se, { children: /* @__PURE__ */ m(ne, {
 			slotProps: { transition: { timeout: {
 				enter: 225,
 				exit: 195
 			} } },
-			children: [/* @__PURE__ */ m(ne, {
-				expandIcon: /* @__PURE__ */ m(E, {}),
-				children: /* @__PURE__ */ m(k, {
+			children: [/* @__PURE__ */ p(re, {
+				expandIcon: /* @__PURE__ */ p(w, {}),
+				children: /* @__PURE__ */ p(k, {
 					component: "div",
 					children: `Rationale for response area #${t + 1}`
 				})
-			}), /* @__PURE__ */ m(j, { children: (U[e] || []).map((t) => /* @__PURE__ */ h(r.Fragment, { children: [/* @__PURE__ */ m(se, { dangerouslySetInnerHTML: { __html: `${C.label} for ${t.label} (${t.correct ? "correct" : "incorrect"})` } }), /* @__PURE__ */ m(oe, { children: /* @__PURE__ */ m(_, {
+			}), /* @__PURE__ */ p(A, { children: (U[e] || []).map((t) => /* @__PURE__ */ m(r.Fragment, { children: [/* @__PURE__ */ p(oe, { dangerouslySetInnerHTML: { __html: `${C.label} for ${t.label} (${t.correct ? "correct" : "incorrect"})` } }), /* @__PURE__ */ p(ae, { children: /* @__PURE__ */ p(g, {
 				markup: t.rationale || "",
 				spellCheck: G,
 				pluginProps: $(C?.inputConfiguration),
@@ -203,48 +187,48 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 					rationale: n
 				}),
 				imageSupport: c,
-				maxImageWidth: y && y.rationale || X,
+				maxImageWidth: v && v.rationale || X,
 				maxImageHeight: b && b.rationale || Z,
 				uploadSoundSupport: l,
 				mathMlOptions: R
 			}) })] }, t.label)) })]
-		}) }, e)), Q = { position: pe === "top" ? "top" : "bottom" }, ge = e(o), _e = {
-			partialScoring: x.settings && D(x.label),
-			lockChoiceOrder: p.settings && D(p.label),
-			"language.enabled": z.settings && D(z.label, !0),
-			language: z.settings && z.enabled && ae(B.label, B.options)
-		}, ve = {
-			teacherInstructionsEnabled: I.settings && D(I.label),
-			rationaleEnabled: C.settings && D(C.label),
-			choiceRationaleEnabled: d.settings && D(d.label),
-			promptEnabled: S.settings && D(S.label),
-			spellCheckEnabled: F.settings && D(F.label),
-			rubricEnabled: L?.settings && D(L?.label)
+		}) }, e)), Q = { position: fe === "top" ? "top" : "bottom" }, he = e(o), ge = {
+			partialScoring: x.settings && E(x.label),
+			lockChoiceOrder: h.settings && E(h.label),
+			"language.enabled": z.settings && E(z.label, !0),
+			language: z.settings && z.enabled && ie(B.label, B.options)
+		}, _e = {
+			teacherInstructionsEnabled: I.settings && E(I.label),
+			rationaleEnabled: C.settings && E(C.label),
+			choiceRationaleEnabled: d.settings && E(d.label),
+			promptEnabled: S.settings && E(S.label),
+			spellCheckEnabled: F.settings && E(F.label),
+			rubricEnabled: L?.settings && E(L?.label)
 		}, $ = (e = {}) => ({
 			...u,
 			...e
 		});
-		return /* @__PURE__ */ h(te.ConfigLayout, {
+		return /* @__PURE__ */ m(y.ConfigLayout, {
 			extraCSSRules: {
 				names: ["red", "blue"],
 				rules: "\n      .red {\n        color: red !important;\n      }\n\n      .blue {\n        color: blue !important;\n      }\n    "
 			},
 			dimensions: f,
-			hideSettings: T,
-			settings: /* @__PURE__ */ m(ie, {
+			hideSettings: P,
+			settings: /* @__PURE__ */ p(D, {
 				model: a,
 				configuration: o,
 				onChangeModel: (e) => this.onModelChange(e),
 				onChangeConfiguration: (e) => s(e, !0),
 				groups: {
-					Settings: _e,
-					Properties: ve
+					Settings: ge,
+					Properties: _e
 				}
 			}),
 			children: [
-				fe && /* @__PURE__ */ h(O, {
+				de && /* @__PURE__ */ m(O, {
 					label: I.label,
-					children: [/* @__PURE__ */ m(_, {
+					children: [/* @__PURE__ */ p(g, {
 						markup: a.teacherInstructions || "",
 						onChange: this.onTeacherInstructionsChanged,
 						imageSupport: c,
@@ -253,16 +237,16 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 						toolbarOpts: Q,
 						pluginProps: $(I?.inputConfiguration),
 						spellCheck: G,
-						maxImageWidth: y && y.teacherInstructions || X,
+						maxImageWidth: v && v.teacherInstructions || X,
 						maxImageHeight: b && b.teacherInstructions || Z,
 						uploadSoundSupport: l,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: R
-					}), Y && /* @__PURE__ */ m(P, { children: Y })]
+					}), Y && /* @__PURE__ */ p(N, { children: Y })]
 				}),
-				ue && /* @__PURE__ */ h(O, {
+				le && /* @__PURE__ */ m(O, {
 					label: S.label,
-					children: [/* @__PURE__ */ m(_, {
+					children: [/* @__PURE__ */ p(g, {
 						markup: a.prompt,
 						onChange: this.onPromptChanged,
 						imageSupport: c,
@@ -277,27 +261,27 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 						uploadSoundSupport: l,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: R
-					}), K && /* @__PURE__ */ m(P, { children: K })]
+					}), K && /* @__PURE__ */ p(N, { children: K })]
 				}),
-				/* @__PURE__ */ h(M, { children: [/* @__PURE__ */ m(k, {
+				/* @__PURE__ */ m(j, { children: [/* @__PURE__ */ p(k, {
 					component: "div",
 					children: "Define Template, Choices, and Correct Responses"
-				}), /* @__PURE__ */ m(N, {
+				}), /* @__PURE__ */ p(M, {
 					disableFocusListener: !0,
 					disableTouchListener: !0,
 					placement: "right",
-					title: ge,
-					children: /* @__PURE__ */ m(re, {
+					title: he,
+					children: /* @__PURE__ */ p(T, {
 						fontSize: "small",
 						color: "primary"
 					})
 				})] }),
-				/* @__PURE__ */ m(n, {
+				/* @__PURE__ */ p(n, {
 					responseAreasError: J,
-					responseAreaChoicesError: me,
+					responseAreaChoicesError: pe,
 					editableHtmlProps: {
 						pluginProps: $(ce?.inputConfiguration),
-						activePlugins: v,
+						activePlugins: ee,
 						toolbarOpts: { position: "top" },
 						extraCSSRules: {
 							names: ["red", "blue"],
@@ -306,13 +290,13 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 						responseAreaProps: {
 							type: "inline-dropdown",
 							options: { duplicates: !0 },
-							maxResponseAreas: g,
+							maxResponseAreas: _,
 							onToolbarCloseRequest: ([e, t], n, r, i) => {
 								this.validateResponseAreaClose(e, t, n, r, i);
 							},
 							respAreaToolbar: (e, n, r) => {
-								let [i, a] = e, { respAreaChoices: o } = this.state;
-								return (e) => /* @__PURE__ */ m(t, {
+								let [i, a] = e, o = this.state.respAreaChoices;
+								return (e) => /* @__PURE__ */ p(t, {
 									...e,
 									onAddChoice: this.onAddChoice,
 									onRemoveChoice: (e) => this.onRemoveChoice(i.attrs.index, e),
@@ -343,10 +327,10 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 						mathMlOptions: R
 					}
 				}),
-				H && he(),
-				de && /* @__PURE__ */ h(O, {
+				H && me(),
+				ue && /* @__PURE__ */ m(O, {
 					label: C.label,
-					children: [/* @__PURE__ */ m(_, {
+					children: [/* @__PURE__ */ p(g, {
 						markup: a.rationale || "",
 						onChange: this.onRationaleChanged,
 						imageSupport: c,
@@ -354,14 +338,14 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 						toolbarOpts: Q,
 						pluginProps: $(C?.inputConfiguration),
 						spellCheck: G,
-						maxImageWidth: y && y.rationale || X,
+						maxImageWidth: v && v.rationale || X,
 						maxImageHeight: b && b.rationale || Z,
 						uploadSoundSupport: l,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: R
-					}), q && /* @__PURE__ */ m(P, { children: q })]
+					}), q && /* @__PURE__ */ p(N, { children: q })]
 				}),
-				/* @__PURE__ */ m(ee, {
+				/* @__PURE__ */ p(te, {
 					open: i.open,
 					title: "Warning",
 					text: i.text,
@@ -376,4 +360,4 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { I as Main, I as default };
+export { F as Main, F as default };