@pie-lib/mask-markup 0.1.0

package/dist/components/dropdown.js

@@ -0,0 +1,309 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@pie-lib/render-ui";
+import { InlineMenu as c, color as l } from "@pie-lib/render-ui";
+import u from "@mui/material/Button";
+import d from "@mui/material/InputLabel";
+import f from "@mui/material/MenuItem";
+import p from "@mui/icons-material/ArrowDropDown";
+import m from "@mui/icons-material/ArrowDropUp";
+import h from "@mui/icons-material/Close";
+import g from "@mui/icons-material/Check";
+//#region src/components/dropdown.tsx
+function _(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function v(e, t) {
+	return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
+}
+var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.default, S = x && typeof x == "object" ? x : b, C = n(u)(() => ({
+	color: l.text(),
+	border: `1px solid ${l.borderGray()}`,
+	borderRadius: "4px",
+	justifyContent: "space-between",
+	backgroundColor: l.background(),
+	position: "relative",
+	height: "45px",
+	width: "fit-content",
+	margin: "2px",
+	textTransform: "none",
+	"& span": { paddingRight: "5px" },
+	"& svg": {
+		position: "absolute",
+		right: 0,
+		top: "calc(50% - 12px)",
+		pointerEvents: "none",
+		color: l.text(),
+		marginLeft: "5px"
+	},
+	"&.Mui-focused": {
+		outline: `3px solid ${l.tertiary()}`,
+		outlineOffset: "2px",
+		borderWidth: "3px"
+	},
+	"&.disabledCorrect": {
+		borderWidth: "2px",
+		borderColor: l.correct(),
+		color: `${l.text()} !important`
+	},
+	"&.disabledIncorrect": {
+		borderWidth: "2px",
+		borderColor: l.incorrectWithIcon(),
+		color: `${l.text()} !important`
+	}
+})), w = n(y)(() => ({
+	backgroundColor: l.background(),
+	border: `1px solid ${l.correct()} !important`,
+	"&:hover": {
+		border: `1px solid ${l.text()} `,
+		borderColor: "initial"
+	},
+	"&:focus": {
+		border: `1px solid ${l.text()}`,
+		borderColor: "initial"
+	},
+	"& .MuiList-root": { padding: 0 }
+})), T = n(f)(() => ({
+	height: 24,
+	overflow: "hidden",
+	fontSize: "1rem",
+	fontWeight: 400,
+	fontFamily: "inherit",
+	lineHeight: "1.5em",
+	whiteSpace: "nowrap",
+	color: l.text(),
+	backgroundColor: l.background(),
+	"&.Mui-focusVisible": {
+		outline: `3px solid ${l.tertiary()}`,
+		outlineOffset: "-1px",
+		color: l.text(),
+		backgroundColor: l.background()
+	},
+	"&:hover": {
+		color: l.text(),
+		backgroundColor: l.dropdownBackground()
+	},
+	boxSizing: "border-box",
+	padding: "25px",
+	borderRadius: "4px",
+	"&.selected": {
+		color: `${l.text()} !important`,
+		backgroundColor: `${l.background()} !important`,
+		"&:hover": {
+			color: l.text(),
+			backgroundColor: `${l.dropdownBackground()} !important`
+		}
+	}
+})), E = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), D = n("span")(() => ({
+	fontSize: "max(1rem, 14px)",
+	position: "absolute",
+	right: "10px"
+})), O = n(d)(() => ({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+})), k = n(g)(() => ({
+	color: `${l.white()} !important`,
+	position: "absolute",
+	top: "-8px !important",
+	left: "-8px",
+	marginLeft: "0 !important",
+	borderRadius: "50%",
+	fontSize: "16px",
+	padding: "2px",
+	"&.correct": { backgroundColor: l.correct() },
+	"&.incorrect": { backgroundColor: l.incorrectWithIcon() }
+})), A = n(h)(() => ({
+	color: `${l.white()} !important`,
+	position: "absolute",
+	top: "-8px !important",
+	left: "-8px",
+	marginLeft: "0 !important",
+	borderRadius: "50%",
+	fontSize: "16px",
+	padding: "2px",
+	"&.correct": { backgroundColor: l.correct() },
+	"&.incorrect": { backgroundColor: l.incorrectWithIcon() }
+})), j = class extends e.Component {
+	static propTypes = {
+		id: t.string,
+		value: t.string,
+		disabled: t.bool,
+		onChange: t.func,
+		correct: t.bool,
+		choices: t.arrayOf(t.shape({
+			value: t.string,
+			label: t.string
+		})),
+		showCorrectAnswer: t.bool,
+		singleQuery: t.bool,
+		correctValue: t.string
+	};
+	constructor(t) {
+		super(t), this.state = {
+			anchorEl: null,
+			highlightedOptionId: null,
+			menuWidth: null,
+			previewValue: null
+		}, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [];
+	}
+	componentDidMount() {
+		this.hiddenRef.current && this.state.menuWidth === null && this.setState({ menuWidth: this.hiddenRef.current.clientWidth });
+	}
+	componentDidUpdate(e, t) {
+		let n = this.hiddenRef.current;
+		if (!t.anchorEl && this.state.anchorEl && this.elementRefs.forEach((e) => {
+			if (!e) return;
+			let t = e.querySelector("[data-latex], [data-raw]"), n = e.querySelector("mjx-container"), i = e.querySelector("[data-math-handled=\"true\"]");
+			t && (!i || !n) && r(e);
+		}), n) {
+			let e = n.clientWidth;
+			e !== this.state.menuWidth && (this.elementRefs.forEach((e) => {
+				e && r(e);
+			}), r(n), this.setState({ menuWidth: e }));
+		}
+	}
+	handleClick = (e) => this.setState({ anchorEl: e.currentTarget });
+	handleClose = () => {
+		let { value: e } = this.props;
+		this.setState({
+			anchorEl: null,
+			previewValue: null,
+			highlightedOptionId: null
+		}), !e && this.previewRef.current && (this.previewRef.current.innerHTML = "");
+	};
+	handleHighlight = (e) => {
+		let t = { highlightedOptionId: `dropdown-option-${this.props.id}-${e}` };
+		this.props.value || (t.previewValue = this.props.choices[e].value), this.setState(t);
+	};
+	handleSelect = (e, t) => {
+		this.props.onChange(this.props.id, e), this.handleHighlight(t), this.handleClose();
+	};
+	handleHover = (e) => {
+		if (this.props.value) return;
+		let t = `dropdown-option-${this.props.id}-${e}`, n = this.state.previewValue;
+		this.setState({
+			highlightedOptionId: t,
+			previewValue: n
+		}, () => {
+			let t = this.elementRefs[e], n = this.previewRef.current;
+			t && n && (n.innerHTML = t.innerHTML);
+		});
+	};
+	getLabel(e, t) {
+		let n = (e || []).find((e) => e.value === t);
+		return n ? n.label.trim() : void 0;
+	}
+	render() {
+		let { id: e, correct: t, disabled: n, value: r, choices: s, showCorrectAnswer: c, singleQuery: l, correctValue: u } = this.props, { anchorEl: d } = this.state, f = !!d, h = `dropdown-button-${e}`, g = `dropdown-menu-${e}`, _ = `dropdown-value-${e}`, v;
+		this.elementRefs = [], n && t !== void 0 && (v = t || c ? "disabledCorrect" : "disabledIncorrect");
+		let y = parseInt(e, 10) + 1, b = l ? "Query-label" : `Query-label-${y}`, x = l ? "Query" : `Query ${y}`, S = null;
+		return n && t !== void 0 && (S = t || c ? /* @__PURE__ */ a(k, { className: "correct" }) : /* @__PURE__ */ a(A, { className: "incorrect" })), /* @__PURE__ */ o(i, { children: [
+			/* @__PURE__ */ a("div", {
+				ref: this.hiddenRef,
+				style: {
+					position: "absolute",
+					visibility: "hidden",
+					top: 0,
+					left: 0
+				},
+				tabIndex: -1,
+				"aria-hidden": "true",
+				children: (s || []).map((e, t) => /* @__PURE__ */ a(T, {
+					tabIndex: -1,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ a(E, { dangerouslySetInnerHTML: { __html: e.label } })
+				}, t))
+			}),
+			/* @__PURE__ */ a(O, {
+				id: b,
+				tabIndex: -1,
+				"aria-hidden": "true",
+				children: x
+			}),
+			/* @__PURE__ */ o(C, {
+				ref: this.buttonRef,
+				style: {
+					...this.state.menuWidth && { minWidth: `calc(${this.state.menuWidth}px + 8px)` },
+					borderWidth: f ? "2px" : "1px",
+					transition: "border-width 0.2s ease-in-out"
+				},
+				"aria-controls": f ? g : void 0,
+				"aria-haspopup": "listbox",
+				"aria-expanded": f ? "true" : void 0,
+				"aria-activedescendant": this.state.highlightedOptionId,
+				onClick: this.handleClick,
+				className: v,
+				disabled: n,
+				id: h,
+				role: "combobox",
+				"aria-label": `Select an option for ${x}`,
+				"aria-labelledby": _,
+				children: [
+					S,
+					/* @__PURE__ */ a(E, {
+						id: _,
+						ref: this.previewRef,
+						dangerouslySetInnerHTML: { __html: u || (f && this.state.previewValue ? this.getLabel(s, this.state.previewValue) : this.getLabel(s, r) || "") }
+					}),
+					a(f ? m : p, {})
+				]
+			}),
+			/* @__PURE__ */ a(w, {
+				id: g,
+				anchorEl: d,
+				keepMounted: !0,
+				open: f,
+				onClose: this.handleClose,
+				getContentAnchorEl: null,
+				anchorOrigin: {
+					vertical: "bottom",
+					horizontal: "left"
+				},
+				transformOrigin: {
+					vertical: "top",
+					horizontal: "left"
+				},
+				transitionDuration: {
+					enter: 225,
+					exit: 195
+				},
+				slotProps: {
+					paper: this.state.menuWidth ? { style: {
+						minWidth: this.state.menuWidth,
+						padding: "4px"
+					} } : void 0,
+					list: {
+						"aria-labelledby": h,
+						role: "listbox",
+						disablePadding: !0
+					}
+				},
+				children: (s || []).map((t, n) => {
+					let i = `dropdown-option-${e}-${n}`;
+					return /* @__PURE__ */ o(T, {
+						id: i,
+						className: t.value === r ? "selected" : "",
+						value: t.value,
+						onClick: () => this.handleSelect(t.value, n),
+						role: "option",
+						"aria-selected": this.state.highlightedOptionId === i ? "true" : void 0,
+						onMouseOver: () => this.handleHover(n),
+						children: [/* @__PURE__ */ a(E, {
+							ref: (e) => this.elementRefs[n] = e,
+							dangerouslySetInnerHTML: { __html: t.label }
+						}), /* @__PURE__ */ a(D, { dangerouslySetInnerHTML: { __html: t.value === r ? " ✓" : "" } })]
+					}, `${t.label}-${n}`);
+				})
+			})
+		] });
+	}
+};
+//#endregion
+export { j as default };

