@pie-element/explicit-constructed-response 11.4.0-beta.7 → 12.0.0-next.20261002100925

package/author.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/configure.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/controller.js

@@ -0,0 +1 @@
+export * from './dist/controller/index.js';

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,4 @@
+//#region \0rolldown/runtime.js
+var e = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports);
+//#endregion
+export { e as __commonJSMin };

package/dist/author/alternateResponses.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/alternateResponses.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 class AlternateResponses extends React.Component {
+    static propTypes: {
+        choicesErrors: PropTypes.Requireable<object>;
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onLengthChange: PropTypes.Validator<(...args: any[]) => any>;
+        maxLengthPerChoiceEnabled: PropTypes.Validator<boolean>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        pluginProps: PropTypes.Requireable<object>;
+    };
+    state: {
+        maxLengthPerChoice: any;
+    };
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidMount(): void;
+    updateChoicesIfNeeded: any;
+    getRemainingChoices: any;
+    onChoiceChanged: any;
+    onChoiceRemoved: any;
+    onSectionSelect: any;
+    onLengthChanged: any;
+    render(): React.JSX.Element;
+}
+export default AlternateResponses;

package/dist/author/alternateResponses.js

@@ -0,0 +1,113 @@
+import { AlternateSection as e } from "./alternateSection.js";
+import t from "react";
+import n from "prop-types";
+import { cloneDeep as r, isEqual as i, map as a, reduce as o } from "@pie-element/shared-lodash";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/author/alternateResponses.tsx
+var l = class extends t.Component {
+	static propTypes = {
+		choicesErrors: n.object,
+		model: n.object.isRequired,
+		onChange: n.func.isRequired,
+		onLengthChange: n.func.isRequired,
+		maxLengthPerChoiceEnabled: n.bool.isRequired,
+		spellCheck: n.bool,
+		pluginProps: n.object
+	};
+	state = { maxLengthPerChoice: r(this.props.model.maxLengthPerChoice) };
+	UNSAFE_componentWillReceiveProps(e) {
+		this.updateChoicesIfNeeded(e);
+	}
+	componentDidMount() {
+		this.updateChoicesIfNeeded(this.props);
+	}
+	updateChoicesIfNeeded = (e) => {
+		if (!this.state.choices || !i(this.state.choices, e.model.choices) || !i(e.model.choices, this.props.model.choices) || this.state.values && Object.keys(this.state.values).length !== Object.keys(this.props.model.choices).length || e.maxLengthPerChoiceEnabled !== this.props.maxLengthPerChoiceEnabled) {
+			let { choices: t, maxLengthPerChoice: n } = e.model, i = o(t, (t, n, r) => (n && (e.maxLengthPerChoiceEnabled || n.length > 1) && (t[r] = n[0]), t), {});
+			this.setState({
+				choices: e.model.choices,
+				values: i,
+				maxLengthPerChoice: r(n)
+			});
+		}
+	};
+	getRemainingChoices = (e) => {
+		let { choices: t } = this.state;
+		return o(t, (t, n, r) => (n && n.length === 1 && !e && t.push({
+			label: n[0].label,
+			value: r
+		}), t), []);
+	};
+	onChoiceChanged = (e, t) => {
+		let { onChange: n } = this.props, { choices: r } = this.state, i = r[t] || [], a = !i.find((t) => t.value === e.value), o = i.reduce((t, n) => {
+			let r = n.value === e.value ? e : n;
+			return t.push(r), t;
+		}, []);
+		a && o.push(e), n({
+			...r,
+			[t]: o
+		});
+	};
+	onChoiceRemoved = (e, t) => {
+		let { onChange: n } = this.props, { choices: r } = this.state, i = (r[t] || []).reduce((t, n) => (n.value === e || t.push(n), t), []);
+		n({
+			...r,
+			[t]: i
+		});
+	};
+	onSectionSelect = (e, t) => {
+		let { onChange: n } = this.props, { choices: r, values: i } = this.state;
+		r[t] && r[t].length > 1 ? e || n({
+			...r,
+			[t]: [r[t][0]]
+		}) : this.setState({
+			choices: {
+				...r,
+				[t]: [...r[t], {
+					label: "",
+					value: "1"
+				}]
+			},
+			values: {
+				...i,
+				[t]: r[t][0]
+			}
+		});
+	};
+	onLengthChanged = (e, t) => {
+		let { model: n, onLengthChange: r } = this.props, { maxLengthPerChoice: i } = n;
+		i[t] = e, r(i);
+	};
+	render() {
+		let { choices: t } = this.state, { model: { maxLengthPerChoice: n, maxLengthPerChoiceEnabled: r }, spellCheck: i, choicesErrors: o, pluginProps: l } = this.props;
+		return /* @__PURE__ */ c("div", { children: [a(t, (t, a) => {
+			if (t && (r || t.length > 1)) {
+				let c = this.state.values[a];
+				return /* @__PURE__ */ s(e, {
+					value: c && c.value,
+					errors: o && o[a],
+					onSelect: (e) => this.onSectionSelect(e, a),
+					choiceChanged: (e) => this.onChoiceChanged(e, a),
+					choiceRemoved: (e) => this.onChoiceRemoved(e, a),
+					lengthChanged: (e) => this.onLengthChanged(e, a),
+					selectChoices: [c],
+					choices: t,
+					maxLength: n[a],
+					showMaxLength: r,
+					spellCheck: i,
+					pluginProps: l
+				}, a);
+			}
+		}), t && Object.keys(this.state.values).length !== Object.keys(t).length && /* @__PURE__ */ s(e, {
+			value: "",
+			onSelect: (e) => this.onSectionSelect(e, e.value),
+			choiceChanged: (e) => this.onChoiceChanged(e),
+			choiceRemoved: (e) => this.onChoiceRemoved(e),
+			selectChoices: this.getRemainingChoices(),
+			spellCheck: i,
+			pluginProps: l
+		})] });
+	}
+};
+//#endregion
+export { l as AlternateResponses, l as default };

