@pie-lib/mask-markup 3.0.4-next.34 → 3.0.4-next.35

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,28 @@
+/**
+ * @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, selectedItem, onSelectClick }: {
+    choice: any;
+    disabled: any;
+    instanceId: any;
+    selectedItem: any;
+    onSelectClick: 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>>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default Choice;

package/dist/choices/choice.js

@@ -0,0 +1,91 @@
+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, selected: n }) => ({
+	border: `solid 0px ${e.palette.primary.main}`,
+	margin: e.spacing(.5),
+	transform: "translate(0, 0)",
+	display: "inline-flex",
+	opacity: n ? .7 : 1,
+	...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" },
+	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { fontSize: "120% !important" }
+}));
+function p({ choice: n, disabled: r, instanceId: s, selectedItem: c, onSelectClick: p }) {
+	let m = t(null), { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = o({
+		id: `choice-${n.id}`,
+		data: {
+			choice: n,
+			instanceId: s,
+			fromChoice: !0,
+			type: l
+		},
+		disabled: r
+	});
+	e(() => {
+		i(m.current);
+	}, [n.value]);
+	let y = !!c && c.fromChoice === !0 && c.choice.id === n.id;
+	return /* @__PURE__ */ a(u, {
+		ref: _,
+		style: v ? {
+			width: m.current?.offsetWidth || 90,
+			height: m.current?.offsetHeight || 32
+		} : {},
+		disabled: r,
+		selected: y,
+		onClick: (e) => {
+			r || (e.stopPropagation(), p?.({
+				choice: n,
+				instanceId: s,
+				fromChoice: !0,
+				type: l
+			}));
+		},
+		...g,
+		...h,
+		children: /* @__PURE__ */ a(d, {
+			clickable: !1,
+			disabled: r,
+			ref: m,
+			label: /* @__PURE__ */ a(f, { dangerouslySetInnerHTML: { __html: n.value } })
+		})
+	});
+}
+p.propTypes = {
+	choice: n.object.isRequired,
+	disabled: n.bool,
+	instanceId: n.oneOfType([n.string, n.number]),
+	selectedItem: n.object,
+	onSelectClick: n.func
+};
+//#endregion
+export { l as DRAG_TYPE, p as default };

package/dist/choices/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @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>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    getStyleForWrapper: any;
+    handlePoolClick: any;
+    render(): React.JSX.Element;
+}

package/dist/choices/index.js

