@pie-lib/render-ui 8.0.1-next.20261003161149 → 8.0.1-next.20261004162038

package/dist/collapsible/index.d.ts

@@ -15,6 +15,7 @@ export declare class Collapsible extends React.Component {
     state: {
         expanded: boolean;
     };
+    panelId: string;
     toggleExpanded: any;
     componentDidMount(): void;
     componentDidUpdate(): void;

package/dist/collapsible/index.js

@@ -1,53 +1,68 @@
-import e from "react";
-import t from "prop-types";
-import { styled as n } from "@mui/material/styles";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@mui/material/Collapse";
-import { renderMath as o } from "@pie-element/shared-math-rendering-mathjax";
+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";
 //#region src/collapsible/index.tsx
-var s = n("span")(({ theme: e }) => ({
-	color: e.palette.primary.light,
-	borderBottom: `1px dotted ${e.palette.primary.light}`,
+var l = i("button")({
+	display: "inline-block",
+	minHeight: "24px",
+	padding: 0,
+	border: 0,
+	background: "transparent",
+	font: "inherit",
+	textAlign: "inherit",
+	color: e(),
 	cursor: "pointer"
-})), c = n(a)(({ theme: e }) => ({ paddingTop: e.spacing(2) })), l = class extends e.Component {
+}), u = i("span")({ borderBottom: "1px dotted currentColor" }), d = i(s)(({ theme: e }) => ({ paddingTop: e.spacing(2) })), f = class extends n.Component {
 	static propTypes = {
-		className: t.string,
-		children: t.object,
-		labels: t.shape({
-			visible: t.string,
-			hidden: t.string
+		className: r.string,
+		children: r.object,
+		labels: r.shape({
+			visible: r.string,
+			hidden: r.string
 		})
 	};
 	static defaultProps = { labels: {} };
 	state = { expanded: !1 };
+	panelId = t("pie-collapsible");
 	toggleExpanded = () => {
 		this.setState((e) => ({ expanded: !e.expanded }));
 	};
 	componentDidMount() {
-		o(this.root);
+		c(this.root);
 	}
 	componentDidUpdate() {
-		o(this.root);
+		c(this.root);
 	}
 	render() {
-		let { labels: e, children: t, className: n } = this.props, a = this.state.expanded ? e.visible || "Hide" : e.hidden || "Show";
-		return /* @__PURE__ */ i("div", {
+		let { labels: e, children: t, className: n } = this.props, { expanded: r } = this.state, i = r ? e.visible || "Hide" : e.hidden || "Show";
+		return /* @__PURE__ */ o("div", {
 			className: n,
 			ref: (e) => this.root = e,
-			children: [/* @__PURE__ */ r("div", {
+			children: [/* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(l, {
+				type: "button",
+				"aria-expanded": r,
+				"aria-controls": this.panelId,
 				onClick: this.toggleExpanded,
-				children: /* @__PURE__ */ r(s, { children: a })
-			}), /* @__PURE__ */ r(c, {
-				in: this.state.expanded,
-				timeout: {
-					enter: 225,
-					exit: 195
-				},
-				unmountOnExit: !0,
-				children: t
+				children: /* @__PURE__ */ a(u, { children: i })
+			}) }), /* @__PURE__ */ a("div", {
+				id: this.panelId,
+				children: /* @__PURE__ */ a(d, {
+					in: r,
+					timeout: {
+						enter: 225,
+						exit: 195
+					},
+					unmountOnExit: !0,
+					children: t
+				})
 			})]
 		});
 	}
 };
 //#endregion
-export { l as Collapsible, l as default };
+export { f as Collapsible, f as default };

package/dist/index.d.ts

@@ -16,3 +16,4 @@ import EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage.js';
 import { transformDataHeadings } from './transform-headings.js';
 export { HtmlAndMath, indicators, withUndoReset, Feedback, UiLayout, PreviewLayout, Collapsible, InputContainer, PreviewPrompt, color, Readable, Purpose, hasText, hasMedia, EnableAudioAutoplayImage, transformDataHeadings, };
 export { InlineMenu } from './inline-menu.js';
+export { createUniqueId, useUniqueId } from './unique-id.js';

package/dist/index.js

@@ -1,18 +1,19 @@
 import { color_exports as e } from "./color.js";
 import { Feedback as t } from "./feedback.js";
 import { response_indicators_exports as n } from "./response-indicators.js";
-import { Collapsible as r } from "./collapsible/index.js";
-import i from "./withUndoReset.js";
-import a from "./ui-layout.js";
-import o from "./preview-layout.js";
-import s from "./html-and-math.js";
-import c from "./input-container.js";
-import { PreviewPrompt as l } from "./preview-prompt.js";
-import u from "./readable.js";
-import d from "./purpose.js";
-import { hasText as f } from "./has-text.js";
-import { hasMedia as p } from "./has-media.js";
-import m from "./assets/enableAudioAutoplayImage.js";
-import { transformDataHeadings as h } from "./transform-headings.js";
-import { InlineMenu as g } from "./inline-menu.js";
-export { r as Collapsible, m as EnableAudioAutoplayImage, t as Feedback, s as HtmlAndMath, g as InlineMenu, c as InputContainer, o as PreviewLayout, l as PreviewPrompt, d as Purpose, u as Readable, a as UiLayout, e as color, p as hasMedia, f as hasText, n as indicators, h as transformDataHeadings, i as withUndoReset };
+import { createUniqueId as r, useUniqueId as i } from "./unique-id.js";
+import { Collapsible as a } from "./collapsible/index.js";
+import o from "./withUndoReset.js";
+import s from "./ui-layout.js";
+import c from "./preview-layout.js";
+import l from "./html-and-math.js";
+import u from "./input-container.js";
+import { PreviewPrompt as d } from "./preview-prompt.js";
+import f from "./readable.js";
+import p from "./purpose.js";
+import { hasText as m } from "./has-text.js";
+import { hasMedia as h } from "./has-media.js";
+import g from "./assets/enableAudioAutoplayImage.js";
+import { transformDataHeadings as _ } from "./transform-headings.js";
+import { InlineMenu as v } from "./inline-menu.js";
+export { a as Collapsible, g as EnableAudioAutoplayImage, t as Feedback, l as HtmlAndMath, v as InlineMenu, u as InputContainer, c as PreviewLayout, d as PreviewPrompt, p as Purpose, f as Readable, s as UiLayout, e as color, r as createUniqueId, h as hasMedia, m as hasText, n as indicators, _ as transformDataHeadings, i as useUniqueId, o as withUndoReset };

package/dist/unique-id.d.ts

@@ -0,0 +1,2 @@
+export declare const createUniqueId: (prefix: string) => string;
+export declare const useUniqueId: (prefix: string) => string;

package/dist/unique-id.js

@@ -0,0 +1,5 @@
+import e from "react";
+//#region src/unique-id.ts
+var t = (e) => `${e}-${Math.random().toString(36).slice(2, 10)}`, n = (n) => e.useState(() => t(n))[0];
+//#endregion
+export { t as createUniqueId, n as useUniqueId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "8.0.1-next.20261003161149",
+  "version": "8.0.1-next.20261004162038",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "repository": {
     "type": "git",