@pie-element/extended-text-entry 15.1.2-next.0 → 15.1.2-next.10

package/dist/delivery/annotation/annotation-menu.js

@@ -1,10 +1,11 @@
 import e from "react";
 import t from "prop-types";
 import { styled as n } from "@mui/material/styles";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Popover as a } from "@mui/material";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Popover as o } from "@mui/material";
 //#region src/delivery/annotation/annotation-menu.tsx
-var o = n(a)({ "& .MuiPaper-root": {
+var s = n(o)({ "& .MuiPaper-root": {
 	overflowX: "unset",
 	overflowY: "unset",
 	marginTop: "-16px",
@@ -17,39 +18,39 @@ var o = n(a)({ "& .MuiPaper-root": {
 		width: 0,
 		pointerEvents: "none",
 		borderWidth: "7px",
-		borderTopColor: "black"
+		borderTopColor: r.border()
 	}
-} }), s = n("div")(({ theme: e }) => ({
+} }), c = n("div")(() => ({
 	width: "300px",
 	overflow: "hidden",
 	borderRadius: "4px",
-	backgroundColor: e.palette.common.white,
-	border: `2px solid ${e.palette.grey[100]}`
-})), c = n("div")({
+	backgroundColor: r.white(),
+	border: `2px solid ${r.border()}`
+})), l = n("div")({
 	display: "flex",
 	flexWrap: "wrap"
-}), l = n("div")(({ theme: e }) => ({
+}), u = n("div")(() => ({
 	display: "flex",
 	flexWrap: "wrap",
-	borderTop: `2px solid ${e.palette.grey[100]}`
-})), u = n("div")(({ theme: e, variant: t }) => ({
+	borderTop: `2px solid ${r.border()}`
+})), d = n("div")(({ variant: e }) => ({
 	width: "22%",
 	textAlign: "center",
 	padding: "4px",
 	cursor: "pointer",
-	borderBottom: `1px solid ${e.palette.grey[100]}`,
-	"&:not(:nth-child(4n))": { borderRight: `1px solid ${e.palette.grey[100]}` },
+	borderBottom: `1px solid ${r.border()}`,
+	"&:not(:nth-child(4n))": { borderRight: `1px solid ${r.border()}` },
 	"&:nth-child(4n)": { flexGrow: 1 },
-	"&:hover": { backgroundColor: e.palette.grey[100] },
-	...t === "positive" && {
+	"&:hover": { backgroundColor: r.backgroundDark() },
+	...e === "positive" && {
 		backgroundColor: "rgb(153, 255, 153) !important",
 		"&:hover": { filter: "brightness(85%)" }
 	},
-	...t === "negative" && {
+	...e === "negative" && {
 		backgroundColor: "rgb(255, 204, 238) !important",
 		"&:hover": { filter: "brightness(85%)" }
 	}
-})), d = class extends e.Component {
+})), f = class extends e.Component {
 	static propTypes = {
 		anchorEl: t.object,
 		open: t.bool,
@@ -62,8 +63,8 @@ var o = n(a)({ "& .MuiPaper-root": {
 		onAnnotate: t.func
 	};
 	render() {
-		let { anchorEl: t, annotations: n, isNewAnnotation: a, onAnnotate: d, onClose: f, onEdit: p, onDelete: m, onWrite: h, open: g } = this.props;
-		return /* @__PURE__ */ r(o, {
+		let { anchorEl: t, annotations: n, isNewAnnotation: r, onAnnotate: o, onClose: f, onEdit: p, onDelete: m, onWrite: h, open: g } = this.props;
+		return /* @__PURE__ */ i(s, {
 			anchorEl: t,
 			open: g,
 			onClose: f,
@@ -80,28 +81,28 @@ var o = n(a)({ "& .MuiPaper-root": {
 				vertical: "bottom",
 				horizontal: "center"
 			},
-			children: /* @__PURE__ */ i(s, { children: [/* @__PURE__ */ r(c, { children: n.map((e, t) => /* @__PURE__ */ r(u, {
+			children: /* @__PURE__ */ a(c, { children: [/* @__PURE__ */ i(l, { children: n.map((e, t) => /* @__PURE__ */ i(d, {
 				variant: e.type,
-				onClick: () => d(e),
+				onClick: () => o(e),
 				children: e.label
-			}, `annotation-${t}`)) }), /* @__PURE__ */ i(l, { children: [
-				/* @__PURE__ */ r(u, {
+			}, `annotation-${t}`)) }), /* @__PURE__ */ a(u, { children: [
+				/* @__PURE__ */ i(d, {
 					onClick: f,
 					children: "Cancel"
 				}),
-				/* @__PURE__ */ r(u, { style: { pointerEvents: "none" } }),
-				a ? /* @__PURE__ */ i(e.Fragment, { children: [/* @__PURE__ */ r(u, {
+				/* @__PURE__ */ i(d, { style: { pointerEvents: "none" } }),
+				r ? /* @__PURE__ */ a(e.Fragment, { children: [/* @__PURE__ */ i(d, {
 					variant: "positive",
 					onClick: () => h("positive"),
 					children: "Write"
-				}), /* @__PURE__ */ r(u, {
+				}), /* @__PURE__ */ i(d, {
 					variant: "negative",
 					onClick: () => h("negative"),
 					children: "Write"
-				})] }) : /* @__PURE__ */ i(e.Fragment, { children: [/* @__PURE__ */ r(u, {
+				})] }) : /* @__PURE__ */ a(e.Fragment, { children: [/* @__PURE__ */ i(d, {
 					onClick: m,
 					children: "Delete"
-				}), /* @__PURE__ */ r(u, {
+				}), /* @__PURE__ */ i(d, {
 					onClick: p,
 					children: "Edit"
 				})] })
@@ -110,4 +111,4 @@ var o = n(a)({ "& .MuiPaper-root": {
 	}
 };
 //#endregion
-export { d as default };
+export { f as default };

package/dist/delivery/annotation/freeform-editor.js

@@ -1,10 +1,11 @@
 import e from "react";
 import t from "prop-types";
 import { styled as n } from "@mui/material/styles";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Popover as a, TextField as o } from "@mui/material";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Popover as o, TextField as s } from "@mui/material";
 //#region src/delivery/annotation/freeform-editor.tsx
-var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
+var c = n(o)(({ annotationType: e }) => ({ "& .MuiPaper-root": {
 	overflowX: "unset",
 	overflowY: "unset",
 	marginLeft: "16px",
@@ -18,41 +19,41 @@ var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
 		width: 0,
 		pointerEvents: "none",
 		borderWidth: "7px",
-		borderRightColor: e.palette.grey[100]
+		borderRightColor: r.border()
 	},
-	...t === "negative" && { "&::before": { borderRightColor: "rgb(255, 204, 238) !important" } },
-	...t === "positive" && { "&::before": { borderRightColor: "rgb(153, 255, 153) !important" } }
-} })), c = n("div")(({ theme: e, annotationType: t }) => ({
+	...e === "negative" && { "&::before": { borderRightColor: "rgb(255, 204, 238) !important" } },
+	...e === "positive" && { "&::before": { borderRightColor: "rgb(153, 255, 153) !important" } }
+} })), l = n("div")(({ annotationType: e }) => ({
 	width: "200px",
 	overflow: "hidden",
 	borderRadius: "4px",
-	backgroundColor: "#ffffff",
-	border: `4px solid ${e.palette.grey[100]}`,
-	...t === "negative" && { borderColor: "rgb(255, 204, 238) !important" },
-	...t === "positive" && { borderColor: "rgb(153, 255, 153) !important" }
-})), l = n("div")(({ theme: e }) => ({
+	backgroundColor: r.white(),
+	border: `4px solid ${r.border()}`,
+	...e === "negative" && { borderColor: "rgb(255, 204, 238) !important" },
+	...e === "positive" && { borderColor: "rgb(153, 255, 153) !important" }
+})), u = n("div")(() => ({
 	display: "flex",
 	flexWrap: "wrap",
-	borderTop: `2px solid ${e.palette.grey[100]}`
-})), u = n("div")(({ theme: e, variant: t, annotationType: n }) => ({
+	borderTop: `2px solid ${r.border()}`
+})), d = n("div")(({ variant: e, annotationType: t }) => ({
 	flexGrow: 1,
 	width: "28%",
 	textAlign: "center",
 	padding: "4px",
 	cursor: "pointer",
-	"&:not(:nth-child(3n))": { borderRight: `1px solid ${e.palette.grey[100]}` },
-	"&:hover": { backgroundColor: e.palette.grey[100] },
-	...t === "positive" && {
+	"&:not(:nth-child(3n))": { borderRight: `1px solid ${r.border()}` },
+	"&:hover": { backgroundColor: r.backgroundDark() },
+	...e === "positive" && {
 		backgroundColor: "rgb(153, 255, 153) !important",
 		"&:hover": { filter: "brightness(85%)" }
 	},
-	...t === "negative" && {
+	...e === "negative" && {
 		backgroundColor: "rgb(255, 204, 238) !important",
 		"&:hover": { filter: "brightness(85%)" }
 	},
-	...t === "typeChange" && n === "negative" && { "&:hover": { backgroundColor: "rgb(153, 255, 153) !important" } },
-	...t === "typeChange" && n === "positive" && { "&:hover": { backgroundColor: "rgb(255, 204, 238) !important" } }
-})), d = class extends e.Component {
+	...e === "typeChange" && t === "negative" && { "&:hover": { backgroundColor: "rgb(153, 255, 153) !important" } },
+	...e === "typeChange" && t === "positive" && { "&:hover": { backgroundColor: "rgb(255, 204, 238) !important" } }
+})), f = class extends e.Component {
 	static propTypes = {
 		anchorEl: t.object,
 		open: t.bool,
@@ -81,13 +82,13 @@ var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
 		n === "" ? t() : e(n), this.setState({ value: "" });
 	};
 	render() {
-		let { anchorEl: e, offset: t, onDelete: n, open: a, type: d } = this.props, { value: f } = this.state;
-		return /* @__PURE__ */ r(s, {
+		let { anchorEl: e, offset: t, onDelete: n, open: r, type: o } = this.props, { value: f } = this.state;
+		return /* @__PURE__ */ i(c, {
 			anchorEl: e,
 			elevation: 2,
-			open: a,
+			open: r,
 			onClose: this.handleSave,
-			annotationType: d,
+			annotationType: o,
 			style: {
 				marginTop: `${t}px`,
 				transition: "margin-top 2s ease-out"
@@ -104,9 +105,9 @@ var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
 				vertical: "top",
 				horizontal: "left"
 			},
-			children: /* @__PURE__ */ i(c, {
-				annotationType: d,
-				children: [/* @__PURE__ */ r(o, {
+			children: /* @__PURE__ */ a(l, {
+				annotationType: o,
+				children: [/* @__PURE__ */ i(s, {
 					id: "annotation-editor",
 					style: {
 						padding: "2px 5px",
@@ -119,18 +120,18 @@ var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
 					value: f,
 					onChange: this.onValueChange,
 					InputProps: { disableUnderline: !0 }
-				}), /* @__PURE__ */ i(l, { children: [
-					/* @__PURE__ */ r(u, {
+				}), /* @__PURE__ */ a(u, { children: [
+					/* @__PURE__ */ i(d, {
 						onClick: n,
 						children: "Delete"
 					}),
-					/* @__PURE__ */ r(u, {
+					/* @__PURE__ */ i(d, {
 						variant: "typeChange",
-						annotationType: d,
+						annotationType: o,
 						onClick: this.handleTypeChange,
-						children: d === "negative" ? "Green" : "Pink"
+						children: o === "negative" ? "Green" : "Pink"
 					}),
-					/* @__PURE__ */ r(u, {
+					/* @__PURE__ */ i(d, {
 						onClick: this.handleSave,
 						children: "Save"
 					})
@@ -140,4 +141,4 @@ var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
 	}
 };
 //#endregion
-export { d as default };
+export { f as default };

package/dist/delivery/index.js

@@ -1,4 +1,4 @@
-import e from "./main.js";
+import { Main as e } from "./main.js";
 import t from "react";
 import n from "debug";
 import { createRoot as r } from "react-dom/client";
@@ -61,7 +61,7 @@ var d = class extends HTMLElement {
 		}
 	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/delivery/main.d.ts

@@ -20,8 +20,8 @@ export declare class Main extends React.Component {
             comment: PropTypes.Requireable<string>;
         }>>>;
     };
-    changeSessionValue: any;
-    changeSessionComment: any;
+    changeSessionValue: import("@pie-element/shared-lodash").CancelableFunction<any>;
+    changeSessionComment: import("@pie-element/shared-lodash").CancelableFunction<any>;
     render(): React.JSX.Element;
 }
 export default Main;

package/dist/delivery/main.js

@@ -1,7 +1,7 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/debounce.js";
-import t from "./annotation/annotation-editor.js";
-import n from "react";
-import r from "prop-types";
+import e from "./annotation/annotation-editor.js";
+import t from "react";
+import n from "prop-types";
+import { debounce as r } from "@pie-element/shared-lodash";
 import i from "debug";
 import a from "@mui/material/Typography";
 import { styled as o } from "@mui/material/styles";
@@ -23,7 +23,8 @@ var v = _(f, "UiLayout") || _(w.UiLayout, "UiLayout"), y = _(d, "PreviewPrompt")
 	width: "100%",
 	color: p.text(),
 	marginBottom: e.spacing(2),
-	fontSize: "inherit"
+	fontSize: "inherit",
+	display: "block"
 })), O = o("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), k = o(s)(({ theme: e }) => ({
 	marginBottom: e.spacing(2),
 	borderRadius: "4px"
@@ -34,22 +35,22 @@ var v = _(f, "UiLayout") || _(w.UiLayout, "UiLayout"), y = _(d, "PreviewPrompt")
 	width: "1px",
 	height: "1px",
 	overflow: "hidden"
-}), j = class extends n.Component {
+}), j = class extends t.Component {
 	static propTypes = {
-		onValueChange: r.func.isRequired,
-		onAnnotationsChange: r.func.isRequired,
-		onCommentChange: r.func.isRequired,
-		model: r.object,
-		session: r.shape({
-			value: r.string,
-			annotations: r.array,
-			comment: r.string
+		onValueChange: n.func.isRequired,
+		onAnnotationsChange: n.func.isRequired,
+		onCommentChange: n.func.isRequired,
+		model: n.object,
+		session: n.shape({
+			value: n.string,
+			annotations: n.array,
+			comment: n.string
 		}).isRequired
 	};
-	changeSessionValue = e(this.props.onValueChange, 1500);
-	changeSessionComment = e(this.props.onCommentChange, 1500);
+	changeSessionValue = r(this.props.onValueChange, 1500);
+	changeSessionComment = r(this.props.onCommentChange, 1500);
 	render() {
-		let { model: e, session: n, onAnnotationsChange: r } = this.props, { animationsDisabled: i, annotatorMode: a, customKeys: o, dimensions: s, disabled: c, disabledAnnotator: l, equationEditor: u, extraCSSRules: d, feedback: f, mathInput: p, playersToolbarPosition: g, predefinedAnnotations: _, prompt: v, spanishInput: S, specialInput: C, spellCheckEnabled: w, teacherInstructions: j } = e, { annotations: M, comment: N, value: P } = n, { width: F, height: I } = s || {}, L = "40vh", R = { position: g === "top" ? "top" : "bottom" };
+		let { model: t, session: n, onAnnotationsChange: r } = this.props, { animationsDisabled: i, annotatorMode: a, customKeys: o, dimensions: s, disabled: c, disabledAnnotator: l, equationEditor: u, extraCSSRules: d, feedback: f, mathInput: p, playersToolbarPosition: g, predefinedAnnotations: _, prompt: v, spanishInput: S, specialInput: C, spellCheckEnabled: w, teacherInstructions: j } = t, { annotations: M, comment: N, value: P } = n, { width: F, height: I } = s || {}, L = "40vh", R = { position: g === "top" ? "top" : "bottom" };
 		T("[render] disabled? ", c);
 		let z = /* @__PURE__ */ m(y, {
 			defaultClassName: "teacher-instructions",
@@ -73,10 +74,10 @@ var v = _(f, "UiLayout") || _(w.UiLayout, "UiLayout"), y = _(d, "PreviewPrompt")
 					component: "span",
 					children: /* @__PURE__ */ m(y, {
 						defaultClassName: "prompt",
-						prompt: e.prompt
+						prompt: t.prompt
 					})
 				}),
-				a ? /* @__PURE__ */ m(t, {
+				a ? /* @__PURE__ */ m(e, {
 					text: P || "",
 					annotations: M || [],
 					comment: N || "",
@@ -131,4 +132,4 @@ var v = _(f, "UiLayout") || _(w.UiLayout, "UiLayout"), y = _(d, "PreviewPrompt")
 	}
 };
 //#endregion
-export { j as default };
+export { j as Main, j as default };