@pie-element/explicit-constructed-response 11.1.2-next.0 → 11.1.2-next.10

package/dist/author/alternateResponses.js

@@ -1,42 +1,39 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/map.js";
-import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import r from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/reduce.js";
-import i from "./alternateSection.js";
-import a from "react";
-import o from "prop-types";
+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 a.Component {
+var l = class extends t.Component {
 	static propTypes = {
-		choicesErrors: o.object,
-		model: o.object.isRequired,
-		onChange: o.func.isRequired,
-		onLengthChange: o.func.isRequired,
-		maxLengthPerChoiceEnabled: o.bool.isRequired,
-		spellCheck: o.bool,
-		pluginProps: o.object
+		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: e(this.props.model.maxLengthPerChoice) };
+	state = { maxLengthPerChoice: r(this.props.model.maxLengthPerChoice) };
 	UNSAFE_componentWillReceiveProps(e) {
 		this.updateChoicesIfNeeded(e);
 	}
 	componentDidMount() {
 		this.updateChoicesIfNeeded(this.props);
 	}
-	updateChoicesIfNeeded = (t) => {
-		if (!this.state.choices || !n(this.state.choices, t.model.choices) || !n(t.model.choices, this.props.model.choices) || this.state.values && Object.keys(this.state.values).length !== Object.keys(this.props.model.choices).length || t.maxLengthPerChoiceEnabled !== this.props.maxLengthPerChoiceEnabled) {
-			let { choices: n, maxLengthPerChoice: i } = t.model, a = r(n, (e, n, r) => (n && (t.maxLengthPerChoiceEnabled || n.length > 1) && (e[r] = n[0]), e), {});
+	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: t.model.choices,
-				values: a,
-				maxLengthPerChoice: e(i)
+				choices: e.model.choices,
+				values: i,
+				maxLengthPerChoice: r(n)
 			});
 		}
 	};
 	getRemainingChoices = (e) => {
 		let { choices: t } = this.state;
-		return r(t, (t, n, r) => (n && n.length === 1 && !e && t.push({
+		return o(t, (t, n, r) => (n && n.length === 1 && !e && t.push({
 			label: n[0].label,
 			value: r
 		}), t), []);
@@ -82,35 +79,35 @@ var l = class extends a.Component {
 		i[t] = e, r(i);
 	};
 	render() {
-		let { choices: e } = this.state, { model: { maxLengthPerChoice: n, maxLengthPerChoiceEnabled: r }, spellCheck: a, choicesErrors: o, pluginProps: l } = this.props;
-		return /* @__PURE__ */ c("div", { children: [t(e, (e, t) => {
-			if (e && (r || e.length > 1)) {
-				let c = this.state.values[t];
-				return /* @__PURE__ */ s(i, {
+		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[t],
-					onSelect: (e) => this.onSectionSelect(e, t),
-					choiceChanged: (e) => this.onChoiceChanged(e, t),
-					choiceRemoved: (e) => this.onChoiceRemoved(e, t),
-					lengthChanged: (e) => this.onLengthChanged(e, t),
+					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: e,
-					maxLength: n[t],
+					choices: t,
+					maxLength: n[a],
 					showMaxLength: r,
-					spellCheck: a,
+					spellCheck: i,
 					pluginProps: l
-				}, t);
+				}, a);
 			}
-		}), e && Object.keys(this.state.values).length !== Object.keys(e).length && /* @__PURE__ */ s(i, {
+		}), 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: a,
+			spellCheck: i,
 			pluginProps: l
 		})] });
 	}
 };
 //#endregion
-export { l as default };
+export { l as AlternateResponses, l as default };

package/dist/author/alternateSection.d.ts