package/dist/components/input.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/components/input.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 PropTypes from 'prop-types';
+declare const Input: {
+    ({ disabled, correct, charactersLimit, id, isConstructedResponse, value, onChange, showCorrectAnswer, spellCheck, width, }: {
+        disabled: any;
+        correct: any;
+        charactersLimit: any;
+        id: any;
+        isConstructedResponse: any;
+        value: any;
+        onChange: any;
+        showCorrectAnswer: any;
+        spellCheck: any;
+        width: any;
+    }): JSX.Element;
+    propTypes: {
+        id: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        showCorrectAnswer: PropTypes.Requireable<boolean>;
+        charactersLimit: PropTypes.Requireable<number>;
+        width: PropTypes.Requireable<number>;
+        isConstructedResponse: PropTypes.Requireable<boolean>;
+    };
+};
+export default Input;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;CA4BV,CAAC;AAeF,eAAe,KAAK,CAAC"}

package/dist/constructed-response.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/constructed-response.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.
+ */
+declare const _default: {
+    new (props: any): {
+        componentDidUpdate(prevProps: any): void;
+        render(): JSX.Element;
+    };
+    propTypes: {
+        markup: import("prop-types").Requireable<string>;
+        layout: import("prop-types").Requireable<object>;
+        value: import("prop-types").Requireable<object>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        customMarkMarkupComponent: import("prop-types").Requireable<(...args: any[]) => any>;
+        elementType: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;
+//# sourceMappingURL=constructed-response.d.ts.map

package/dist/constructed-response.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constructed-response.d.ts","sourceRoot":"","sources":["../src/constructed-response.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;;;;;;;;;;;;;;;AAkFH,wBAA8C"}

package/dist/constructed-response.js

@@ -0,0 +1,55 @@
+import { withMask as e } from "./with-mask.js";
+import "react";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+import i from "classnames";
+import a from "@pie-lib/editable-html-tip-tap";
+//#region src/constructed-response.tsx
+var o = t(a)(() => ({
+	display: "inline-block",
+	verticalAlign: "middle",
+	margin: "4px",
+	borderRadius: "4px",
+	border: `1px solid ${r.black()}`,
+	"&.correct": { border: `1px solid ${r.correct()}` },
+	"&.incorrect": { border: `1px solid ${r.incorrect()}` }
+})), s = e("input", (e) => (t, r) => {
+	let { adjustedLimit: a, disabled: s, feedback: c, showCorrectAnswer: l, maxLength: u, spellCheck: d, pluginProps: f, onChange: p } = e, m = t.data?.dataset || {};
+	if (m.component === "input") {
+		let h = (e.choices && m && e.choices[m.id] || [])[0], g = l ? h && h.label : r[m.id] || "", _ = u && u[m.id], v = c && c[m.id], y = l || v === "correct", b = !l && v === "incorrect";
+		return /* @__PURE__ */ n(o, {
+			id: m.id,
+			disabled: l || s,
+			disableUnderline: !0,
+			onChange: (e) => {
+				p({
+					...r,
+					[m.id]: e
+				});
+			},
+			markup: g || "",
+			charactersLimit: a ? _ : 25,
+			activePlugins: ["languageCharacters"],
+			pluginProps: f,
+			languageCharactersProps: [{ language: "spanish" }],
+			spellCheck: d,
+			adjustWidthForLimit: !0,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.keyCode === 13) return !0;
+			},
+			autoWidthToolbar: !0,
+			toolbarOpts: {
+				minWidth: "auto",
+				noBorder: !0,
+				isHidden: !!f?.characters?.disabled
+			},
+			className: i({
+				correct: y,
+				incorrect: b
+			})
+		}, `${t.type}-input-${m.id}`);
+	}
+});
+//#endregion
+export { s as default };

