@pie-lib/mask-markup 4.0.3-next.20261007064237 → 4.0.3-next.20261007175429

package/dist/__tests__/math-control-names.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/choices/choice.js

@@ -6,15 +6,15 @@ import { sanitizeModelHtml as a } from "@pie-element/shared-utils";
 import { jsx as o } from "react/jsx-runtime";
 import { useDraggable as s } from "@dnd-kit/core";
 import c from "@mui/material/Chip";
-import { color as l } from "@pie-lib/render-ui";
+import { color as l, useMathName as u } from "@pie-lib/render-ui";
 //#region src/choices/choice.tsx
-var u = "MaskBlank", d = r("span")(({ theme: e, disabled: t }) => ({
+var d = "MaskBlank", f = r("span")(({ theme: e, disabled: t }) => ({
 	border: `solid 0px ${e.palette.primary.main}`,
 	margin: e.spacing(.5),
 	transform: "translate(0, 0)",
 	display: "inline-flex",
 	...t && {}
-})), f = r(c)(({ selected: e }) => ({
+})), p = r(c)(({ selected: e }) => ({
 	backgroundColor: l.v("pie")("background", l.defaults.WHITE),
 	border: e ? `solid 2px ${l.buttonFocusOutline()}` : `1px solid ${l.text()}`,
 	opacity: e ? .7 : 1,
@@ -32,7 +32,7 @@ var u = "MaskBlank", d = r("span")(({ theme: e, disabled: t }) => ({
 	paddingTop: "12px",
 	paddingBottom: "12px",
 	"&.Mui-disabled": { opacity: 1 }
-})), p = r("span")(() => ({
+})), m = r("span")(() => ({
 	whiteSpace: "normal",
 	"& img": {
 		display: "block",
@@ -41,49 +41,50 @@ var u = "MaskBlank", d = r("span")(({ theme: e, disabled: t }) => ({
 	"& mjx-frac": { fontSize: "120% !important" },
 	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { fontSize: "120% !important" }
 }));
-function m({ choice: n, disabled: r, instanceId: c, selectedItem: l, onSelectClick: m }) {
-	let h = t(null), { attributes: g, listeners: _, setNodeRef: v, isDragging: y } = s({
+function h({ choice: n, disabled: r, instanceId: c, selectedItem: l, onSelectClick: h }) {
+	let g = t(null), _ = u(g), { attributes: v, listeners: y, setNodeRef: b, isDragging: x } = s({
 		id: `choice-${n.id}`,
 		data: {
 			choice: n,
 			instanceId: c,
 			fromChoice: !0,
-			type: u
+			type: d
 		},
 		disabled: r
 	});
 	e(() => {
-		i(h.current);
+		i(g.current);
 	}, [n.value]);
-	let b = !!l && l.fromChoice === !0 && l.choice.id === n.id;
-	return /* @__PURE__ */ o(d, {
-		ref: v,
-		style: y ? {
-			width: h.current?.offsetWidth || 90,
-			height: h.current?.offsetHeight || 32
+	let S = !!l && l.fromChoice === !0 && l.choice.id === n.id;
+	return /* @__PURE__ */ o(f, {
+		ref: b,
+		style: x ? {
+			width: g.current?.offsetWidth || 90,
+			height: g.current?.offsetHeight || 32
 		} : {},
 		disabled: r,
-		selected: b,
+		selected: S,
 		onClick: (e) => {
-			r || (e.stopPropagation(), m?.({
+			r || (e.stopPropagation(), h?.({
 				choice: n,
 				instanceId: c,
 				fromChoice: !0,
-				type: u
+				type: d
 			}));
 		},
-		..._,
-		...g,
-		children: /* @__PURE__ */ o(f, {
+		...y,
+		...v,
+		"aria-label": _,
+		children: /* @__PURE__ */ o(p, {
 			clickable: !1,
 			disabled: r,
-			selected: b,
-			ref: h,
-			label: /* @__PURE__ */ o(p, { dangerouslySetInnerHTML: { __html: a(n.value) } })
+			selected: S,
+			ref: g,
+			label: /* @__PURE__ */ o(m, { dangerouslySetInnerHTML: { __html: a(n.value) } })
 		})
 	});
 }
-m.propTypes = {
+h.propTypes = {
 	choice: n.object.isRequired,
 	disabled: n.bool,
 	instanceId: n.oneOfType([n.string, n.number]),
@@ -91,4 +92,4 @@ m.propTypes = {
 	onSelectClick: n.func
 };
 //#endregion
-export { u as DRAG_TYPE, m as default };
+export { d as DRAG_TYPE, h as default };

package/dist/components/blank.js

@@ -8,13 +8,13 @@ import { sanitizeModelHtml as l } from "@pie-element/shared-utils";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { useDraggable as f, useDroppable as p } from "@dnd-kit/core";
 import m from "@mui/material/Chip";
-import { color as h } from "@pie-lib/render-ui";
-import g from "@pie-lib/translator";
-import { grey as _ } from "@mui/material/colors";
+import { color as h, useMathName as g } from "@pie-lib/render-ui";
+import _ from "@pie-lib/translator";
+import { grey as v } from "@mui/material/colors";
 //#region src/components/blank.tsx
-var { translator: v } = g;
+var { translator: y } = _;
 c("pie-lib:mask-markup:blank");
-var y = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r }) => ({
+var b = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r }) => ({
 	border: `solid 0px ${h.primary()}`,
 	display: "inline-flex",
 	whiteSpace: "nowrap",
@@ -23,10 +23,10 @@ var y = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r })
 	...t && { whiteSpace: "nowrap" },
 	...(e || n) && { opacity: .5 },
 	...r && { "&:hover": { cursor: "pointer" } }
-})), b = o("span")({
+})), x = o("span")({
 	display: "inline-flex",
 	touchAction: "none"
-}), x = o(m)(() => ({
+}), S = o(m)(() => ({
 	backgroundColor: h.background(),
 	border: `2px dashed ${h.text()}`,
 	touchAction: "none",
@@ -41,13 +41,13 @@ var y = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r })
 		overflow: "hidden"
 	},
 	"&.parentOver": {
-		border: `1px solid ${_[500]}`,
-		backgroundColor: `${_[300]}`
+		border: `1px solid ${v[500]}`,
+		backgroundColor: `${v[300]}`
 	},
 	"&.correct": { border: `solid 1px ${h.correct()}` },
 	"&.incorrect": { border: `solid 1px ${h.incorrect()}` },
 	"&.Mui-disabled": { opacity: 1 }
-})), S = o("span")(() => ({
+})), C = o("span")(() => ({
 	whiteSpace: "normal",
 	pointerEvents: "none",
 	"& img": {
@@ -76,8 +76,8 @@ var y = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r })
 		transform: "translateY(-50%)"
 	}
 }));
-function C({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, correct: m, emptyResponseAreaWidth: h, emptyResponseAreaHeight: g }) {
-	let _ = r(null), v = r(null), y = r(null), b = r(!1), [C, w] = i({
+function w({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, correct: m, emptyResponseAreaWidth: h, emptyResponseAreaHeight: g }) {
+	let _ = r(null), v = r(null), y = r(null), b = r(!1), [x, w] = i({
 		height: 0,
 		width: 0
 	}), T = () => {
@@ -106,8 +106,8 @@ function C({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, corr
 	}, k = () => {
 		let e = isNaN(parseFloat(h)) ? 0 : parseFloat(h), t = isNaN(parseFloat(g)) ? 0 : parseFloat(g);
 		return {
-			height: C.height || t,
-			width: C.width || e,
+			height: x.height || t,
+			width: x.width || e,
 			...e ? {} : { minWidth: 90 },
 			...t ? {} : { minHeight: 32 }
 		};
@@ -149,12 +149,12 @@ function C({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, corr
 		width: y.current?.width,
 		height: y.current?.height
 	} : k();
-	return /* @__PURE__ */ u(x, {
+	return /* @__PURE__ */ u(S, {
 		clickable: !1,
 		disabled: a,
 		ref: _,
 		component: "span",
-		label: /* @__PURE__ */ d(t.Fragment, { children: [/* @__PURE__ */ u(S, {
+		label: /* @__PURE__ */ d(t.Fragment, { children: [/* @__PURE__ */ u(C, {
 			ref: v,
 			draggable: !0,
 			className: e({
@@ -162,7 +162,7 @@ function C({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, corr
 				hidden: A
 			}),
 			dangerouslySetInnerHTML: { __html: l(j) }
-		}), A && /* @__PURE__ */ u(S, {
+		}), A && /* @__PURE__ */ u(C, {
 			draggable: !0,
 			className: e({
 				over: c,
@@ -180,10 +180,10 @@ function C({ disabled: a, choice: o, isOver: c, isDragging: f, dragItem: p, corr
 		style: M
 	});
 }
-C.defaultProps = {
+w.defaultProps = {
 	emptyResponseAreaWidth: 0,
 	emptyResponseAreaHeight: 0
-}, C.propTypes = {
+}, w.propTypes = {
 	id: a.oneOfType([a.string, a.number]),
 	disabled: a.bool,
 	duplicates: a.bool,
@@ -196,70 +196,75 @@ C.defaultProps = {
 	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
 	instanceId: a.string
 };
-function w({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange: o, emptyResponseAreaWidth: s, emptyResponseAreaHeight: c, instanceId: l, language: d, selectedItem: m, onSelectClick: h, onPlacementClick: g }) {
-	let [_, x] = i(!1), S = {
+function T({ id: e, disabled: t, duplicates: n, choice: a, correct: o, onChange: s, emptyResponseAreaWidth: c, emptyResponseAreaHeight: l, instanceId: d, language: m, selectedItem: h, onSelectClick: _, onPlacementClick: v }) {
+	let [S, C] = i(!1), T = r(null), E = g(T), D = {
 		id: e,
-		choice: r,
-		instanceId: l,
+		choice: a,
+		instanceId: d,
 		fromChoice: !1,
 		type: "MaskBlank"
-	}, { attributes: w, listeners: T, setNodeRef: E, isDragging: D } = f({
+	}, { attributes: O, listeners: k, setNodeRef: A, isDragging: j } = f({
 		id: `mask-blank-drag-${e}`,
-		disabled: t || !r,
-		data: S,
-		attributes: { tabIndex: r && !t ? 0 : -1 }
-	}), { setNodeRef: O, isOver: k, active: A } = p({
+		disabled: t || !a,
+		data: D,
+		attributes: { tabIndex: a && !t ? 0 : -1 }
+	}), { setNodeRef: M, isOver: N, active: P } = p({
 		id: `mask-blank-drop-${e}`,
 		data: {
 			id: e,
 			accepts: ["MaskBlank"],
-			instanceId: l
+			instanceId: d
 		}
-	}), j = !!m && m.fromChoice === !1 && m.id === e, M = () => {
-		t || (j ? h?.(S) : m ? g?.(e) : r && h?.(S));
-	}, N = !r && !t, P = !!r && !t, F = (e) => {
-		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), M());
-	}, I = !!m, L = A ? k : k || I && _ && !t;
-	return /* @__PURE__ */ u(y, {
-		ref: O,
-		role: N ? "button" : "group",
-		"aria-label": v.t("dragInTheBlank.blank", {
-			lng: d,
+	}), F = !!h && h.fromChoice === !1 && h.id === e, I = () => {
+		t || (F ? _?.(D) : h ? v?.(e) : a && _?.(D));
+	}, L = !a && !t, R = !!a && !t, z = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), I());
+	}, B = !!h, V = P ? N : N || B && S && !t;
+	return /* @__PURE__ */ u(b, {
+		ref: M,
+		role: L ? "button" : "group",
+		"aria-label": y.t("dragInTheBlank.blank", {
+			lng: m,
 			index: Number(e) + 1
 		}),
-		tabIndex: N ? 0 : -1,
-		onClick: M,
-		onKeyDown: N ? F : void 0,
-		onMouseEnter: () => x(!0),
-		onMouseLeave: () => x(!1),
-		dragged: D,
-		over: L,
-		selected: j,
-		showsPointerCursor: I && !t,
-		children: /* @__PURE__ */ u(b, {
-			ref: E,
-			...P ? w : {},
-			...T,
-			children: /* @__PURE__ */ u(C, {
+		tabIndex: L ? 0 : -1,
+		onClick: I,
+		onKeyDown: L ? z : void 0,
+		onMouseEnter: () => C(!0),
+		onMouseLeave: () => C(!1),
+		dragged: j,
+		over: V,
+		selected: F,
+		showsPointerCursor: B && !t,
+		children: /* @__PURE__ */ u(x, {
+			ref: (e) => {
+				T.current = e, A(e);
+			},
+			...R ? {
+				...O,
+				"aria-label": E
+			} : {},
+			...k,
+			children: /* @__PURE__ */ u(w, {
 				id: e,
 				disabled: t,
 				duplicates: n,
-				choice: r,
-				isOver: L,
-				dragItem: A?.data?.current,
-				correct: a,
-				onChange: o,
-				emptyResponseAreaWidth: s,
-				emptyResponseAreaHeight: c,
-				instanceId: l
+				choice: a,
+				isOver: V,
+				dragItem: P?.data?.current,
+				correct: o,
+				onChange: s,
+				emptyResponseAreaWidth: c,
+				emptyResponseAreaHeight: l,
+				instanceId: d
 			})
 		})
 	});
 }
-w.defaultProps = {
+T.defaultProps = {
 	emptyResponseAreaWidth: 0,
 	emptyResponseAreaHeight: 0
-}, w.propTypes = {
+}, T.propTypes = {
 	id: a.oneOfType([a.string, a.number]),
 	disabled: a.bool,
 	duplicates: a.bool,
@@ -275,4 +280,4 @@ w.defaultProps = {
 	onPlacementClick: a.func
 };
 //#endregion
-export { w as default };
+export { T as default };

package/dist/components/dropdown.js

@@ -1,32 +1,32 @@
-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 { sanitizeModelHtml as i } from "@pie-element/shared-utils";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import * as c from "@pie-lib/render-ui";
-import { InlineMenu as l, color as u, createUniqueId as d } from "@pie-lib/render-ui";
-import f from "@pie-lib/translator";
-import p from "@mui/material/Button";
-import m from "@mui/material/InputLabel";
-import h from "@mui/material/MenuItem";
-import g from "@mui/icons-material/ArrowDropDown";
-import _ from "@mui/icons-material/ArrowDropUp";
-import v from "@mui/icons-material/Close";
-import y from "@mui/icons-material/Check";
+import 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 { sanitizeModelHtml as a } from "@pie-element/shared-utils";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import * as l from "@pie-lib/render-ui";
+import { InlineMenu as u, MathName as d, color as f, createUniqueId as p, useMathName as m } from "@pie-lib/render-ui";
+import h from "@pie-lib/translator";
+import g from "@mui/material/Button";
+import _ from "@mui/material/InputLabel";
+import v from "@mui/material/MenuItem";
+import y from "@mui/icons-material/ArrowDropDown";
+import b from "@mui/icons-material/ArrowDropUp";
+import x from "@mui/icons-material/Close";
+import S from "@mui/icons-material/Check";
 //#region src/components/dropdown.tsx
-function b(e) {
+function C(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function x(e, t) {
-	return !e || b(e) ? e : b(e.default) ? e.default : t && b(e[t]) ? e[t] : t && b(e[t]?.default) ? e[t].default : e;
+function w(e, t) {
+	return !e || C(e) ? e : C(e.default) ? e.default : t && C(e[t]) ? e[t] : t && C(e[t]?.default) ? e[t].default : e;
 }
-var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.default, T = w && typeof w == "object" ? w : C, { translator: E } = f, D = u.v("pie"), O = n(p)(() => ({
-	color: u.text(),
-	border: `1px solid ${u.borderGray()}`,
+var T = w(u, "InlineMenu") || w(O.InlineMenu, "InlineMenu"), E = l, D = E.default, O = D && typeof D == "object" ? D : E, { translator: k } = h, A = f.v("pie"), j = r(g)(() => ({
+	color: f.text(),
+	border: `1px solid ${f.borderGray()}`,
 	borderRadius: "4px",
 	justifyContent: "space-between",
-	backgroundColor: u.background(),
+	backgroundColor: f.background(),
 	position: "relative",
 	height: "45px",
 	width: "fit-content",
@@ -38,29 +38,29 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 		right: "4px",
 		top: "calc(50% - 12px)",
 		pointerEvents: "none",
-		color: u.text(),
+		color: f.text(),
 		marginLeft: "5px"
 	},
 	"&.Mui-focusVisible": {
-		outline: `3px solid ${u.tertiary()}`,
+		outline: `3px solid ${f.tertiary()}`,
 		outlineOffset: "2px",
 		borderWidth: "3px"
 	},
-	"&.Mui-disabled": { color: u.disabledText() },
+	"&.Mui-disabled": { color: f.disabledText() },
 	"&.disabledCorrect": {
 		borderWidth: "2px",
-		borderColor: u.correct(),
-		color: `${u.text()} !important`
+		borderColor: f.correct(),
+		color: `${f.text()} !important`
 	},
 	"&.disabledIncorrect": {
 		borderWidth: "2px",
-		borderColor: u.incorrectWithIcon(),
-		color: `${u.text()} !important`
+		borderColor: f.incorrectWithIcon(),
+		color: `${f.text()} !important`
 	}
-})), k = n(S)(() => ({
-	"& .MuiPaper-root": { backgroundColor: D("background", u.defaults.WHITE) },
+})), M = r(T)(() => ({
+	"& .MuiPaper-root": { backgroundColor: A("background", f.defaults.WHITE) },
 	"& .MuiList-root": { padding: 0 }
-})), A = n(h)(() => ({
+})), N = r(v)(() => ({
 	height: 24,
 	overflow: "hidden",
 	fontSize: "1rem",
@@ -68,42 +68,42 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 	fontFamily: "inherit",
 	lineHeight: "1.5em",
 	whiteSpace: "nowrap",
-	color: u.text(),
-	backgroundColor: u.background(),
+	color: f.text(),
+	backgroundColor: f.background(),
 	"&.Mui-focusVisible": {
-		outline: `3px solid ${u.tertiary()}`,
+		outline: `3px solid ${f.tertiary()}`,
 		outlineOffset: "-1px",
-		color: u.text(),
-		backgroundColor: u.background()
+		color: f.text(),
+		backgroundColor: f.background()
 	},
 	"&:hover": {
-		color: u.text(),
-		backgroundColor: u.dropdownBackground()
+		color: f.text(),
+		backgroundColor: f.dropdownBackground()
 	},
 	boxSizing: "border-box",
 	padding: "16px 8px",
 	borderRadius: "4px",
 	"&.selected": {
-		color: `${u.text()} !important`,
-		backgroundColor: `${u.background()} !important`,
+		color: `${f.text()} !important`,
+		backgroundColor: `${f.background()} !important`,
 		"&:hover": {
-			color: u.text(),
-			backgroundColor: `${u.dropdownBackground()} !important`
+			color: f.text(),
+			backgroundColor: `${f.dropdownBackground()} !important`
 		}
 	}
-})), j = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), M = n("span")(() => ({
+})), P = r("span")(() => ({ fontSize: "max(1rem, 14px)" })), F = r("span")(() => ({
 	fontSize: "max(1rem, 14px)",
 	flexShrink: 0,
 	paddingLeft: "8px"
-})), N = n(m)(() => ({
+})), I = r(_)(() => ({
 	position: "absolute",
 	left: "-10000px",
 	top: "auto",
 	width: "1px",
 	height: "1px",
 	overflow: "hidden"
-})), P = n(y)(() => ({
-	color: `${u.white()} !important`,
+})), L = r(S)(() => ({
+	color: `${f.white()} !important`,
 	position: "absolute",
 	top: "-8px !important",
 	left: "-8px",
@@ -111,10 +111,10 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 	borderRadius: "50%",
 	fontSize: "16px",
 	padding: "2px",
-	"&.correct": { backgroundColor: u.correct() },
-	"&.incorrect": { backgroundColor: u.incorrectWithIcon() }
-})), F = n(v)(() => ({
-	color: `${u.white()} !important`,
+	"&.correct": { backgroundColor: f.correct() },
+	"&.incorrect": { backgroundColor: f.incorrectWithIcon() }
+})), R = r(x)(() => ({
+	color: `${f.white()} !important`,
 	position: "absolute",
 	top: "-8px !important",
 	left: "-8px",
@@ -122,23 +122,36 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 	borderRadius: "50%",
 	fontSize: "16px",
 	padding: "2px",
-	"&.correct": { backgroundColor: u.correct() },
-	"&.incorrect": { backgroundColor: u.incorrectWithIcon() }
-})), I = class extends e.Component {
+	"&.correct": { backgroundColor: f.correct() },
+	"&.incorrect": { backgroundColor: f.incorrectWithIcon() }
+})), z = ({ label: e, selected: n, labelRef: r, ...i }) => {
+	let o = t(null), l = m(o);
+	return /* @__PURE__ */ c(N, {
+		...i,
+		selected: n,
+		"aria-label": l,
+		children: [/* @__PURE__ */ s(P, {
+			ref: (e) => {
+				o.current = e, r(e);
+			},
+			dangerouslySetInnerHTML: { __html: a(e) }
+		}), /* @__PURE__ */ s(F, { dangerouslySetInnerHTML: { __html: n ? " ✓" : "" } })]
+	});
+}, B = 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
+		id: n.string,
+		value: n.string,
+		disabled: n.bool,
+		onChange: n.func,
+		correct: n.bool,
+		choices: n.arrayOf(n.shape({
+			value: n.string,
+			label: n.string
 		})),
-		showCorrectAnswer: t.bool,
-		singleQuery: t.bool,
-		correctValue: t.string,
-		language: t.string
+		showCorrectAnswer: n.bool,
+		singleQuery: n.bool,
+		correctValue: n.string,
+		language: n.string
 	};
 	constructor(t) {
 		super(t), this.state = {
@@ -146,7 +159,7 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 			highlightedOptionId: null,
 			menuWidth: null,
 			previewValue: null
-		}, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [], this.idPrefix = d(`dropdown-${t.id}`);
+		}, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [], this.idPrefix = p(`dropdown-${t.id}`);
 	}
 	optionId = (e) => `${this.idPrefix}-option-${e}`;
 	componentDidMount() {
@@ -156,13 +169,13 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 		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);
+			let t = e.querySelector("[data-latex], [data-raw]"), n = e.querySelector("mjx-container"), r = e.querySelector("[data-math-handled=\"true\"]");
+			t && (!r || !n) && i(e);
 		}), n) {
 			let e = n.clientWidth;
 			e !== this.state.menuWidth && (this.elementRefs.forEach((e) => {
-				e && r(e);
-			}), r(n), this.setState({ menuWidth: e }));
+				e && i(e);
+			}), i(n), this.setState({ menuWidth: e }));
 		}
 	}
 	handleClick = (e) => {
@@ -207,14 +220,14 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 		return n ? n.label.trim() : void 0;
 	}
 	render() {
-		let { id: e, correct: t, disabled: n, value: r, choices: c, showCorrectAnswer: l, singleQuery: u, correctValue: d, language: f } = this.props, { anchorEl: p } = this.state, m = !!p, h = `${this.idPrefix}-button`, v = `${this.idPrefix}-menu`, y = `${this.idPrefix}-listbox`, b = `${this.idPrefix}-value`, x;
-		this.elementRefs = [], n && t !== void 0 && (x = t || l ? "disabledCorrect" : "disabledIncorrect");
-		let S = parseInt(e, 10) + 1, C = `${this.idPrefix}-query-label`, w = u ? E.t("inlineDropdown.query", { lng: f }) : E.t("inlineDropdown.queryNumber", {
-			lng: f,
-			index: S
-		}), T = null;
-		return n && t !== void 0 && (T = t || l ? /* @__PURE__ */ o(P, { className: "correct" }) : /* @__PURE__ */ o(F, { className: "incorrect" })), /* @__PURE__ */ s(a, { children: [
-			/* @__PURE__ */ o("div", {
+		let { id: e, correct: t, disabled: n, value: r, choices: i, showCorrectAnswer: l, singleQuery: u, correctValue: f, language: p } = this.props, { anchorEl: m } = this.state, h = !!m, g = `${this.idPrefix}-button`, _ = `${this.idPrefix}-menu`, v = `${this.idPrefix}-listbox`, x = `${this.idPrefix}-value`, S = `${this.idPrefix}-value-name`, C;
+		this.elementRefs = [], n && t !== void 0 && (C = t || l ? "disabledCorrect" : "disabledIncorrect");
+		let w = parseInt(e, 10) + 1, T = `${this.idPrefix}-query-label`, E = u ? k.t("inlineDropdown.query", { lng: p }) : k.t("inlineDropdown.queryNumber", {
+			lng: p,
+			index: w
+		}), D = null;
+		return n && t !== void 0 && (D = t || l ? /* @__PURE__ */ s(L, { className: "correct" }) : /* @__PURE__ */ s(R, { className: "incorrect" })), /* @__PURE__ */ c(o, { children: [
+			/* @__PURE__ */ s("div", {
 				ref: this.hiddenRef,
 				style: {
 					position: "absolute",
@@ -224,50 +237,56 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 				},
 				tabIndex: -1,
 				"aria-hidden": "true",
-				children: (c || []).map((e, t) => /* @__PURE__ */ o(A, {
+				children: (i || []).map((e, t) => /* @__PURE__ */ s(N, {
 					tabIndex: -1,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ o(j, { dangerouslySetInnerHTML: { __html: i(e.label) } })
+					children: /* @__PURE__ */ s(P, { dangerouslySetInnerHTML: { __html: a(e.label) } })
 				}, t))
 			}),
-			/* @__PURE__ */ o(N, {
-				id: C,
+			/* @__PURE__ */ s(I, {
+				id: T,
 				tabIndex: -1,
 				"aria-hidden": "true",
-				children: w
+				children: E
 			}),
-			/* @__PURE__ */ s(O, {
+			/* @__PURE__ */ s(d, { children: (e, t) => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c(j, {
 				ref: this.buttonRef,
 				style: {
 					...this.state.menuWidth && { minWidth: `calc(${this.state.menuWidth}px + 8px)` },
-					borderWidth: m ? "2px" : "1px",
+					borderWidth: h ? "2px" : "1px",
 					transition: "border-width 0.2s ease-in-out"
 				},
-				"aria-controls": m ? y : void 0,
+				"aria-controls": h ? v : void 0,
 				"aria-haspopup": "listbox",
-				"aria-expanded": m ? "true" : "false",
+				"aria-expanded": h ? "true" : "false",
 				"aria-activedescendant": this.state.highlightedOptionId,
 				onClick: this.handleClick,
-				className: x,
+				className: C,
 				disabled: n,
-				id: h,
+				id: g,
 				role: "combobox",
-				"aria-labelledby": `${C} ${b}`,
+				"aria-labelledby": `${T} ${e ? S : x}`,
 				children: [
-					T,
-					/* @__PURE__ */ o(j, {
-						id: b,
-						ref: this.previewRef,
-						dangerouslySetInnerHTML: { __html: i(d || (m && this.state.previewValue ? this.getLabel(c, this.state.previewValue) : this.getLabel(c, r) || "")) }
+					D,
+					/* @__PURE__ */ s(P, {
+						id: x,
+						ref: (e) => {
+							this.previewRef.current = e, t.current = e;
+						},
+						dangerouslySetInnerHTML: { __html: a(f || (h && this.state.previewValue ? this.getLabel(i, this.state.previewValue) : this.getLabel(i, r) || "")) }
 					}),
-					o(m ? _ : g, {})
+					s(h ? b : y, {})
 				]
-			}),
-			/* @__PURE__ */ o(k, {
-				id: v,
-				anchorEl: p,
+			}), e ? /* @__PURE__ */ s("span", {
+				id: S,
+				hidden: !0,
+				children: e
+			}) : null] }) }),
+			/* @__PURE__ */ s(M, {
+				id: _,
+				anchorEl: m,
 				keepMounted: !0,
-				open: m,
+				open: h,
 				onClose: this.handleClose,
 				getContentAnchorEl: null,
 				anchorOrigin: {
@@ -288,15 +307,15 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 						padding: "4px"
 					} } : void 0,
 					list: {
-						id: y,
-						"aria-labelledby": C,
+						id: v,
+						"aria-labelledby": T,
 						role: "listbox",
 						disablePadding: !0
 					}
 				},
-				children: (c || []).map((e, t) => {
+				children: (i || []).map((e, t) => {
 					let n = this.optionId(t);
-					return /* @__PURE__ */ s(A, {
+					return /* @__PURE__ */ s(z, {
 						id: n,
 						className: e.value === r ? "selected" : "",
 						selected: e.value === r,
@@ -305,10 +324,8 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 						role: "option",
 						"aria-selected": this.state.highlightedOptionId === n ? "true" : void 0,
 						onMouseOver: () => this.handleHover(t),
-						children: [/* @__PURE__ */ o(j, {
-							ref: (e) => this.elementRefs[t] = e,
-							dangerouslySetInnerHTML: { __html: i(e.label) }
-						}), /* @__PURE__ */ o(M, { dangerouslySetInnerHTML: { __html: e.value === r ? " ✓" : "" } })]
+						label: e.label,
+						labelRef: (e) => this.elementRefs[t] = e
 					}, `${e.label}-${t}`);
 				})
 			})
@@ -316,4 +333,4 @@ var S = x(l, "InlineMenu") || x(T.InlineMenu, "InlineMenu"), C = c, w = C.defaul
 	}
 };
 //#endregion
-export { I as default };
+export { B as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "4.0.3-next.20261007064237",
+  "version": "4.0.3-next.20261007175429",
   "description": "",
   "repository": {
     "type": "git",
@@ -12,16 +12,16 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-element/shared-utils": "0.1.3-next.20261007064237",
-    "@pie-lib/drag": "5.0.3-next.20261007064237",
-    "@pie-lib/editable-html-tip-tap": "3.0.3-next.20261007064237",
-    "@pie-lib/render-ui": "8.0.3-next.20261007064237",
+    "@pie-element/shared-utils": "0.1.3-next.20261007075859",
+    "@pie-lib/drag": "5.0.3-next.20261007175429",
+    "@pie-lib/editable-html-tip-tap": "3.0.3-next.20261007175429",
+    "@pie-lib/render-ui": "8.0.3-next.20261007175429",
     "@pie-lib/translator": "5.0.2-next.20261006160832",
     "debug": "^4.1.1",
     "prop-types": "^15.7.2",
     "to-style": "^1.3.3",
     "@dnd-kit/core": "^6.3.1",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.4-next.20261007064237",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.4-next.20261007175429",
     "@pie-element/shared-lodash": "0.1.3-next.20261006160832",
     "clsx": "^2.1.1"
   },