@pie-lib/mask-markup 3.0.3 → 3.0.4-next.0

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/choices/choice.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/choices/choice.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 const DRAG_TYPE = "MaskBlank";
+declare function Choice({ choice, disabled, instanceId }: {
+    choice: any;
+    disabled: any;
+    instanceId: any;
+}): React.JSX.Element;
+declare namespace Choice {
+    var propTypes: {
+        choice: PropTypes.Validator<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        instanceId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    };
+}
+export default Choice;

package/dist/choices/choice.js

@@ -0,0 +1,77 @@
+import { useEffect as e, useRef as t } from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+import { jsx as a } from "react/jsx-runtime";
+import { useDraggable as o } from "@dnd-kit/core";
+import s from "@mui/material/Chip";
+import { color as c } from "@pie-lib/render-ui";
+//#region src/choices/choice.tsx
+var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
+	border: `solid 0px ${e.palette.primary.main}`,
+	borderRadius: e.spacing(2),
+	margin: e.spacing(.5),
+	transform: "translate(0, 0)",
+	display: "inline-flex",
+	...t && {}
+})), d = r(s)(() => ({
+	backgroundColor: c.white(),
+	border: `1px solid ${c.text()}`,
+	color: c.text(),
+	alignItems: "center",
+	display: "inline-flex",
+	height: "initial",
+	minHeight: "32px",
+	fontSize: "inherit",
+	whiteSpace: "pre-wrap",
+	maxWidth: "374px",
+	pointerEvents: "none",
+	borderRadius: "3px",
+	paddingTop: "12px",
+	paddingBottom: "12px",
+	"&.Mui-disabled": { opacity: 1 }
+})), f = r("span")(() => ({
+	whiteSpace: "normal",
+	"& img": {
+		display: "block",
+		padding: "2px 0"
+	},
+	"& mjx-frac": { fontSize: "120% !important" }
+}));
+function p({ choice: n, disabled: r, instanceId: s }) {
+	let c = t(null), { attributes: p, listeners: m, setNodeRef: h, isDragging: g } = o({
+		id: `choice-${n.id}`,
+		data: {
+			choice: n,
+			instanceId: s,
+			fromChoice: !0,
+			type: l
+		},
+		disabled: r
+	});
+	return e(() => {
+		i(c.current);
+	}, [n.value]), /* @__PURE__ */ a(u, {
+		ref: h,
+		style: g ? {
+			width: c.current?.offsetWidth,
+			height: c.current?.offsetHeight
+		} : {},
+		disabled: r,
+		...m,
+		...p,
+		children: /* @__PURE__ */ a(d, {
+			clickable: !1,
+			disabled: r,
+			ref: c,
+			label: /* @__PURE__ */ a(f, { dangerouslySetInnerHTML: { __html: n.value } })
+		})
+	});
+}
+p.propTypes = {
+	choice: n.object.isRequired,
+	disabled: n.bool,
+	instanceId: n.oneOfType([n.string, n.number])
+};
+//#endregion
+export { p as default };

package/dist/choices/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/choices/index.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 Choices extends React.Component {
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        duplicates: PropTypes.Requireable<boolean>;
+        choices: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        value: PropTypes.Requireable<object>;
+        choicePosition: PropTypes.Validator<string>;
+        instanceId: PropTypes.Requireable<string>;
+    };
+    getStyleForWrapper: any;
+    render(): React.JSX.Element;
+}

package/dist/choices/index.js

