@pie-element/drawing-response 12.1.2-next.0 → 12.1.2-next.10

package/dist/author/image-container.js

@@ -180,4 +180,4 @@ g.propTypes = {
 	insertImage: n.func
 };
 //#endregion
-export { g as default };
+export { g as ImageContainer, g as default };

package/dist/author/index.d.ts

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

package/dist/author/index.js

@@ -1,4 +1,4 @@
-import e from "./root.js";
+import { Root as e } from "./root.js";
 import t from "./defaults.js";
 import n from "react";
 import { createRoot as r } from "react-dom/client";
@@ -71,8 +71,11 @@ var u = i("hotspot:configure"), d = class i extends HTMLElement {
 		});
 		this._root ||= r(this), this._root.render(t);
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/root.js

@@ -1,6 +1,6 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import t from "./image-container.js";
-import n from "react";
+import { ImageContainer as e } from "./image-container.js";
+import t from "react";
+import { cloneDeep as n } from "@pie-element/shared-lodash";
 import r from "prop-types";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { styled as o } from "@mui/material/styles";
@@ -17,12 +17,12 @@ var { Panel: f, toggle: p, dropdown: m } = l, h = o(s)(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), _ = class extends n.Component {
-	onPromptChanged = (t) => {
-		let { model: n, onModelChanged: r } = this.props;
+})), _ = class extends t.Component {
+	onPromptChanged = (e) => {
+		let { model: t, onModelChanged: r } = this.props;
 		r({
-			...e(n),
-			prompt: t
+			...n(t),
+			prompt: e
 		});
 	};
 	onTeacherInstructionsChanged = (e) => {
@@ -47,7 +47,7 @@ var { Panel: f, toggle: p, dropdown: m } = l, h = o(s)(({ theme: e }) => ({
 		});
 	};
 	render() {
-		let { configuration: e, imageSupport: r, model: o, onConfigurationChanged: s, onModelChanged: l, uploadSoundSupport: _ } = this.props, { baseInputConfiguration: v = {}, backgroundImage: y = {}, contentDimensions: b = {}, maxImageWidth: x = {}, maxImageHeight: S = {}, prompt: C = {}, settingsPanelDisabled: w, spellCheck: T = {}, teacherInstructions: E = {}, withRubric: D = {}, language: O = {}, languageChoices: k = {}, mathMlOptions: A = {} } = e || {}, { backgroundImageEnabled: j, errors: M = {}, extraCSSRules: N, promptEnabled: P, spellCheckEnabled: F, teacherInstructionsEnabled: I, toolbarEditorPosition: L } = o || {}, { prompt: R, teacherInstructions: z } = M, B = x && x.prompt, V = S && S.prompt, H = { position: L === "top" ? "top" : "bottom" }, U = {
+		let { configuration: n, imageSupport: r, model: o, onConfigurationChanged: s, onModelChanged: l, uploadSoundSupport: _ } = this.props, { baseInputConfiguration: v = {}, backgroundImage: y = {}, contentDimensions: b = {}, maxImageWidth: x = {}, maxImageHeight: S = {}, prompt: C = {}, settingsPanelDisabled: w, spellCheck: T = {}, teacherInstructions: E = {}, withRubric: D = {}, language: O = {}, languageChoices: k = {}, mathMlOptions: A = {} } = n || {}, { backgroundImageEnabled: j, errors: M = {}, extraCSSRules: N, promptEnabled: P, spellCheckEnabled: F, teacherInstructionsEnabled: I, toolbarEditorPosition: L } = o || {}, { prompt: R, teacherInstructions: z } = M, B = x && x.prompt, V = S && S.prompt, H = { position: L === "top" ? "top" : "bottom" }, U = {
 			backgroundImageEnabled: y.settings && p(y.label),
 			promptEnabled: C.settings && p(C.label),
 			"language.enabled": O.settings && p(O.label, !0),
@@ -67,7 +67,7 @@ var { Panel: f, toggle: p, dropdown: m } = l, h = o(s)(({ theme: e }) => ({
 			settings: /* @__PURE__ */ i(f, {
 				model: o,
 				onChangeModel: l,
-				configuration: e,
+				configuration: n,
 				onChangeConfiguration: s,
 				groups: {
 					Settings: U,
@@ -110,10 +110,10 @@ var { Panel: f, toggle: p, dropdown: m } = l, h = o(s)(({ theme: e }) => ({
 						mathMlOptions: A
 					}), R && /* @__PURE__ */ i(g, { children: R })]
 				}),
-				j && /* @__PURE__ */ a(n.Fragment, { children: [/* @__PURE__ */ i(d, {
+				j && /* @__PURE__ */ a(t.Fragment, { children: [/* @__PURE__ */ i(d, {
 					variant: "h6",
 					children: "Define Background Image"
-				}), /* @__PURE__ */ i(t, {
+				}), /* @__PURE__ */ i(e, {
 					imageUrl: o.imageUrl,
 					onUpdateImageDimension: this.onUpdateImageDimension,
 					onImageUpload: this.onImageUpload,
@@ -139,4 +139,4 @@ _.propTypes = {
 	onConfigurationChanged: r.func.isRequired
 };
 //#endregion
-export { _ as default };
+export { _ as Root, _ as default };