@@ -22,7 +22,7 @@ export declare class Choice extends React.Component {
     state: {
         value: any;
     };
-    updateText: any;
+    updateText: import("@pie-element/shared-lodash").CancelableFunction<any>;
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
     onChange: any;
     onKeyDown: any;

package/dist/author/alternateSection.js

@@ -1,20 +1,19 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/debounce.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/max.js";
-import { decodeHTML as r, getAdjustedLength as i, stripHtmlTags as a } from "./markupUtils.js";
-import o from "react";
-import s from "prop-types";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { styled as u } from "@mui/material/styles";
-import d from "@pie-lib/editable-html-tip-tap";
-import f from "@mui/material/Button";
-import p from "@mui/icons-material/Delete";
-import m from "@mui/material/IconButton";
-import h from "@mui/material/MenuItem";
-import g from "@mui/material/Select";
-import _ from "@mui/material/TextField";
+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 v = u("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), y = u("div")(({ theme: e }) => ({
+var y = d("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), b = d("div")(({ theme: e }) => ({
 	alignItems: "flex-start",
 	flexDirection: "column",
 	display: "flex",
@@ -23,97 +22,97 @@ var v = u("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), y = u("di
 		marginBottom: e.spacing(2.5),
 		width: "100%"
 	}
-})), b = u(d)(({ theme: e, hasError: t }) => ({
+})), x = d(f)(({ theme: e, hasError: t }) => ({
 	flex: "1",
 	marginRight: e.spacing(2.5),
 	...t && {
 		border: `2px solid ${e.palette.error.main}`,
 		borderRadius: "6px"
 	}
-})), x = u(m)(({ theme: e }) => ({ "& svg": { fill: e.palette.grey[600] } })), S = u("div")({
+})), S = d(h)(() => ({ "& svg": { fill: c.text() } })), C = d("div")({
 	alignItems: "flex-end",
 	display: "flex",
 	justifyContent: "space-between",
 	width: "100%"
-}), C = u("div")({
+}), w = d("div")({
 	alignItems: "center",
 	display: "flex"
-}), w = u(_)(({ theme: e }) => ({
+}), 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 }
-})), T = u("div")(({ theme: e }) => ({
+})), E = d("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(.5)
-})), E = u("div")({
+})), D = d("div")({
 	alignItems: "center",
 	display: "flex",
 	justifyContent: "space-between"
-}), D = class extends o.Component {
+}), O = class extends r.Component {
 	static propTypes = {
-		error: s.string,
-		markup: s.string,
-		onChange: s.func.isRequired,
-		onDelete: s.func.isRequired,
-		value: s.string,
-		spellCheck: s.bool,
-		showMaxLength: s.bool,
-		pluginProps: s.object
+		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 = e(this.props.onChange, 300);
+	updateText = a(this.props.onChange, 300);
 	UNSAFE_componentWillReceiveProps(e) {
 		e.markup && this.setState({ value: e.markup });
 	}
 	onChange = (e) => {
-		let t = a(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: r, showMaxLength: i, pluginProps: a } = this.props, s = i ? {} : { maxLength: 25 };
-		return /* @__PURE__ */ l(o.Fragment, { children: [/* @__PURE__ */ l(E, { children: [/* @__PURE__ */ c(b, {
-			hasError: !!r,
+		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: a,
+			pluginProps: o,
 			languageCharactersProps: [{ language: "spanish" }],
 			spellCheck: n,
 			autoWidthToolbar: !0,
 			toolbarOpts: {
 				minWidth: "auto",
-				isHidden: !!a?.characters?.disabled
+				isHidden: !!o?.characters?.disabled
 			},
 			...s
-		}), /* @__PURE__ */ c(x, {
+		}), /* @__PURE__ */ l(S, {
 			"aria-label": "delete",
 			onClick: t,
 			size: "large",
-			children: /* @__PURE__ */ c(p, {})
-		})] }), r && /* @__PURE__ */ c(T, { children: r })] });
+			children: /* @__PURE__ */ l(m, {})
+		})] }), i && /* @__PURE__ */ l(E, { children: i })] });
 	}