@@ -0,0 +1,49 @@
+import e from "./choice.js";
+import t from "react";
+import n from "prop-types";
+import { findKey as r } from "lodash-es";
+import { jsx as i } from "react/jsx-runtime";
+import { DragDroppablePlaceholder as a } from "@pie-lib/drag";
+//#region src/choices/index.tsx
+var o = class extends t.Component {
+	static propTypes = {
+		disabled: n.bool,
+		duplicates: n.bool,
+		choices: n.arrayOf(n.shape({
+			label: n.string,
+			value: n.string
+		})),
+		value: n.object,
+		choicePosition: n.string.isRequired,
+		instanceId: n.string
+	};
+	getStyleForWrapper = () => {
+		let { choicePosition: e } = this.props;
+		switch (e) {
+			case "above": return { margin: "0 0 40px 0" };
+			case "below": return { margin: "40px 0 0 0" };
+			case "right": return { margin: "0 0 0 40px" };
+			default: return { margin: "0 40px 0 0" };
+		}
+	};
+	render() {
+		let { disabled: t, duplicates: n, choices: o, value: s, instanceId: c } = this.props, l = o.filter((e) => n === !0 ? !0 : r(s, (t) => t === e.id) === void 0);
+		return /* @__PURE__ */ i("div", {
+			style: {
+				...this.getStyleForWrapper(),
+				minWidth: "100px"
+			},
+			children: /* @__PURE__ */ i(a, {
+				disabled: t,
+				instanceId: c,
+				children: l.map((n, r) => /* @__PURE__ */ i(e, {
+					disabled: t,
+					choice: n,
+					instanceId: c
+				}, `${n.value}-${r}`))
+			})
+		});
+	}
+};
+//#endregion
+export { o as default };

package/dist/componentize.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/componentize.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: (s: any, t: any) => {
+    markup: any;
+};
+export default _default;

package/dist/componentize.js

@@ -0,0 +1,4 @@
+//#region src/componentize.tsx
+var e = /\{\{(\d+)\}\}/g, t = (t, n) => t ? { markup: t.replace(e, (e, t) => `<span data-component="${n}" data-id="${t}"></span>`) } : { markup: "" };
+//#endregion
+export { t as default };

package/dist/components/blank.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/components/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';
+declare function DragDropBlank({ id, disabled, duplicates, choice, correct, onChange, emptyResponseAreaWidth, emptyResponseAreaHeight, instanceId, }: {
+    id: any;
+    disabled: any;
+    duplicates: any;
+    choice: any;
+    correct: any;
+    onChange: any;
+    emptyResponseAreaWidth: any;
+    emptyResponseAreaHeight: any;
+    instanceId: any;
+}): React.JSX.Element;
+declare namespace DragDropBlank {
+    var defaultProps: {
+        emptyResponseAreaWidth: number;
+        emptyResponseAreaHeight: number;
+    };
+    var propTypes: {
+        id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        disabled: PropTypes.Requireable<boolean>;
+        duplicates: PropTypes.Requireable<boolean>;
+        choice: PropTypes.Requireable<object>;
+        correct: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        emptyResponseAreaWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        emptyResponseAreaHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        instanceId: PropTypes.Requireable<string>;
+    };
+}
+export default DragDropBlank;

package/dist/components/blank.js