@@ -0,0 +1,59 @@
+import e from "./choice.js";
+import t from "react";
+import n from "prop-types";
+import { findKey as r } from "@pie-element/shared-lodash";
+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,
+		selectedItem: n.object,
+		onSelectClick: n.func,
+		onPlacementClick: n.func
+	};
+	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" };
+		}
+	};
+	handlePoolClick = () => {
+		let { disabled: e, selectedItem: t, onPlacementClick: n } = this.props;
+		e || t && n?.(void 0);
+	};
+	render() {
+		let { disabled: t, duplicates: n, choices: o, value: s, instanceId: c, selectedItem: l, onSelectClick: u } = this.props, d = o.filter((e) => n === !0 || r(s, (t) => t === e.id) === void 0);
+		return /* @__PURE__ */ i("div", {
+			style: {
+				...this.getStyleForWrapper(),
+				minWidth: "100px"
+			},
+			onClick: this.handlePoolClick,
+			children: /* @__PURE__ */ i(a, {
+				disabled: t,
+				instanceId: c,
+				children: d.map((n, r) => /* @__PURE__ */ i(e, {
+					disabled: t,
+					choice: n,
+					instanceId: c,
+					selectedItem: l,
+					onSelectClick: u
+				}, `${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,45 @@
+/**
+ * @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, selectedItem, onSelectClick, onPlacementClick, }: {
+    id: any;
+    disabled: any;
+    duplicates: any;
+    choice: any;
+    correct: any;
+    onChange: any;
+    emptyResponseAreaWidth: any;
+    emptyResponseAreaHeight: any;
+    instanceId: any;
+    selectedItem: any;
+    onSelectClick: any;
+    onPlacementClick: 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>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default DragDropBlank;

package/dist/components/blank.js

@@ -0,0 +1,273 @@
+import { clsx as e } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import t, { useEffect as n, useRef as r, useState as i } from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { renderMath as s } from "@pie-element/shared-math-rendering-mathjax";
+import c from "debug";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useDraggable as d, useDroppable as f } from "@dnd-kit/core";
+import p from "@mui/material/Chip";
+import { color as m } from "@pie-lib/render-ui";
+import { grey as h } from "@mui/material/colors";
+//#region src/components/blank.tsx
+c("pie-lib:mask-markup:blank");
+var g = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r }) => ({
+	border: `solid 0px ${m.primary()}`,
+	minWidth: "200px",
+	overflow: "hidden",
+	whiteSpace: "nowrap",
+	opacity: 1,
+	cursor: "default",
+	...t && {
+		whiteSpace: "nowrap",
+		overflow: "hidden"
+	},
+	...(e || n) && { opacity: .5 },
+	...r && { "&:hover": { cursor: "pointer" } }
+})), _ = o("span")({
+	display: "inline-flex",
+	touchAction: "none"
+}), v = o(p)(() => ({
+	backgroundColor: m.background(),
+	border: `2px dashed ${m.text()}`,
+	touchAction: "none",
+	color: m.text(),
+	fontSize: "inherit",
+	maxWidth: "374px",
+	position: "relative",
+	borderRadius: "3px",
+	"&.over": {
+		whiteSpace: "nowrap",
+		overflow: "hidden"
+	},
+	"&.parentOver": {
+		border: `1px solid ${h[500]}`,
+		backgroundColor: `${h[300]}`
+	},
+	"&.correct": { border: `solid 1px ${m.correct()}` },
+	"&.incorrect": { border: `solid 1px ${m.incorrect()}` },
+	"&.Mui-disabled": { opacity: 1 }
+})), y = o("span")(() => ({
+	whiteSpace: "normal",
+	pointerEvents: "none",
+	"& img": {
+		display: "block",
+		padding: "2px 0"
+	},
+	"& p": {
+		marginTop: "0",
+		marginBottom: "0"
+	},
+	"& mjx-frac": { fontSize: "120% !important" },
+	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { 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: a, choice: o, isOver: c, isDragging: d, dragItem: f, correct: p, emptyResponseAreaWidth: m, emptyResponseAreaHeight: h }) {
+	let g = r(null), _ = r(null), b = r(null), x = r(!1), [S, C] = i({
+		height: 0,
+		width: 0
+	}), w = () => {
+		D();
+	}, T = () => {
+		let e = _.current?.querySelector("img");
+		e ? e.onload = w : setTimeout(() => {
+			D();
+		}, 300);
+	}, E = () => {
+		if (!_.current) return null;
+		if (_.current.querySelector("mjx-container") && _.current.parentElement) return _.current.parentElement;
+		let e = _.current.querySelector("img");
+		return e ? _.current.textContent.trim().length > 0 ? _.current : e : _.current;
+	}, D = () => {
+		if (_.current && g.current && !x.current) {
+			x.current = !0, g.current.style.width = "auto", g.current.style.height = "auto", g.current.offsetHeight;
+			let e = E() || _.current, t = e.getBoundingClientRect(), n = e.offsetWidth || t.width || 0, r = Math.max(e.offsetHeight || 0, t.height || 0, e.scrollHeight || 0, _.current.scrollHeight || 0), i = n + 24 + 4 + 1, a = r + 24 + 4 + 1, o = parseFloat(m) || 0, s = parseFloat(h) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
+			C((e) => ({
+				width: c > o ? c : e.width,
+				height: l > s ? l : e.height
+			}));
+			let u = `${c}px`, d = `${l}px`;
+			g.current.style.width !== u && (g.current.style.width = u), g.current.style.height !== d && (g.current.style.height = d), x.current = !1;
+		}
+	}, O = () => {
+		let e = isNaN(parseFloat(m)) ? 0 : parseFloat(m), t = isNaN(parseFloat(h)) ? 0 : parseFloat(h);
+		return {
+			height: S.height || t,
+			width: S.width || e,
+			...e ? {} : { minWidth: 90 },
+			...t ? {} : { minHeight: 32 }
+		};
+	};
+	n(() => {
+		T();
+	}, []), n(() => {
+		if (typeof IntersectionObserver > "u" || !g.current) return;
+		let e = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && D();
+		}, { threshold: 0 });
+		return e.observe(g.current), () => e.disconnect();
+	}, []), n(() => {
+		g.current && s(g.current);
+	}, [
+		p,
+		c,
+		f?.choice?.value
+	]), n(() => {
+		if (!o) {
+			C({
+				height: 0,
+				width: 0
+			});
+			return;
+		}
+		T();
+	}, [o?.value]), n(() => {
+		!c && !d && (b.current = {
+			width: g.current.offsetWidth,
+			height: g.current.offsetHeight
+		});
+	}, [
+		o,
+		c,
+		d
+	]);
+	let k = f && c && f.choice && f.choice.value, A = o && o.value, j = c || d ? {
+		width: b.current?.width,
+		height: b.current?.height
+	} : O();
+	return /* @__PURE__ */ l(v, {
+		clickable: !1,
+		disabled: a,
+		ref: g,
+		component: "span",
+		label: /* @__PURE__ */ u(t.Fragment, { children: [/* @__PURE__ */ l(y, {
+			ref: _,
+			draggable: !0,
+			className: e({
+				over: c,
+				hidden: k
+			}),
+			dangerouslySetInnerHTML: { __html: A || "" }
+		}), k && /* @__PURE__ */ l(y, {
+			draggable: !0,
+			className: e({
+				over: c,
+				dragged: !0
+			}),
+			dangerouslySetInnerHTML: { __html: k || "" }
+		})] }),
+		className: e({
+			over: c,
+			parentOver: c,
+			correct: p !== void 0 && p,
+			incorrect: p !== void 0 && !p
+		}),
+		variant: a ? "outlined" : void 0,
+		style: j
+	});
+}
+b.defaultProps = {
+	emptyResponseAreaWidth: 0,
+	emptyResponseAreaHeight: 0
+}, b.propTypes = {
+	id: a.oneOfType([a.string, a.number]),
+	disabled: a.bool,
+	duplicates: a.bool,
+	choice: a.object,
+	isOver: a.bool,
+	dragItem: a.object,
+	correct: a.bool,
+	onChange: a.func,
+	emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
+	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
+	instanceId: a.string
+};
+function x({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange: o, emptyResponseAreaWidth: s, emptyResponseAreaHeight: c, instanceId: u, selectedItem: p, onSelectClick: m, onPlacementClick: h }) {
+	let [v, y] = i(!1), x = {
+		id: e,
+		choice: r,
+		instanceId: u,
+		fromChoice: !1,
+		type: "MaskBlank"
+	}, { attributes: S, listeners: C, setNodeRef: w, isDragging: T } = d({
+		id: `mask-blank-drag-${e}`,
+		disabled: t || !r,
+		data: x,
+		attributes: { tabIndex: r && !t ? 0 : -1 }
+	}), { setNodeRef: E, isOver: D, active: O } = f({
+		id: `mask-blank-drop-${e}`,
+		data: {
+			id: e,
+			accepts: ["MaskBlank"],
+			instanceId: u
+		}
+	}), k = !!p && p.fromChoice === !1 && p.id === e, A = () => {
+		t || (k ? m?.(x) : p ? h?.(e) : r && m?.(x));
+	}, j = !r && !t, M = !!r && !t, N = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), A());
+	}, P = !!p, F = D || P && v && !t;
+	return /* @__PURE__ */ l(g, {
+		ref: E,
+		role: j ? "button" : void 0,
+		tabIndex: j ? 0 : -1,
+		onClick: A,
+		onKeyDown: j ? N : void 0,
+		onMouseEnter: () => y(!0),
+		onMouseLeave: () => y(!1),
+		dragged: T,
+		over: F,
+		selected: k,
+		showsPointerCursor: P && !t,
+		children: /* @__PURE__ */ l(_, {
+			ref: w,
+			...M ? S : {},
+			...C,
+			children: /* @__PURE__ */ l(b, {
+				id: e,
+				disabled: t,
+				duplicates: n,
+				choice: r,
+				isOver: F,
+				dragItem: O?.data?.current,
+				correct: a,
+				onChange: o,
+				emptyResponseAreaWidth: s,
+				emptyResponseAreaHeight: c,
+				instanceId: u
+			})
+		})
+	});
+}
+x.defaultProps = {
+	emptyResponseAreaWidth: 0,
+	emptyResponseAreaHeight: 0
+}, x.propTypes = {
+	id: a.oneOfType([a.string, a.number]),
+	disabled: a.bool,
+	duplicates: a.bool,
+	choice: a.object,
+	correct: a.bool,
+	onChange: a.func,
+	emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
+	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
+	instanceId: a.string,
+	selectedItem: a.object,
+	onSelectClick: a.func,
+	onPlacementClick: a.func
+};
+//#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;