@pie-lib/mask-markup 3.1.4 → 4.0.0-next.37

package/dist/components/dropdown.js

@@ -0,0 +1,311 @@
+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 = l.v("pie"), w = 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: "24px" },
+	"& svg": {
+		position: "absolute",
+		right: "4px",
+		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`
+	}
+})), T = n(y)(() => ({
+	"& .MuiPaper-root": { backgroundColor: C("background", l.defaults.WHITE) },
+	"& .MuiList-root": { padding: 0 }
+})), E = 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: "16px 8px",
+	borderRadius: "4px",
+	"&.selected": {
+		color: `${l.text()} !important`,
+		backgroundColor: `${l.background()} !important`,
+		"&:hover": {
+			color: l.text(),
+			backgroundColor: `${l.dropdownBackground()} !important`
+		}
+	}
+})), D = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), O = n("span")(() => ({
+	fontSize: "max(1rem, 14px)",
+	flexShrink: 0,
+	paddingLeft: "8px"
+})), k = n(d)(() => ({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+})), A = 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() }
+})), j = 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() }
+})), M = 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) => {
+		let { id: t, value: n, choices: r } = this.props, i = null;
+		if (n) {
+			let e = (r || []).findIndex((e) => e.value === n);
+			e >= 0 && (i = `dropdown-option-${t}-${e}`);
+		}
+		this.setState({
+			anchorEl: e.currentTarget,
+			highlightedOptionId: i
+		});
+	};
+	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(A, { className: "correct" }) : /* @__PURE__ */ a(j, { 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(E, {
+					tabIndex: -1,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ a(D, { dangerouslySetInnerHTML: { __html: e.label } })
+				}, t))
+			}),
+			/* @__PURE__ */ a(k, {
+				id: b,
+				tabIndex: -1,
+				"aria-hidden": "true",
+				children: x
+			}),
+			/* @__PURE__ */ o(w, {
+				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(D, {
+						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(T, {
+				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(E, {
+						id: i,
+						className: t.value === r ? "selected" : "",
+						selected: t.value === r,
+						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(D, {
+							ref: (e) => this.elementRefs[n] = e,
+							dangerouslySetInnerHTML: { __html: t.label }
+						}), /* @__PURE__ */ a(O, { dangerouslySetInnerHTML: { __html: t.value === r ? " ✓" : "" } })]
+					}, `${t.label}-${n}`);
+				})
+			})
+		] });
+	}
+};
+//#endregion
+export { M 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 React from 'react';
+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;
+    }): React.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;

package/dist/constructed-response.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @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.
+ */
+import React from 'react';
+declare const _default: {
+    new (props: any): {
+        componentDidUpdate(prevProps: any): void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    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>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/dist/constructed-response.js

@@ -0,0 +1,56 @@
+import { withMask as e } from "./with-mask.js";
+import { clsx as t } from "./node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import "react";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r } from "react/jsx-runtime";
+import { color as i } from "@pie-lib/render-ui";
+import a from "@pie-lib/editable-html-tip-tap";
+//#region src/constructed-response.tsx
+var o = n(a)(() => ({
+	display: "inline-block",
+	verticalAlign: "middle",
+	margin: "4px",
+	borderRadius: "4px",
+	border: `1px solid ${i.black()}`,
+	"&.correct": { border: `1px solid ${i.correct()}` },
+	"&.incorrect": { border: `1px solid ${i.incorrect()}` }
+})), s = e("input", (e) => (n, i) => {
+	let { adjustedLimit: a, disabled: s, feedback: c, showCorrectAnswer: l, maxLength: u, spellCheck: d, pluginProps: f, onChange: p } = e, m = n.data?.dataset || {};
+	if (m.component === "input") {
+		let h = (e.choices && m && e.choices[m.id] || [])[0], g = l ? h && h.label : i[m.id] || "", _ = u && u[m.id], v = c && c[m.id], y = l || v === "correct", b = !l && v === "incorrect";
+		return /* @__PURE__ */ r(o, {
+			id: m.id,
+			disabled: l || s,
+			disableUnderline: !0,
+			onChange: (e) => {
+				let t = {
+					...i,
+					[m.id]: e
+				};
+				p(t);
+			},
+			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: t({
+				correct: y,
+				incorrect: b
+			})
+		}, `${n.type}-input-${m.id}`);
+	}
+});
+//#endregion
+export { s as default };

package/dist/customizable.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @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(): import("react").JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    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>;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;

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,47 @@
+/**
+ * @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;
+    commitPlacement: any;
+    handleDragEnd: any;
+    onDragCancel: any;
+    isSameItem: any;
+    toggleItemSelection: any;
+    cancelSelection: any;
+    endAnyLiveKeyboardDrag: any;
+    placeSelectedItem: any;
+    isClickSoonAfterDragEnd: () => boolean;
+    onItemClick: any;
+    onPlacementClick: any;
+    getPositionDirection: any;
+    render(): React.JSX.Element;
+}