package/dist/customizable.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/customizable.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.
+ */
+declare const _default: {
+    new (props: any): {
+        componentDidUpdate(prevProps: any): void;
+        render(): JSX.Element;
+    };
+    propTypes: {
+        markup: import("prop-types").Requireable<string>;
+        layout: import("prop-types").Requireable<object>;
+        value: import("prop-types").Requireable<object>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        customMarkMarkupComponent: import("prop-types").Requireable<(...args: any[]) => any>;
+        elementType: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;
+//# sourceMappingURL=customizable.d.ts.map

package/dist/customizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customizable.d.ts","sourceRoot":"","sources":["../src/customizable.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;;;;;;;;;;;;;;;AAMH,wBA6BG"}

package/dist/customizable.js

@@ -0,0 +1,8 @@
+import { withMask as e } from "./with-mask.js";
+//#region src/customizable.tsx
+var t = e("input", (e) => (t, n, r) => {
+	let i = t.data && t.data.dataset || {};
+	if (i.component === "input") return e.customMarkMarkupComponent(i.id);
+});
+//#endregion
+export { t as default };

package/dist/drag-in-the-blank.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/drag-in-the-blank.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 default class DragInTheBlank extends React.Component {
+    constructor(props: any);
+    static propTypes: {
+        markup: PropTypes.Requireable<string>;
+        layout: PropTypes.Requireable<object>;
+        choicesPosition: PropTypes.Requireable<string>;
+        choices: PropTypes.Requireable<any[]>;
+        value: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        duplicates: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        feedback: PropTypes.Requireable<object>;
+        correctResponse: PropTypes.Requireable<object>;
+        showCorrectAnswer: PropTypes.Requireable<boolean>;
+        emptyResponseAreaWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        emptyResponseAreaHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        instanceId: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        instanceId: string;
+    };
+    handleDragStart: any;
+    renderDragOverlay: any;
+    handleDragEnd: any;
+    getPositionDirection: any;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=drag-in-the-blank.d.ts.map

package/dist/drag-in-the-blank.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-in-the-blank.d.ts","sourceRoot":"","sources":["../src/drag-in-the-blank.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAqDnC,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAS;gBAC7C,KAAK,KAAA;IAQjB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;MAed;IAEF,MAAM,CAAC,YAAY;;MAEjB;IAEF,eAAe,EAAE,GAAG,CASlB;IAEF,iBAAiB,EAAE,GAAG,CAepB;IAEF,aAAa,EAAE,GAAG,CAuChB;IAEF,oBAAoB,EAAE,GAAG,CAyBvB;IAEF,MAAM;CA4DP"}

package/dist/drag-in-the-blank.js

@@ -0,0 +1,164 @@
+import { withMask as e } from "./with-mask.js";
+import t from "./choices/choice.js";
+import n from "./choices/index.js";
+import r from "./components/blank.js";
+import i from "react";
+import a from "prop-types";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { DragProvider as c } from "@pie-lib/drag";
+import { DragOverlay as l, rectIntersection as u } from "@dnd-kit/core";
+//#region src/drag-in-the-blank.tsx
+var d = e("blank", (e) => (t, n, i) => {
+	let a = t.data?.dataset || {};
+	if (a.component === "blank") {
+		let { disabled: s, duplicates: c, correctResponse: l, feedback: u, showCorrectAnswer: d, emptyResponseAreaWidth: f, emptyResponseAreaHeight: p, instanceId: m, isDragging: h } = e, g = d ? l[a.id] : n[a.id], _ = g && e.choices.find((e) => e.id === g);
+		return /* @__PURE__ */ o(r, {
+			correct: d || u && u[a.id],
+			disabled: s,
+			duplicates: c,
+			choice: _,
+			id: a.id,
+			emptyResponseAreaWidth: f,
+			emptyResponseAreaHeight: p,
+			onChange: (e, t) => {
+				let r = { ...n };
+				t === void 0 ? delete r[e] : r[e] = t, i(r);
+			},
+			instanceId: m,
+			isDragging: h
+		}, `${t.type}-${a.id}`);
+	}
+}), f = class extends i.Component {
+	constructor(e) {
+		super(e), this.state = {
+			activeDragItem: null,
+			dropAnimation: void 0
+		};
+	}
+	static propTypes = {
+		markup: a.string,
+		layout: a.object,
+		choicesPosition: a.string,
+		choices: a.array,
+		value: a.object,
+		onChange: a.func,
+		duplicates: a.bool,
+		disabled: a.bool,
+		feedback: a.object,
+		correctResponse: a.object,
+		showCorrectAnswer: a.bool,
+		emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
+		emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
+		instanceId: a.string
+	};
+	static defaultProps = { instanceId: "drag-in-the-blank" };
+	handleDragStart = (e) => {
+		let { active: t } = e;
+		t?.data?.current && this.setState({
+			activeDragItem: t.data.current,
+			dropAnimation: void 0
+		});
+	};
+	renderDragOverlay = () => {
+		let { activeDragItem: e } = this.state;
+		return e && e.type === "MaskBlank" ? /* @__PURE__ */ o(t, {
+			disabled: e.disabled,
+			choice: e.choice,
+			instanceId: e.instanceId
+		}) : null;
+	};
+	handleDragEnd = (e) => {
+		let { active: t, over: n } = e, { onChange: r, value: i } = this.props, a = t?.data?.current, o = n?.data?.current, s = !!t && !!n && a?.type === "MaskBlank" && o?.accepts?.includes("MaskBlank");
+		if (this.setState({
+			activeDragItem: null,
+			dropAnimation: s ? null : void 0
+		}), !s || !r) return;
+		let c = a, l = o.id;
+		if (o.toChoiceBoard === !0) {
+			if (!c.fromChoice && c.id) {
+				let e = { ...i };
+				delete e[c.id], r(e);
+			}
+		} else if (c.fromChoice === !0) {
+			if (l && l !== "drag-in-the-blank-droppable") {
+				let e = { ...i };
+				e[l] = c.choice.id, r(e);
+			}
+		} else if (c.id && c.id !== l) {
+			let e = { ...i };
+			e[l] = c.choice.id, delete e[c.id], r(e);
+		}
+	};
+	getPositionDirection = (e) => {
+		let t, n, r;
+		switch (e) {
+			case "left":
+				t = "row", r = "center";
+				break;
+			case "right":
+				t = "row-reverse", n = "flex-end", r = "center";
+				break;
+			case "below":
+				t = "column-reverse";
+				break;
+			default:
+				t = "column";
+				break;
+		}
+		return {
+			flexDirection: t,
+			justifyContent: n,
+			alignItems: r
+		};
+	};
+	render() {
+		let { markup: e, duplicates: t, value: r, onChange: i, choicesPosition: a, choices: f, correctResponse: p, disabled: m, feedback: h, showCorrectAnswer: g, emptyResponseAreaWidth: _, emptyResponseAreaHeight: v, layout: y, instanceId: b } = this.props, x = a || "below", S = {
+			display: "flex",
+			minWidth: "100px",
+			...this.getPositionDirection(x)
+		};
+		return /* @__PURE__ */ o(c, {
+			onDragStart: this.handleDragStart,
+			onDragEnd: this.handleDragEnd,
+			collisionDetection: u,
+			children: /* @__PURE__ */ s("div", {
+				ref: (e) => this.rootRef = e,
+				style: S,
+				children: [
+					/* @__PURE__ */ o(n, {
+						choicePosition: x,
+						choices: f,
+						value: r,
+						duplicates: t,
+						disabled: m,
+						instanceId: b
+					}),
+					/* @__PURE__ */ o(d, {
+						elementType: "drag-in-the-blank",
+						markup: e,
+						layout: y,
+						value: r,
+						choices: f,
+						onChange: i,
+						disabled: m,
+						duplicates: t,
+						feedback: h,
+						correctResponse: p,
+						showCorrectAnswer: g,
+						emptyResponseAreaWidth: _,
+						emptyResponseAreaHeight: v,
+						instanceId: b,
+						isDragging: !!this.state.activeDragItem
+					}),
+					/* @__PURE__ */ o(l, {
+						style: { pointerEvents: "none" },
+						dropAnimation: this.state.dropAnimation,
+						children: this.renderDragOverlay()
+					})
+				]
+			})
+		});
+	}
+};
+//#endregion
+export { f as default };