package/dist/author/alternateSection.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/alternateSection.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 class Choice extends React.Component {
+    static propTypes: {
+        error: PropTypes.Requireable<string>;
+        markup: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onDelete: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Requireable<string>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        showMaxLength: PropTypes.Requireable<boolean>;
+        pluginProps: PropTypes.Requireable<object>;
+    };
+    state: {
+        value: any;
+    };
+    updateText: import("@pie-element/shared-lodash").CancelableFunction<any>;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    onChange: any;
+    onKeyDown: any;
+    render(): React.JSX.Element;
+}
+export declare class AlternateSection extends React.Component {
+    static propTypes: {
+        choices: PropTypes.Requireable<any[]>;
+        selectChoices: PropTypes.Validator<any[]>;
+        errors: PropTypes.Requireable<object>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        choiceChanged: PropTypes.Validator<(...args: any[]) => any>;
+        lengthChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        choiceRemoved: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Requireable<string>;
+        maxLength: PropTypes.Requireable<number>;
+        showMaxLength: PropTypes.Requireable<boolean>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        pluginProps: PropTypes.Requireable<object>;
+    };
+    state: {};
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidMount(): void;
+    updateChoicesIfNeeded: any;
+    handleSelect: any;
+    onAddChoice: any;
+    onChoiceChanged: any;
+    onRemoveChoice: any;
+    getChoicesMaxLength: any;
+    changeLength: any;
+    render(): React.JSX.Element;
+}
+export default AlternateSection;

package/dist/author/alternateSection.js