-}, O = class extends o.Component {
+}, k = class extends r.Component {
 	static propTypes = {
-		choices: s.array,
-		selectChoices: s.array.isRequired,
-		errors: s.object,
-		onSelect: s.func.isRequired,
-		choiceChanged: s.func.isRequired,
-		lengthChanged: s.func,
-		choiceRemoved: s.func.isRequired,
-		value: s.string,
-		maxLength: s.number,
-		showMaxLength: s.bool,
-		spellCheck: s.bool,
-		pluginProps: s.object
+		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) {
@@ -123,7 +122,7 @@ var v = u("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), y = u("di
 		this.updateChoicesIfNeeded(this.props);
 	}
 	updateChoicesIfNeeded = (e) => {
-		(!this.state.choices || !t(e.choices, this.state.choices) || !t(e.choices, this.props.choices)) && this.setState({ choices: e.choices });
+		(!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;
@@ -132,57 +131,57 @@ var v = u("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), y = u("di
 	onAddChoice = () => {
 		let { choices: e } = this.state;
 		if (e.length && e[e.length - 1].label !== "") {
-			let t = n(e.map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
+			let t = s(e.map((e) => parseInt(e.value)).filter((e) => !isNaN(e))) || 0;
 			this.setState({ choices: [...e, {
 				value: `${t + 1}`,
 				label: ""
 			}] });
 		}
 	};
-	onChoiceChanged = (e, t, n) => {
-		let { choiceChanged: a, lengthChanged: o, maxLength: s, choices: c } = this.props, l = c.map((e) => r(e.label || "").length);
-		l[n] = r(t).length;
+	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({
-			...e,
-			label: t
-		}), (u > s || u + 10 <= s) && o(i(u));
+			...n,
+			label: r
+		}), (u > s || u + 10 <= s) && o(t(u));
 	};
 	onRemoveChoice = (e) => {
 		let { choiceRemoved: t } = this.props;
 		t(e.value);
 	};
 	getChoicesMaxLength = () => {
-		let { choices: e } = this.state;
-		if (!e) return 1;
-		let t = e.map((e) => r(e.label || "").length);
-		return Math.max(...t);
+		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: e, maxLength: t, showMaxLength: n, value: i, spellCheck: a, errors: o, pluginProps: s } = this.props, { choices: u } = this.state, d = this.getChoicesMaxLength();
-		return /* @__PURE__ */ l(v, { children: [
-			/* @__PURE__ */ l(S, { children: [/* @__PURE__ */ l(g, {
+		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: n,
+				readOnly: r,
 				MenuProps: { transitionDuration: {
 					enter: 225,
 					exit: 195
 				} },
-				children: [/* @__PURE__ */ c(h, {
+				children: [/* @__PURE__ */ l(g, {
 					value: "",
-					children: /* @__PURE__ */ c("em", { children: i ? "Remove selection" : "Select a response" })
-				}), e.map((e, t) => /* @__PURE__ */ c(h, {
-					value: e?.value,
-					children: r(e?.label)
-				}, t))]
-			}), u && u.length > 0 && /* @__PURE__ */ l(C, { children: [t && n && /* @__PURE__ */ c(w, {
+					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",
@@ -190,26 +189,26 @@ var v = u("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), y = u("di
 					min: d,
 					max: d + 10
 				},
-				value: t,
+				value: n,
 				onChange: this.changeLength
-			}), /* @__PURE__ */ c(f, {
+			}), /* @__PURE__ */ l(p, {
 				variant: "contained",
 				color: "primary",
 				onClick: this.onAddChoice,
 				children: "Add"
 			})] })] }),
-			o && o[0] && /* @__PURE__ */ c(T, { children: o[0] }),
-			/* @__PURE__ */ c(y, { children: u && u.map((e, t) => t > 0 && /* @__PURE__ */ c(D, {
+			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: n,
+				showMaxLength: r,
 				pluginProps: s
 			}, t)) })
 		] });
 	}
 };
 //#endregion
-export { O as default };
+export { k as AlternateSection, k as default, O as Choice };

package/dist/author/defaults.js

@@ -5,7 +5,7 @@ var e = {
 		displayType: "block",
 		markup: "",
 		maxLengthPerChoiceEnabled: !0,
-		playerSpellCheckEnabled: !0,
+		playerSpellCheckEnabled: !1,
 		prompt: "",
 		promptEnabled: !0,
 		rationale: "",

package/dist/author/ecr-toolbar.js

@@ -97,4 +97,4 @@ var o = i(a)(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { s as default };
+export { s as ECRToolbar, s as default };

package/dist/author/index.d.ts

@@ -38,5 +38,6 @@ export default class ExplicitConstructedResponse extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _render(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,38 +1,37 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isArray.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/defaults.js";
-import { createSlateMarkup as n, processMarkup as r } from "./markupUtils.js";
-import i from "./main.js";
-import a from "./defaults.js";
-import o from "react";
-import { createRoot as s } from "react-dom/client";
+import { createSlateMarkup as e, processMarkup as t } from "./markupUtils.js";
+import { Main as n } from "./main.js";
+import r from "./defaults.js";
+import i from "react";
+import { createRoot as a } from "react-dom/client";
+import { defaults as o, isArray as s } from "@pie-element/shared-lodash";
 import c from "debug";
 import { DeleteImageEvent as l, DeleteSoundEvent as u, InsertImageEvent as d, InsertSoundEvent as f, ModelUpdatedEvent as p } from "@pie-element/shared-configure-events";
 //#region src/author/index.ts
 var m = c("explicit-constructed-response:configure"), h = class c extends HTMLElement {
-	static prepareModel = (t = {}) => {
+	static prepareModel = (n = {}) => {
 		let i = {
-			...a.model,
-			...t
-		}, o = i.slateMarkup || n(i.markup, i.choices), s = r(o);
-		return i.choices && Object.keys(i.choices).forEach((t) => {
-			e(i.choices[t]) && (i.choices[t] = (i.choices[t] || []).map((e, t) => e.value ? e : (m("Choice does not contain \"value\" property, which is required.", e), {
+			...r.model,
+			...n
+		}, a = i.slateMarkup || e(i.markup, i.choices), o = t(a);
+		return i.choices && Object.keys(i.choices).forEach((e) => {
+			s(i.choices[e]) && (i.choices[e] = (i.choices[e] || []).map((e, t) => e.value ? e : (m("Choice does not contain \"value\" property, which is required.", e), {
 				value: `${t}`,
 				...e
 			})));
 		}), {
 			...i,
-			slateMarkup: o,
-			markup: s
+			slateMarkup: a,
+			markup: o
 		};
 	};
 	constructor() {
-		super(), this._root = null, this._model = c.prepareModel(), this._configuration = a.configuration;
+		super(), this._root = null, this._model = c.prepareModel(), this._configuration = r.configuration;
 	}
 	set model(e) {
 		this._model = c.prepareModel(e), this._model.responseAreaInputConfiguration && (this._model.responseAreaInputConfiguration = this._configuration.responseAreaInputConfiguration?.inputConfiguration), this._render();
 	}
 	set configuration(e) {
-		this._configuration = t(e, a.configuration), e.language?.enabled ? e.languageChoices?.options?.length && (this._model.language = e.languageChoices.options[0].value) : e.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({
+		this._configuration = o(e, r.configuration), e.language?.enabled ? e.languageChoices?.options?.length && (this._model.language = e.languageChoices.options[0].value) : e.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,
 			label: this._model.language
 		})) : delete this._model.language, this._render();
@@ -72,7 +71,7 @@ var m = c("explicit-constructed-response:configure"), h = class c extends HTMLEl
 	}
 	_render() {
 		m("_render");
-		let e = o.createElement(i, {
+		let e = i.createElement(n, {
 			model: this._model,
 			configuration: this._configuration,
 			onModelChanged: this.onModelChanged,
@@ -87,10 +86,13 @@ var m = c("explicit-constructed-response:configure"), h = class c extends HTMLEl
 				delete: this.onDeleteSound.bind(this)
 			}
 		});
-		this._root ||= s(this), this._root.render(e);
+		this._root ||= a(this), this._root.render(e);
+	}
+	connectedCallback() {
+		this._render();
 	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/main.d.ts

@@ -32,7 +32,7 @@ export declare class Main extends React.Component {
     onLengthChanged: any;
     onChangeResponse: any;
     onChange: any;
-    onHandleAreaChange: any;
+    onHandleAreaChange: import("@pie-element/shared-lodash").CancelableFunction<(nodes: any) => void>;
     render(): React.JSX.Element;
 }
 export default Main;