@pie-lib/math-toolbar 3.0.2-next.2 → 3.0.3-next.0

package/dist/done-button.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-lib/packages/math-toolbar/src/done-button.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 RawDoneButton: {
+    ({ onClick, hideBackground }: {
+        onClick: any;
+        hideBackground: any;
+    }): React.JSX.Element;
+    propTypes: {
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        hideBackground: PropTypes.Requireable<boolean>;
+    };
+};
+export declare const DoneButton: {
+    ({ onClick, hideBackground }: {
+        onClick: any;
+        hideBackground: any;
+    }): React.JSX.Element;
+    propTypes: {
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        hideBackground: PropTypes.Requireable<boolean>;
+    };
+};

package/dist/done-button.js

@@ -0,0 +1,34 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n } from "react/jsx-runtime";
+import r from "@mui/material/IconButton";
+import i from "@mui/icons-material/Check";
+//#region src/done-button.tsx
+var a = t(r)(({ theme: e, hideBackground: t }) => ({
+	verticalAlign: "top",
+	width: "28px",
+	height: "28px",
+	color: "#00bb00",
+	...t && {
+		backgroundColor: e.palette.common.white,
+		"&:hover": { backgroundColor: e.palette.grey[200] }
+	},
+	"& .MuiIconButton-label": {
+		position: "absolute",
+		top: "2px"
+	}
+})), o = ({ onClick: e, hideBackground: t }) => /* @__PURE__ */ n(a, {
+	"aria-label": "Done",
+	onClick: e,
+	hideBackground: t,
+	size: "large",
+	children: /* @__PURE__ */ n(i, {})
+});
+o.propTypes = {
+	onClick: e.func,
+	hideBackground: e.bool
+};
+var s = o;
+//#endregion
+export { s as DoneButton };