@@ -0,0 +1,214 @@
+import { decodeHTML as e, getAdjustedLength as t, stripHtmlTags as n } from "./markupUtils.js";
+import r from "react";
+import i from "prop-types";
+import { debounce as a, isEqual as o, max as s } from "@pie-element/shared-lodash";
+import { color as c } from "@pie-lib/render-ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { styled as d } from "@mui/material/styles";
+import f from "@pie-lib/editable-html-tip-tap";
+import p from "@mui/material/Button";
+import m from "@mui/icons-material/Delete";
+import h from "@mui/material/IconButton";
+import g from "@mui/material/MenuItem";
+import _ from "@mui/material/Select";
+import v from "@mui/material/TextField";
+//#region src/author/alternateSection.tsx
+var y = d("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), b = d("div")(({ theme: e }) => ({
+	alignItems: "flex-start",
+	flexDirection: "column",
+	display: "flex",
+	paddingTop: e.spacing(2.5),
+	"& > *": {
+		marginBottom: e.spacing(2.5),
+		width: "100%"
+	}
+})), x = d(f)(({ theme: e, hasError: t }) => ({
+	flex: "1",
+	marginRight: e.spacing(2.5),
+	...t && {
+		border: `2px solid ${e.palette.error.main}`,
+		borderRadius: "6px"
+	}
+})), S = d(h)(() => ({ "& svg": { fill: c.text() } })), C = d("div")({
+	alignItems: "flex-end",
+	display: "flex",
+	justifyContent: "space-between",
+	width: "100%"
+}), w = d("div")({
+	alignItems: "center",
+	display: "flex"
+}), T = d(v)(({ theme: e }) => ({
+	width: "230px",
+	marginRight: e.spacing(2.5),
+	"& .MuiInput-underline:before": { borderBottomColor: e.palette.divider },
+	"& .MuiInput-underline:hover:not(.Mui-disabled):before": { borderBottomColor: e.palette.text.primary },
+	"& .MuiInput-underline:after": { borderBottomColor: e.palette.primary.main }
+})), E = d("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(.5)
+})), D = d("div")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "space-between"
+}), O = class extends r.Component {
+	static propTypes = {
+		error: i.string,
+		markup: i.string,
+		onChange: i.func.isRequired,
+		onDelete: i.func.isRequired,
+		value: i.string,
+		spellCheck: i.bool,
+		showMaxLength: i.bool,
+		pluginProps: i.object
+	};
+	state = { value: this.props.markup };
+	updateText = a(this.props.onChange, 300);
+	UNSAFE_componentWillReceiveProps(e) {
+		e.markup && this.setState({ value: e.markup });
+	}
+	onChange = (e) => {
+		let t = n(e);
+		this.setState({ value: t }), this.updateText(t);
+	};
+	onKeyDown = (e) => {
+		if (e.key === "Enter") return !0;
+	};
+	render() {
+		let { value: e } = this.state, { onDelete: t, spellCheck: n, error: i, showMaxLength: a, pluginProps: o } = this.props, s = a ? {} : { maxLength: 25 };
+		return /* @__PURE__ */ u(r.Fragment, { children: [/* @__PURE__ */ u(D, { children: [/* @__PURE__ */ l(x, {
+			hasError: !!i,
+			disableUnderline: !0,
+			onChange: this.onChange,
+			onKeyDown: this.onKeyDown,
+			markup: e || "",
+			activePlugins: ["languageCharacters"],
+			pluginProps: o,
+			languageCharactersProps: [{ language: "spanish" }],
+			spellCheck: n,
+			autoWidthToolbar: !0,
+			toolbarOpts: {
+				minWidth: "auto",
+				isHidden: !!o?.characters?.disabled
+			},
+			...s
+		}), /* @__PURE__ */ l(S, {
+			"aria-label": "delete",
+			onClick: t,
+			size: "large",
+			children: /* @__PURE__ */ l(m, {})
+		})] }), i && /* @__PURE__ */ l(E, { children: i })] });
+	}
+}, k = class extends r.Component {
+	static propTypes = {
+		choices: i.array,
+		selectChoices: i.array.isRequired,
+		errors: i.object,
+		onSelect: i.func.isRequired,
+		choiceChanged: i.func.isRequired,
+		lengthChanged: i.func,
+		choiceRemoved: i.func.isRequired,
+		value: i.string,
+		maxLength: i.number,
+		showMaxLength: i.bool,
+		spellCheck: i.bool,
+		pluginProps: i.object
+	};
+	state = {};
+	UNSAFE_componentWillReceiveProps(e) {
+		this.updateChoicesIfNeeded(e);
+	}
+	componentDidMount() {
+		this.updateChoicesIfNeeded(this.props);
+	}
+	updateChoicesIfNeeded = (e) => {
+		(!this.state.choices || !o(e.choices, this.state.choices) || !o(e.choices, this.props.choices)) && this.setState({ choices: e.choices });
+	};
+	handleSelect = (e) => {
+		let { onSelect: t, selectChoices: n } = this.props, { value: r } = e.target;
+		t(n.find((e) => e.value === r));
+	};
+	onAddChoice = () => {
+		let { choices: e } = this.state;
+		if (e.length && e[e.length - 1].label !== "") {
+			let t = s(e.map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
+			this.setState({ choices: [...e, {
+				value: `${t + 1}`,
+				label: ""
+			}] });
+		}
+	};
+	onChoiceChanged = (n, r, i) => {
+		let { choiceChanged: a, lengthChanged: o, maxLength: s, choices: c } = this.props, l = c.map((t) => e(t.label || "").length);
+		l[i] = e(r).length;
+		let u = Math.max(...l);
+		a({
+			...n,
+			label: r
+		}), (u > s || u + 10 <= s) && o(t(u));
+	};
+	onRemoveChoice = (e) => {
+		let { choiceRemoved: t } = this.props;
+		t(e.value);
+	};
+	getChoicesMaxLength = () => {
+		let { choices: t } = this.state;
+		if (!t) return 1;
+		let n = t.map((t) => e(t.label || "").length);
+		return Math.max(...n);
+	};
+	changeLength = (e) => {
+		let { lengthChanged: t } = this.props, n = parseInt(e.target.value, 10), r = this.getChoicesMaxLength();
+		n && n >= r && n <= r + 10 && t(n);
+	};
+	render() {
+		let { selectChoices: t, maxLength: n, showMaxLength: r, value: i, spellCheck: a, errors: o, pluginProps: s } = this.props, { choices: c } = this.state, d = this.getChoicesMaxLength();
+		return /* @__PURE__ */ u(y, { children: [
+			/* @__PURE__ */ u(C, { children: [/* @__PURE__ */ u(_, {
+				variant: "standard",
+				displayEmpty: !0,
+				onChange: this.handleSelect,
+				value: i || "",
+				readOnly: r,
+				MenuProps: { transitionDuration: {
+					enter: 225,
+					exit: 195
+				} },
+				children: [/* @__PURE__ */ l(g, {
+					value: "",
+					children: /* @__PURE__ */ l("em", { children: i ? "Remove selection" : "Select a response" })
+				}), t.map((t, n) => /* @__PURE__ */ l(g, {
+					value: t?.value,
+					children: e(t?.label)
+				}, n))]
+			}), c && c.length > 0 && /* @__PURE__ */ u(w, { children: [n && r && /* @__PURE__ */ l(T, {
+				variant: "standard",
+				label: "Maximum length (characters)",
+				type: "number",
+				inputProps: {
+					min: d,
+					max: d + 10
+				},
+				value: n,
+				onChange: this.changeLength
+			}), /* @__PURE__ */ l(p, {
+				variant: "contained",
+				color: "primary",
+				onClick: this.onAddChoice,
+				children: "Add"
+			})] })] }),
+			o && o[0] && /* @__PURE__ */ l(E, { children: o[0] }),
+			/* @__PURE__ */ l(b, { children: c && c.map((e, t) => t > 0 && /* @__PURE__ */ l(O, {
+				markup: e.label,
+				onChange: (n) => this.onChoiceChanged(e, n, t),
+				onDelete: () => this.onRemoveChoice(e),
+				spellCheck: a,
+				error: o && o[t],
+				showMaxLength: r,
+				pluginProps: s
+			}, t)) })
+		] });
+	}
+};
+//#endregion
+export { k as AlternateSection, k as default, O as Choice };

package/dist/author/defaults.d.ts

@@ -0,0 +1,186 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/defaults.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.
+ */
+declare const _default: {
+    model: {
+        choices: {};
+        displayType: string;
+        markup: string;
+        maxLengthPerChoiceEnabled: boolean;
+        playerSpellCheckEnabled: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        spellCheckEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+        responseAreaInputConfiguration: {};
+    };
+    configuration: {
+        baseInputConfiguration: {
+            h3: {
+                disabled: boolean;
+            };
+            html: {
+                disabled: boolean;
+            };
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        prompt: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        partialScoring: {
+            settings: boolean;
+            label: string;
+        };
+        rationale: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        settingsPanelDisabled: boolean;
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        editSource: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        playerSpellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        teacherInstructions: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        template: {
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+                h3: {
+                    disabled: boolean;
+                };
+                blockquote: {
+                    disabled: boolean;
+                };
+            };
+        };
+        maxLengthPerChoice: {
+            settings: boolean;
+            label: string;
+        };
+        maxResponseAreas: number;
+        maxImageWidth: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+        };
+        maxImageHeight: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+        };
+        withRubric: {
+            settings: boolean;
+            label: string;
+        };
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+        responseAreaInputConfiguration: {
+            inputConfiguration: {
+                characters: {
+                    disabled: boolean;
+                };
+            };
+        };
+        spanishButton: {
+            settings: boolean;
+            label: string;
+        };
+    };
+};
+export default _default;