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

package/dist/components/dropdown.js

@@ -1,320 +0,0 @@
-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: "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`
-	}
-})), 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: "16px 8px",
-	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)",
-	flexShrink: 0,
-	paddingLeft: "8px"
-})), 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) => {
-		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(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" : "",
-						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(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

@@ -1,37 +0,0 @@
-/**
- * @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

@@ -1,44 +0,0 @@
-/**
- * @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

@@ -1,55 +0,0 @@
-import { withMask as e } from "./with-mask.js";
-import 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) => {
-				p({
-					...i,
-					[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: t({
-				correct: y,
-				incorrect: b
-			})
-		}, `${n.type}-input-${m.id}`);
-	}
-});
-//#endregion
-export { s as default };

package/dist/customizable.d.ts

@@ -1,43 +0,0 @@
-/**
- * @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

@@ -1,8 +0,0 @@
-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

@@ -1,37 +0,0 @@
-/**
- * @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(): React.JSX.Element;
-}