package/dist/editor-and-pad.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @synced-from pie-lib/packages/math-toolbar/src/editor-and-pad.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 class EditorAndPad extends React.Component {
+    static propTypes: {
+        classNames: PropTypes.Requireable<object>;
+        keypadMode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        autoFocus: PropTypes.Requireable<boolean>;
+        allowAnswerBlock: PropTypes.Requireable<boolean>;
+        showKeypad: PropTypes.Requireable<boolean>;
+        controlledKeypad: PropTypes.Requireable<boolean>;
+        controlledKeypadMode: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<string>;
+        noDecimal: PropTypes.Requireable<boolean>;
+        hideInput: PropTypes.Requireable<boolean>;
+        noLatexHandling: PropTypes.Requireable<boolean>;
+        layoutForKeyPad: PropTypes.Requireable<object>;
+        maxResponseAreas: PropTypes.Requireable<number>;
+        additionalKeys: PropTypes.Requireable<any[]>;
+        latex: PropTypes.Validator<string>;
+        onAnswerBlockAdd: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    onClick: any;
+    updateDisable: any;
+    onAnswerBlockClick: any;
+    onEditorChange: any;
+    /** Only render if the mathquill instance's latex is different
+     * or the keypad state changed from one state to the other (shown / hidden) */
+    shouldComponentUpdate(nextProps: any, nextState: any): boolean;
+    onEditorTypeChange: any;
+    checkResponseAreasNumber: any;
+    render(): React.JSX.Element;
+}
+export default EditorAndPad;

package/dist/editor-and-pad.js

@@ -0,0 +1,352 @@
+import { markFractionBaseSuperscripts as e } from "./utils.js";
+import t from "react";
+import n from "prop-types";
+import r from "debug";
+import i from "@mui/material/Button";
+import { styled as a } from "@mui/material/styles";
+import o from "@mui/material/MenuItem";
+import s from "@mui/material/Select";
+import { isEqual as c } from "lodash-es";
+import l from "@mui/material/FormControl";
+import u from "@mui/material/InputLabel";
+import { HorizontalKeypad as d, mq as f, updateSpans as p } from "@pie-lib/math-input";
+import { color as m } from "@pie-lib/render-ui";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/editor-and-pad.tsx
+var { commonMqFontStyles: _, commonMqKeyboardStyles: v, longdivStyles: y, supsubStyles: b } = f.CommonMqStyles, x = r("@pie-lib:math-toolbar:editor-and-pad"), S = /\.|,/g, C = a("div")(({ theme: e }) => ({
+	zIndex: 9,
+	position: "relative",
+	textAlign: "center",
+	width: "auto",
+	"& > .mq-math-mode": { border: "solid 1px lightgrey" },
+	"& > .mq-focused": {
+		outline: "none",
+		boxShadow: "none",
+		border: `dotted 1px ${e.palette.primary.main}`,
+		borderRadius: "0px"
+	},
+	"& .mq-overarrow-inner": {
+		border: "none !important",
+		paddingTop: "0 !important"
+	},
+	"& .mq-overarrow-inner-right": { display: "none !important" },
+	"& .mq-overarrow-inner-left": { display: "none !important" },
+	"& .mq-longdiv-inner": {
+		borderTop: "1px solid !important",
+		paddingTop: "1.5px !important"
+	},
+	"& .mq-overarrow.mq-arrow-both": {
+		top: "7.8px",
+		marginTop: "0px",
+		minWidth: "1.23em"
+	},
+	"& .mq-parallelogram": { lineHeight: .85 }
+})), w = a("div")(({ theme: e, hide: t }) => ({
+	display: t ? "none" : "flex",
+	alignItems: "center",
+	"& .mq-editable-field .mq-cursor": { top: "-4px" },
+	"& .mq-math-mode .mq-selection, .mq-editable-field .mq-selection": { paddingTop: "18px" },
+	"& .mq-math-mode .mq-overarrow": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" },
+	"& .mq-math-mode .mq-overline .mq-overline-inner": { paddingTop: "0.4em !important" },
+	"& .mq-overarrow.mq-arrow-both": {
+		minWidth: "1.23em",
+		"& *": { lineHeight: "1 !important" },
+		"&:before": {
+			top: "-0.45em",
+			left: "-1px"
+		},
+		"&:after": {
+			position: "absolute !important",
+			top: "0px !important",
+			right: "-2px"
+		},
+		"&.mq-empty:after": { top: "-0.45em" }
+	},
+	"& .mq-overarrow.mq-arrow-right": { "&:before": {
+		top: "-0.4em",
+		right: "-1px"
+	} },
+	"& *": {
+		..._,
+		...b,
+		...y,
+		"& .mq-math-mode .mq-sqrt-prefix": {
+			verticalAlign: "baseline !important",
+			top: "1px !important",
+			left: "-0.1em !important"
+		},
+		"& .mq-math-mode .mq-overarc ": { paddingTop: "0.45em !important" },
+		"& .mq-math-mode .mq-empty": { padding: "9px 1px !important" },
+		"& .mq-math-mode .mq-root-block": { paddingTop: "10px" },
+		"& .mq-scaled .mq-sqrt-prefix": { top: "0 !important" },
+		"& .mq-math-mode .mq-longdiv .mq-longdiv-inner": {
+			marginLeft: "4px !important",
+			paddingTop: "6px !important",
+			paddingLeft: "6px !important"
+		},
+		"& .mq-math-mode .mq-paren": {
+			verticalAlign: "top !important",
+			padding: "1px 0.1em !important"
+		},
+		"& .mq-math-mode .mq-sqrt-stem": {
+			borderTop: "0.07em solid",
+			marginLeft: "-1.5px",
+			marginTop: "-2px !important",
+			paddingTop: "5px !important"
+		},
+		"& .mq-math-mode .mq-denominator": {
+			marginTop: "-5px !important",
+			padding: "0.5em 0.1em 0.1em !important"
+		},
+		"& .mq-math-mode .mq-numerator, .mq-math-mode .mq-over": {
+			padding: "0 0.1em !important",
+			paddingBottom: "0 !important",
+			marginBottom: "-2px"
+		}
+	},
+	"& span[data-prime=\"true\"]": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" }
+})), T = a(l)({
+	flex: "initial",
+	width: "25%",
+	minWidth: "100px",
+	marginLeft: "15px",
+	marginTop: "5px",
+	marginBottom: "5px",
+	marginRight: "5px",
+	"& label": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" },
+	"& div": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" }
+}), E = a(u)(() => ({ backgroundColor: "transparent" })), D = a("div")(({ theme: e, error: t }) => ({
+	minWidth: "500px",
+	maxWidth: "900px",
+	minHeight: "30px",
+	width: "100%",
+	display: "flex",
+	marginTop: e.spacing(1),
+	marginBottom: e.spacing(1),
+	...t && { border: "2px solid red" },
+	"& .mq-sqrt-prefix .mq-scaled": { verticalAlign: "middle !important" }
+})), O = a(f.Input)(({ controlledKeypadMode: e }) => ({
+	maxWidth: e ? "400px" : "500px",
+	color: m.text(),
+	backgroundColor: m.background(),
+	padding: "2px"
+})), k = a(i)({
+	position: "absolute",
+	right: "12px",
+	border: "1px solid lightgrey",
+	color: m.text()
+}), A = a("hr")(({ theme: e }) => ({
+	padding: 0,
+	margin: 0,
+	height: "1px",
+	border: "none",
+	borderBottom: `solid 1px ${e.palette.primary.main}`
+})), j = a(d)(({ mode: e }) => ({
+	...v,
+	...e === "language" && { "& *": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" } }
+})), M = (e) => {
+	if (!e) return;
+	let { type: t, value: n } = e;
+	return t === "command" || t === "cursor" ? e : t === "answer" ? {
+		type: "answer",
+		...e
+	} : n === "clear" ? { type: "clear" } : {
+		type: "write",
+		value: n
+	};
+}, N = class extends t.Component {
+	static propTypes = {
+		classNames: n.object,
+		keypadMode: n.oneOfType([n.string, n.number]),
+		autoFocus: n.bool,
+		allowAnswerBlock: n.bool,
+		showKeypad: n.bool,
+		controlledKeypad: n.bool,
+		controlledKeypadMode: n.bool,
+		error: n.string,
+		noDecimal: n.bool,
+		hideInput: n.bool,
+		noLatexHandling: n.bool,
+		layoutForKeyPad: n.object,
+		maxResponseAreas: n.number,
+		additionalKeys: n.array,
+		latex: n.string.isRequired,
+		onAnswerBlockAdd: n.func,
+		onFocus: n.func,
+		onBlur: n.func,
+		onChange: n.func.isRequired,
+		setKeypadInteraction: n.func
+	};
+	constructor(e) {
+		super(e), this.state = {
+			equationEditor: "item-authoring",
+			addDisabled: !1
+		};
+	}
+	componentDidMount() {
+		this.input && this.props.autoFocus && this.input.focus();
+	}
+	onClick = (e) => {
+		let { noDecimal: t, noLatexHandling: n, onChange: r } = this.props, i = M(e);
+		if (x("mathChange: ", i), n) {
+			r(i.value);
+			return;
+		}
+		t && (i.value === "." || i.value === ",") || i && (i.type === "clear" ? (x("call clear..."), this.input.clear()) : i.type === "command" ? this.input.command(i.value) : i.type === "cursor" ? this.input.keystroke(i.value) : i.type === "answer" ? this.input.write("%response%") : this.input.write(i.value));
+	};
+	updateDisable = (e) => {
+		let { maxResponseAreas: t } = this.props;
+		if (t) {
+			let n = this.checkResponseAreasNumber(t, e);
+			this.setState({ addDisabled: n });
+		}
+	};
+	onAnswerBlockClick = () => {
+		this.props.onAnswerBlockAdd(), this.onClick({ type: "answer" }), this.updateDisable(!0);
+	};
+	onEditorChange = (t) => {
+		let { onChange: n, noDecimal: r } = this.props;
+		if (p(), e(), this.updateDisable(!0), r && (t.indexOf(".") !== -1 || t.indexOf(",") !== -1) && this.input) {
+			this.input.clear(), this.input.write(t.replace(S, ""));
+			return;
+		}
+		let i = t.match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
+		if (this.input && i && i?.length) {
+			try {
+				this.input.mathField.__controller.cursor.insLeftOf(this.input.mathField.__controller.cursor.parent[-1].parent), this.input.mathField.el().dispatchEvent(new KeyboardEvent("keydown", { keyCode: 8 }));
+			} catch (e) {
+				console.error(e.toString());
+			}
+			return;
+		}
+		n(t);
+	};
+	shouldComponentUpdate(e, t) {
+		let n = this.input.mathField.latex() !== e.latex;
+		return x("[shouldComponentUpdate] ", "inputIsDifferent: ", n), !c(this.props.error, e.error) || !n && this.props.keypadMode !== e.keypadMode || !n && this.props.noDecimal !== e.noDecimal || !n && this.state.equationEditor !== t.equationEditor ? !0 : !n && this.props.controlledKeypad ? this.props.showKeypad !== e.showKeypad : n;
+	}
+	onEditorTypeChange = (e) => {
+		this.setState({ equationEditor: e.target.value });
+	};
+	checkResponseAreasNumber = (e, t) => {
+		let { latex: n } = this.input && this.input.props || {};
+		if (n) {
+			let r = (n.match(/answerBlock/g) || []).length;
+			return t ? r === e - 1 : r === e;
+		}
+		return !1;
+	};
+	render() {
+		let { classNames: e, keypadMode: t, allowAnswerBlock: n, additionalKeys: r, controlledKeypad: i, controlledKeypadMode: a, showKeypad: c, setKeypadInteraction: l, noDecimal: u, hideInput: d, layoutForKeyPad: f, latex: p, onFocus: m, onBlur: _, error: v } = this.props, y = !i || i && c, { addDisabled: b } = this.state;
+		return x("[render]", p), /* @__PURE__ */ g(C, {
+			className: e.mathToolbar,
+			children: [
+				/* @__PURE__ */ g(w, {
+					hide: d,
+					children: [a && /* @__PURE__ */ g(T, {
+						variant: "standard",
+						children: [/* @__PURE__ */ h(E, {
+							id: "equation-editor-label",
+							children: "Equation Editor"
+						}), /* @__PURE__ */ g(s, {
+							labelId: "equation-editor-label",
+							id: "equation-editor-select",
+							name: "equationEditor",
+							label: "Equation Editor",
+							onChange: this.onEditorTypeChange,
+							value: this.state.equationEditor,
+							MenuProps: { transitionDuration: {
+								enter: 225,
+								exit: 195
+							} },
+							children: [
+								/* @__PURE__ */ h(o, {
+									value: "non-negative-integers",
+									children: "Numeric - Non-Negative Integers"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "integers",
+									children: "Numeric - Integers"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "decimals",
+									children: "Numeric - Decimals"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "fractions",
+									children: "Numeric - Fractions"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: 1,
+									children: "Grade 1 - 2"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: 3,
+									children: "Grade 3 - 5"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: 6,
+									children: "Grade 6 - 7"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: 8,
+									children: "Grade 8 - HS"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "geometry",
+									children: "Geometry"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "advanced-algebra",
+									children: "Advanced Algebra"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "statistics",
+									children: "Statistics"
+								}),
+								/* @__PURE__ */ h(o, {
+									value: "item-authoring",
+									children: "Item Authoring"
+								})
+							]
+						})]
+					}), /* @__PURE__ */ h(D, {
+						error: v,
+						children: /* @__PURE__ */ h(O, {
+							onFocus: () => {
+								m && m(), this.updateDisable(!1);
+							},
+							onBlur: (e) => {
+								this.updateDisable(!1), _ && _(e);
+							},
+							className: e && e.editor || "",
+							controlledKeypadMode: a,
+							ref: (e) => this.input = e,
+							latex: p,
+							onChange: this.onEditorChange
+						})
+					})]
+				}),
+				n && /* @__PURE__ */ h(k, {
+					type: "primary",
+					style: { bottom: y ? "320px" : "20px" },
+					onClick: this.onAnswerBlockClick,
+					disabled: b,
+					children: "+ Response Area"
+				}),
+				/* @__PURE__ */ h(A, {}),
+				y && /* @__PURE__ */ h(j, {
+					mode: a ? this.state.equationEditor : t,
+					controlledKeypadMode: a,
+					layoutForKeyPad: f,
+					additionalKeys: r,
+					onClick: this.onClick,
+					noDecimal: u,
+					setKeypadInteraction: l
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { N as default };

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @synced-from pie-lib/packages/math-toolbar/src/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';
+import MathPreview from './math-preview.js';
+export { MathPreview };
+export declare class MathToolbar extends React.Component {
+    static propTypes: {
+        autoFocus: PropTypes.Requireable<boolean>;
+        allowAnswerBlock: PropTypes.Requireable<boolean>;
+        controlledKeypad: PropTypes.Requireable<boolean>;
+        controlledKeypadMode: PropTypes.Requireable<boolean>;
+        keypadMode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        classNames: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<string>;
+        maxResponseAreas: PropTypes.Requireable<number>;
+        showKeypad: PropTypes.Requireable<boolean>;
+        noDecimal: PropTypes.Requireable<boolean>;
+        additionalKeys: PropTypes.Requireable<any[]>;
+        latex: PropTypes.Validator<string>;
+        onAnswerBlockAdd: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onDone: PropTypes.Validator<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        hideDoneButton: PropTypes.Requireable<boolean>;
+        keyPadCharacterRef: PropTypes.Requireable<(...args: any[]) => any>;
+        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        classNames: {};
+        keypadMode: string;
+        autoFocus: boolean;
+        allowAnswerBlock: boolean;
+        controlledKeypad: boolean;
+        controlledKeypadMode: boolean;
+        noDecimal: boolean;
+        showKeypad: boolean;
+        additionalKeys: never[];
+        onChange: () => void;
+        onAnswerBlockAdd: () => void;
+        onFocus: () => void;
+        hideDoneButton: boolean;
+    };
+    constructor(props: any);
+    done: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    onChange: any;
+    render(): React.JSX.Element;
+}
+export declare class RawPureToolbar extends React.Component {
+    static propTypes: {
+        classNames: PropTypes.Requireable<object>;
+        latex: PropTypes.Validator<string>;
+        keypadMode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        hideInput: PropTypes.Requireable<boolean>;
+        noLatexHandling: PropTypes.Requireable<boolean>;
+        layoutForKeyPad: PropTypes.Requireable<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onDone: PropTypes.Validator<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onAnswerBlockAdd: PropTypes.Requireable<(...args: any[]) => any>;
+        additionalKeys: PropTypes.Requireable<any[]>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        autoFocus: PropTypes.Requireable<boolean>;
+        noDecimal: PropTypes.Requireable<boolean>;
+        allowAnswerBlock: PropTypes.Requireable<boolean>;
+        controlledKeypad: PropTypes.Requireable<boolean>;
+        controlledKeypadMode: PropTypes.Requireable<boolean>;
+        showKeypad: PropTypes.Requireable<boolean>;
+        hideDoneButton: PropTypes.Requireable<boolean>;
+        hideDoneButtonBackground: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<any>;
+        maxResponseAreas: PropTypes.Requireable<number>;
+        keyPadCharacterRef: PropTypes.Requireable<object>;
+        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        classNames: {};
+        hideDoneButtonBackground: boolean;
+    };
+    render(): React.JSX.Element;
+}
+export declare const PureToolbar: typeof RawPureToolbar;