@pie-lib/render-ui 8.0.6-next.20261015154938 → 8.0.6-next.20261016234357

package/dist/collapsible/index.d.ts

@@ -19,6 +19,8 @@ export declare class Collapsible extends React.Component {
     };
     panelId: string;
     toggleExpanded: any;
+    /** Re-renders once the item language's catalog lands, for an element that did not preload it. */
+    relabel: () => void;
     componentDidMount(): void;
     componentDidUpdate(): void;
     render(): React.JSX.Element;

package/dist/collapsible/index.js

@@ -1,14 +1,14 @@
 import { tertiary as e } from "../color.js";
-import { createUniqueId as t } from "../unique-id.js";
-import n from "react";
-import r from "prop-types";
-import { styled as i } from "@mui/material/styles";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@mui/material/Collapse";
-import { renderMath as c } from "@pie-element/shared-math-rendering-mathjax";
-import l from "@pie-lib/translator";
+import { catalogs as t } from "../i18n/index.js";
+import { createUniqueId as n } from "../unique-id.js";
+import r from "react";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@mui/material/Collapse";
+import { renderMath as l } from "@pie-element/shared-math-rendering-mathjax";
 //#region src/collapsible/index.tsx
-var { translator: u } = l, d = i("button")({
+var u = a("button")({
 	display: "inline-block",
 	minHeight: "24px",
 	padding: 0,
@@ -18,53 +18,54 @@ var { translator: u } = l, d = i("button")({
 	textAlign: "inherit",
 	color: e(),
 	cursor: "pointer"
-}), f = i("span")({ borderBottom: "1px dotted currentColor" }), p = i(s)(({ theme: e }) => ({ paddingTop: e.spacing(2) })), m = class extends n.Component {
+}), d = a("span")({ borderBottom: "1px dotted currentColor" }), f = a(c)(({ theme: e }) => ({ paddingTop: e.spacing(2) })), p = class extends r.Component {
 	static propTypes = {
-		className: r.string,
-		children: r.object,
-		labels: r.shape({
-			visible: r.string,
-			hidden: r.string
+		className: i.string,
+		children: i.object,
+		labels: i.shape({
+			visible: i.string,
+			hidden: i.string
 		}),
-		language: r.string
+		language: i.string
 	};
 	static defaultProps = { labels: {} };
 	state = { expanded: !1 };
-	panelId = t("pie-collapsible");
+	panelId = n("pie-collapsible");
 	toggleExpanded = () => {
 		this.setState((e) => ({ expanded: !e.expanded }));
 	};
+	relabel = () => this.forceUpdate();
 	componentDidMount() {
-		c(this.root);
+		l(this.root);
 	}
 	componentDidUpdate() {
-		c(this.root);
+		l(this.root);
 	}
 	render() {
-		let { labels: e, children: t, className: n, language: r } = this.props, { expanded: i } = this.state, s = i ? e.visible || u.t("common:hide", { lng: r }) : e.hidden || u.t("common:show", { lng: r });
-		return /* @__PURE__ */ o("div", {
-			className: n,
+		let { labels: e, children: n, className: r, language: i } = this.props, { expanded: a } = this.state, c = t.forLocale(i, this.relabel), l = a ? e.visible || c.t("hide") : e.hidden || c.t("show");
+		return /* @__PURE__ */ s("div", {
+			className: r,
 			ref: (e) => this.root = e,
-			children: [/* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(d, {
+			children: [/* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(u, {
 				type: "button",
-				"aria-expanded": i,
+				"aria-expanded": a,
 				"aria-controls": this.panelId,
 				onClick: this.toggleExpanded,
-				children: /* @__PURE__ */ a(f, { children: s })
-			}) }), /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ o(d, { children: l })
+			}) }), /* @__PURE__ */ o("div", {
 				id: this.panelId,
-				children: /* @__PURE__ */ a(p, {
-					in: i,
+				children: /* @__PURE__ */ o(f, {
+					in: a,
 					timeout: {
 						enter: 225,
 						exit: 195
 					},
 					unmountOnExit: !0,
-					children: t
+					children: n
 				})
 			})]
 		});
 	}
 };
 //#endregion
-export { m as Collapsible, m as default };
+export { p as Collapsible, p as default };

package/dist/i18n/en-US.d.ts

@@ -0,0 +1,9 @@
+/** The interface strings `@pie-lib/render-ui` renders itself; the source for every other locale. */
+declare const _default: {
+    /** Accessible name of a prompt's custom audio play button. */
+    playAudio: string;
+    /** Default toggle labels of a collapsed and an expanded `Collapsible`. */
+    show: string;
+    hide: string;
+};
+export default _default;

package/dist/i18n/en-US.js

@@ -0,0 +1,8 @@
+//#region src/i18n/en-US.ts
+var e = {
+	playAudio: "Play audio",
+	show: "Show",
+	hide: "Hide"
+};
+//#endregion
+export { e as default };

package/dist/i18n/es.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    playAudio: string;
+    show: string;
+    hide: string;
+};
+export default _default;