@@ -0,0 +1,240 @@
+import e, { useEffect as t, useRef as n, useState as r } from "react";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { renderMath as o } from "@pie-element/shared-math-rendering-mathjax";
+import s from "debug";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useDraggable as u, useDroppable as d } from "@dnd-kit/core";
+import f from "@mui/material/Chip";
+import { color as p } from "@pie-lib/render-ui";
+import { CSS as m } from "@dnd-kit/utilities";
+import h from "classnames";
+import { grey as g } from "@mui/material/colors";
+//#region src/components/blank.tsx
+s("pie-lib:mask-markup:blank");
+var _ = a("span")(({ dragged: e, over: t }) => ({
+	border: `solid 0px ${p.primary()}`,
+	minWidth: "200px",
+	touchAction: "none",
+	overflow: "hidden",
+	whiteSpace: "nowrap",
+	opacity: 1,
+	...t && {
+		whiteSpace: "nowrap",
+		overflow: "hidden"
+	},
+	...e && { opacity: .5 }
+})), v = a(f)(() => ({
+	backgroundColor: p.background(),
+	border: `2px dashed ${p.text()}`,
+	touchAction: "none",
+	color: p.text(),
+	fontSize: "inherit",
+	maxWidth: "374px",
+	position: "relative",
+	borderRadius: "3px",
+	"&.over": {
+		whiteSpace: "nowrap",
+		overflow: "hidden"
+	},
+	"&.parentOver": {
+		border: `1px solid ${g[500]}`,
+		backgroundColor: `${g[300]}`
+	},
+	"&.correct": { border: `solid 1px ${p.correct()}` },
+	"&.incorrect": { border: `solid 1px ${p.incorrect()}` },
+	"&.Mui-disabled": { opacity: 1 }
+})), y = a("span")(() => ({
+	whiteSpace: "normal",
+	pointerEvents: "none",
+	"& img": {
+		display: "block",
+		padding: "2px 0"
+	},
+	"& p": {
+		marginTop: "0",
+		marginBottom: "0"
+	},
+	"& mjx-frac": { fontSize: "120% !important" },
+	"&.over": {
+		whiteSpace: "nowrap",
+		overflow: "hidden"
+	},
+	"&.hidden": {
+		color: "transparent",
+		opacity: 0
+	},
+	"&.dragged": {
+		position: "absolute",
+		left: 16,
+		maxWidth: "60px",
+		top: "50%",
+		transform: "translateY(-50%)"
+	}
+}));
+function b({ disabled: i, choice: a, isOver: s, isDragging: u, dragItem: d, correct: f, emptyResponseAreaWidth: p, emptyResponseAreaHeight: m }) {
+	let g = n(null), _ = n(null), b = n(null), [x, S] = r({
+		height: 0,
+		width: 0
+	}), C = () => {
+		E();
+	}, w = () => {
+		let e = _.current?.querySelector("img");
+		e ? e.onload = C : setTimeout(() => {
+			E();
+		}, 300);
+	}, T = () => _.current ? _.current.querySelector("mjx-container") && _.current.parentElement ? _.current.parentElement : _.current.querySelector("img") || _.current : null, E = () => {
+		if (_.current && g.current) {
+			g.current.style.width = "auto", g.current.style.height = "auto", g.current.offsetHeight;
+			let e = T() || _.current, t = e.getBoundingClientRect(), n = t.width || e.offsetWidth || 0, r = Math.max(t.height || 0, e.offsetHeight || 0, e.scrollHeight || 0, _.current.scrollHeight || 0), i = n + 24, a = r + 24, o = parseFloat(p) || 0, s = parseFloat(m) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
+			S((e) => ({
+				width: c > o ? c : e.width,
+				height: l > s ? l : e.height
+			})), g.current.style.width = `${c}px`, g.current.style.height = `${l}px`;
+		}
+	}, D = () => {
+		let e = isNaN(parseFloat(p)) ? 0 : parseFloat(p), t = isNaN(parseFloat(m)) ? 0 : parseFloat(m);
+		return {
+			height: x.height || t,
+			width: x.width || e,
+			...e ? {} : { minWidth: 90 },
+			...t ? {} : { minHeight: 32 }
+		};
+	};
+	t(() => {
+		w();
+	}, []), t(() => {
+		g.current && o(g.current);
+	}, [
+		f,
+		s,
+		d?.choice?.value
+	]), t(() => {
+		if (!a) {
+			S({
+				height: 0,
+				width: 0
+			});
+			return;
+		}
+		w();
+	}, [a]), t(() => {
+		!s && !u && (b.current = {
+			width: g.current.offsetWidth,
+			height: g.current.offsetHeight
+		});
+	}, [
+		a,
+		s,
+		u
+	]);
+	let O = d && s && d.choice && d.choice.value, k = a && a.value, A = s || u ? {
+		width: b.current?.width,
+		height: b.current?.height
+	} : D();
+	return /* @__PURE__ */ c(v, {
+		clickable: !1,
+		disabled: i,
+		ref: g,
+		component: "span",
+		label: /* @__PURE__ */ l(e.Fragment, { children: [/* @__PURE__ */ c(y, {
+			ref: _,
+			draggable: !0,
+			className: h({
+				over: s,
+				hidden: O
+			}),
+			dangerouslySetInnerHTML: { __html: k || "" }
+		}), O && /* @__PURE__ */ c(y, {
+			draggable: !0,
+			className: h({
+				over: s,
+				dragged: !0
+			}),
+			dangerouslySetInnerHTML: { __html: O || "" }
+		})] }),
+		className: h({
+			over: s,
+			parentOver: s,
+			correct: f !== void 0 && f,
+			incorrect: f !== void 0 && !f
+		}),
+		variant: i ? "outlined" : void 0,
+		style: A
+	});
+}
+b.defaultProps = {
+	emptyResponseAreaWidth: 0,
+	emptyResponseAreaHeight: 0
+}, b.propTypes = {
+	id: i.oneOfType([i.string, i.number]),
+	disabled: i.bool,
+	duplicates: i.bool,
+	choice: i.object,
+	isOver: i.bool,
+	dragItem: i.object,
+	correct: i.bool,
+	onChange: i.func,
+	emptyResponseAreaWidth: i.oneOfType([i.string, i.number]),
+	emptyResponseAreaHeight: i.oneOfType([i.string, i.number]),
+	instanceId: i.string
+};
+function x({ id: e, disabled: t, duplicates: n, choice: r, correct: i, onChange: a, emptyResponseAreaWidth: o, emptyResponseAreaHeight: s, instanceId: l }) {
+	let { attributes: f, listeners: p, setNodeRef: h, transform: g, isDragging: v } = u({
+		id: `mask-blank-drag-${e}`,
+		disabled: t || !r,
+		data: {
+			id: e,
+			choice: r,
+			instanceId: l,
+			fromChoice: !1,
+			type: "MaskBlank"
+		}
+	}), { setNodeRef: y, isOver: x, active: S } = d({
+		id: `mask-blank-drop-${e}`,
+		data: {
+			id: e,
+			accepts: ["MaskBlank"],
+			instanceId: l
+		}
+	});
+	return /* @__PURE__ */ c(_, {
+		ref: (e) => {
+			h(e), y(e);
+		},
+		style: { transform: m.Translate.toString(g) },
+		dragged: v,
+		over: x,
+		...f,
+		...p,
+		children: /* @__PURE__ */ c(b, {
+			id: e,
+			disabled: t,
+			duplicates: n,
+			choice: r,
+			isOver: x,
+			dragItem: S?.data?.current,
+			correct: i,
+			onChange: a,
+			emptyResponseAreaWidth: o,
+			emptyResponseAreaHeight: s,
+			instanceId: l
+		})
+	});
+}
+x.defaultProps = {
+	emptyResponseAreaWidth: 0,
+	emptyResponseAreaHeight: 0
+}, x.propTypes = {
+	id: i.oneOfType([i.string, i.number]),
+	disabled: i.bool,
+	duplicates: i.bool,
+	choice: i.object,
+	correct: i.bool,
+	onChange: i.func,
+	emptyResponseAreaWidth: i.oneOfType([i.string, i.number]),
+	emptyResponseAreaHeight: i.oneOfType([i.string, i.number]),
+	instanceId: i.string
+};
+//#endregion
+export { x as default };

package/dist/components/correct-input.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/components/correct-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 React from 'react';
+declare const CorrectInput: (props: any) => React.JSX.Element;
+export default CorrectInput;

package/dist/components/dropdown.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/components/dropdown.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';
+declare class Dropdown extends React.Component {
+    static propTypes: {
+        id: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        correct: PropTypes.Requireable<boolean>;
+        choices: PropTypes.Requireable<(PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        showCorrectAnswer: PropTypes.Requireable<boolean>;
+        singleQuery: PropTypes.Requireable<boolean>;
+        correctValue: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    handleClick: any;
+    handleClose: any;
+    handleHighlight: any;
+    handleSelect: any;
+    handleHover: any;
+    getLabel(choices: any, value: any): any;
+    render(): React.JSX.Element;
+}
+export default Dropdown;