package/dist/i18n/es.js

@@ -0,0 +1,8 @@
+//#region src/i18n/es.ts
+var e = {
+	playAudio: "Reproducir audio",
+	show: "Mostrar",
+	hide: "Ocultar"
+};
+//#endregion
+export { e as default };

package/dist/i18n/index.d.ts

@@ -0,0 +1,5 @@
+export declare const catalogs: import("@pie-element/shared-i18n").Catalogs<{
+    playAudio: string;
+    show: string;
+    hide: string;
+}>;

package/dist/i18n/index.js

@@ -0,0 +1,13 @@
+import e from "./en-US.js";
+import { defineCatalogs as t } from "@pie-element/shared-i18n";
+//#region src/i18n/index.ts
+var n = t({
+	packageName: "@pie-lib/render-ui",
+	source: e,
+	loaders: { es: () => import(
+		/* webpackMode: "eager" */
+		"./es.js"
+) }
+});
+//#endregion
+export { n as catalogs };

package/dist/preview-prompt.d.ts

@@ -8,6 +8,8 @@ export declare class PreviewPrompt extends Component {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         defaultClassName: PropTypes.Requireable<string>;
         autoplayAudioEnabled: PropTypes.Requireable<boolean>;
+        /** Set by the item player when the toolkit holds autoplay; it outranks `autoplayAudioEnabled`. */
+        autoplayAudioHeld: PropTypes.Requireable<boolean>;
         customAudioButton: PropTypes.Requireable<PropTypes.InferProps<{
             playImage: PropTypes.Requireable<string>;
             pauseImage: PropTypes.Requireable<string>;
@@ -22,6 +24,12 @@ export declare class PreviewPrompt extends Component {
     audioId: string;
     playButtonId: string;
     parsedText: any;
+    /**
+     * Names the custom audio button on the live node. The name stays out of `parsedText`: a
+     * catalog landing after the first render would change the prompt's HTML, and React would
+     * replace the prompt, audio included, mid-playback.
+     */
+    labelPlayButton: () => void;
     addCustomAudioButtonControls(): void;
     removeCustomAudioButtonListeners(): void;
     componentDidMount(): void;

package/dist/preview-prompt.js

@@ -1,14 +1,14 @@
 import { focusOutline as e, tableGrid as t, tableStripe as n, text as r } from "./color.js";
-import { createUniqueId as i } from "./unique-id.js";
-import a, { Component as o } from "react";
-import s from "prop-types";
-import { styled as c } from "@mui/material/styles";
-import { PLAY_AUDIO_ATTR as l, sanitizeModelHtml as u } from "@pie-element/shared-utils";
-import { jsx as d } from "react/jsx-runtime";
-import { renderMath as f } from "@pie-element/shared-math-rendering-mathjax";
-import p from "@pie-lib/translator";
+import { catalogs as i } from "./i18n/index.js";
+import { createUniqueId as a } from "./unique-id.js";
+import o, { Component as s } from "react";
+import c from "prop-types";
+import { styled as l } from "@mui/material/styles";
+import { PLAY_AUDIO_ATTR as u, autoplayAudioOn as d, sanitizeModelHtml as f } from "@pie-element/shared-utils";
+import { jsx as p } from "react/jsx-runtime";
+import { renderMath as m } from "@pie-element/shared-math-rendering-mathjax";
 //#region src/preview-prompt.tsx
-var { translator: m } = p, h = "pie-prompt-audio-player", g = "play-audio-button", _ = (e) => `&:not(.MathJax) > table${e}, &:not(.MathJax) > .pie-table-scroll > table${e}`, v = c("div")(({ theme: i, tagName: a }) => ({
+var h = "pie-prompt-audio-player", g = "play-audio-button", _ = (e) => `&:not(.MathJax) > table${e}, &:not(.MathJax) > .pie-table-scroll > table${e}`, v = l("div")(({ theme: i, tagName: a }) => ({
 	[`& .${g}:focus-visible`]: {
 		outline: `2px solid ${e()}`,
 		outlineOffset: "2px"
@@ -45,35 +45,41 @@ var { translator: m } = p, h = "pie-prompt-audio-player", g = "play-audio-button
 		cursor: "pointer",
 		"& > p": { margin: "0 0 0 0 !important" }
 	}
-})), y = /\\embed\{newLine\}\[\]/g, b = "\\newline ", x = "preview-prompt", S = class extends o {
+})), y = /\\embed\{newLine\}\[\]/g, b = "\\newline ", x = "preview-prompt", S = class extends s {
 	static propTypes = {
-		prompt: s.string,
-		tagName: s.string,
-		className: s.string,
-		onClick: s.func,
-		defaultClassName: s.string,
-		autoplayAudioEnabled: s.bool,
-		customAudioButton: s.shape({
-			playImage: s.string,
-			pauseImage: s.string
+		prompt: c.string,
+		tagName: c.string,
+		className: c.string,
+		onClick: c.func,
+		defaultClassName: c.string,
+		autoplayAudioEnabled: c.bool,
+		autoplayAudioHeld: c.bool,
+		customAudioButton: c.shape({
+			playImage: c.string,
+			pauseImage: c.string
 		}),
-		language: s.string
+		language: c.string
 	};
 	static defaultProps = { onClick: () => {} };
-	promptRef = a.createRef();
-	audioId = i(h);
-	playButtonId = i(g);
+	promptRef = o.createRef();
+	audioId = a(h);
+	playButtonId = a(g);
 	parsedText = (e) => {
-		let { autoplayAudioEnabled: t, customAudioButton: n, language: r } = this.props, i = document.createElement("div");
-		i.innerHTML = u(e);
-		let a = i.querySelector("audio");
-		if (a) {
-			let e = document.createElement("source");
-			if (e.setAttribute("type", "audio/mp3"), e.setAttribute("src", a.getAttribute("src")), a.removeAttribute("src"), a.id) for (let e of i.querySelectorAll(`[${l}]`)) e.getAttribute(l) === a.id && e.setAttribute(l, this.audioId);
-			if (a.id = this.audioId, a.classList.add(h), a.appendChild(e), n) {
-				a.style.display = "none";
+		let { customAudioButton: t } = this.props, n = d(this.props), r = document.createElement("div");
+		r.innerHTML = f(e);
+		let i = r.querySelector("audio");
+		if (i) {
+			let e = i.getAttribute("src");
+			if (e) {
+				let t = document.createElement("source");
+				t.setAttribute("type", "audio/mp3"), t.setAttribute("src", e), i.removeAttribute("src"), i.appendChild(t);
+			}
+			let a = !1;
+			if (i.id) for (let e of r.querySelectorAll(`[${u}]`)) e.getAttribute(u) === i.id && (e.setAttribute(u, this.audioId), a = !0);
+			if (i.id = this.audioId, i.classList.add(h), !n && !t && !a && i.setAttribute("controls", ""), t) {
+				i.style.display = "none";
 				let e = document.createElement("button");
-				e.setAttribute("type", "button"), e.setAttribute("aria-label", m.t("common:playAudio", { lng: r })), e.id = this.playButtonId, e.className = g, Object.assign(e.style, {
+				e.setAttribute("type", "button"), e.id = this.playButtonId, e.className = g, Object.assign(e.style, {
 					cursor: "pointer",
 					display: "block",
 					width: "128px",
@@ -82,48 +88,51 @@ var { translator: m } = p, h = "pie-prompt-audio-player", g = "play-audio-button
 					padding: "0",
 					font: "inherit",
 					backgroundColor: "transparent",
-					backgroundImage: `url(${t ? n.pauseImage : n.playImage})`,
+					backgroundImage: `url(${n ? t.pauseImage : t.playImage})`,
 					backgroundSize: "cover",
 					borderRadius: "50%",
 					border: "1px solid #326295"
-				}), a.parentNode.insertBefore(e, a);
+				}), i.parentNode.insertBefore(e, i);
 			}
 		}
-		return i.innerHTML;
+		return r.innerHTML;
+	};
+	labelPlayButton = () => {
+		(this.promptRef.current?.querySelector(`.${g}`))?.setAttribute("aria-label", i.forLocale(this.props.language, this.labelPlayButton).t("playAudio"));
 	};
 	addCustomAudioButtonControls() {
-		let { autoplayAudioEnabled: e, customAudioButton: t } = this.props, n = this.promptRef.current, r = n?.querySelector(`.${g}`), i = n?.querySelector(`.${h}`);
-		if (e && i && i.play().then(() => {
-			r && t && i.addEventListener("ended", o);
-		}).catch((e) => {
-			r && t && (r.style.backgroundImage = `url(${t.playImage})`), console.error("Error playing audio", e);
-		}), !r || !i || !t) return;
-		let a = () => {
-			i.paused && i.play();
+		let { customAudioButton: e } = this.props, t = this.promptRef.current, n = t?.querySelector(`.${g}`), r = t?.querySelector(`.${h}`);
+		if (d(this.props) && r && r.play().then(() => {
+			n && e && r.addEventListener("ended", a);
+		}).catch((t) => {
+			n && e && (n.style.backgroundImage = `url(${e.playImage})`), console.error("Error playing audio", t);
+		}), !n || !r || !e) return;
+		let i = () => {
+			r.paused && r.play();
+		}, a = () => {
+			n.style.backgroundImage = `url(${e.playImage})`;
 		}, o = () => {
-			r.style.backgroundImage = `url(${t.playImage})`;
-		}, s = () => {
-			Object.assign(r.style, {
-				backgroundImage: `url(${t.pauseImage})`,
+			Object.assign(n.style, {
+				backgroundImage: `url(${e.pauseImage})`,
 				border: "1px solid #ccc"
 			});
-		}, c = () => {
-			Object.assign(r.style, {
-				backgroundImage: `url(${t.playImage})`,
+		}, s = () => {
+			Object.assign(n.style, {
+				backgroundImage: `url(${e.playImage})`,
 				border: "1px solid #326295"
 			});
 		};
-		r.addEventListener("click", a), i.addEventListener("play", s), i.addEventListener("pause", c), i.addEventListener("ended", o), this._playButton = r, this._audio = i, this._handlePlayClick = a, this._handleAudioPlay = s, this._handleAudioPause = c, this._handleAudioEnded = o;
+		n.addEventListener("click", i), r.addEventListener("play", o), r.addEventListener("pause", s), r.addEventListener("ended", a), this._playButton = n, this._audio = r, this._handlePlayClick = i, this._handleAudioPlay = o, this._handleAudioPause = s, this._handleAudioEnded = a;
 	}
 	removeCustomAudioButtonListeners() {
 		let e = this._playButton, t = this._audio;
 		!e || !t || (e.removeEventListener("click", this._handlePlayClick), t.removeEventListener("play", this._handleAudioPlay), t.removeEventListener("pause", this._handleAudioPause), t.removeEventListener("ended", this._handleAudioEnded));
 	}
 	componentDidMount() {
-		this.alignImages(), this.addCustomAudioButtonControls(), this.setupMathRendering();
+		this.alignImages(), this.labelPlayButton(), this.addCustomAudioButtonControls(), this.setupMathRendering();
 	}
 	componentDidUpdate(e) {
-		this.alignImages(), e.prompt !== this.props.prompt && this.renderMathContent();
+		this.alignImages(), this.labelPlayButton(), e.prompt !== this.props.prompt && this.renderMathContent();
 	}
 	componentWillUnmount() {
 		this.removeCustomAudioButtonListeners();
@@ -133,7 +142,7 @@ var { translator: m } = p, h = "pie-prompt-audio-player", g = "play-audio-button
 	}
 	renderMathContent() {
 		let e = this.promptRef.current;
-		e && typeof f == "function" && f(e);
+		e && typeof m == "function" && m(e);
 	}
 	alignImages() {
 		let e = this.promptRef.current;
@@ -154,7 +163,7 @@ var { translator: m } = p, h = "pie-prompt-audio-player", g = "play-audio-button
 	}
 	render() {
 		let { prompt: e, tagName: t, className: n, onClick: r, defaultClassName: i } = this.props, a = `${n || ""} ${i || ""} ${t === "legend" ? "legend" : ""} ${x}`.trim();
-		return /* @__PURE__ */ d(v, {
+		return /* @__PURE__ */ p(v, {
 			as: t || "div",
 			ref: this.promptRef,
 			onClick: r,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "8.0.6-next.20261015154938",
+  "version": "8.0.6-next.20261016234357",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "repository": {
     "type": "git",
@@ -13,13 +13,13 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/icons": "5.0.2-next.20261006160832",
-    "@pie-lib/translator": "5.0.2-next.20261006160832",
+    "@pie-element/shared-i18n": "0.1.1-next.20261016234357",
     "debug": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^4.4.5",
     "@pie-element/shared-math-rendering-mathjax": "0.1.7-next.20261015154938",
     "@pie-element/shared-lodash": "0.1.3-next.20261012213240",
-    "@pie-element/shared-utils": "0.1.5-next.20261012213240"
+    "@pie-element/shared-utils": "0.1.5-next.20261016234357"
   },
   "type": "module",
   "main": "./dist/index.js",