@thebuoyant-tsdev/mui-ts-library 3.9.1 → 3.11.2

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.types.d.ts

@@ -70,7 +70,7 @@ export type HorizontalTreeChartProps = {
     showIcons?: boolean;
     /** Per-depth color palette — falls back to MUI theme palette */
     chartColors?: string[];
-    /** Link stroke opacity (default: 0.4) */
+    /** Link stroke opacity (default: 1) */
     linkStrokeOpacity?: number;
     /** Link stroke width in px (default: 1.5) */
     linkStrokeWidth?: number;
@@ -88,6 +88,8 @@ export type HorizontalTreeChartProps = {
     renderNodePopoverContent?: (info: HorizontalTreeNodeInfo) => React.ReactNode;
     /** Fires on every node click */
     onNodeClick?: (info: HorizontalTreeNodeInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Drill-down/out crossfade duration in ms — set to 0 to disable (default: 750) */
+    duration?: number;
     /** Disables all interactions (default: false) */
     disabled?: boolean;
     /** Override translation strings */

package/dist/components/json-editor/JsonEditorContent.js

@@ -2,71 +2,80 @@ import { computeJsonPath as e } from "./util/jsonPathFinder.js";
 import { findRangeForPath as t, validateAgainstSchema as n } from "./util/jsonSchemaValidator.js";
 import { useEffect as r, useRef as i, useState as a } from "react";
 import { Box as o, Fade as s, Paper as c, Typography as ee, useTheme as te } from "@mui/material";
-import { EditorView as l, highlightActiveLine as ne, highlightActiveLineGutter as re, keymap as ie, lineNumbers as ae, placeholder as oe } from "@codemirror/view";
-import { Compartment as u, EditorState as d } from "@codemirror/state";
-import { json as se, jsonParseLinter as f } from "@codemirror/lang-json";
-import { defaultKeymap as ce, history as le, historyKeymap as ue } from "@codemirror/commands";
-import { HighlightStyle as de, foldGutter as fe, foldKeymap as pe, syntaxHighlighting as me } from "@codemirror/language";
-import { forceLinting as he, lintGutter as ge, linter as p } from "@codemirror/lint";
-import { tags as m } from "@lezer/highlight";
-import { showMinimap as _e } from "@replit/codemirror-minimap";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { EditorView as l, highlightActiveLine as ne, highlightActiveLineGutter as u, keymap as re, lineNumbers as d, placeholder as f } from "@codemirror/view";
+import { Compartment as p, EditorState as m } from "@codemirror/state";
+import { json as ie, jsonParseLinter as ae } from "@codemirror/lang-json";
+import { defaultKeymap as oe, history as se, historyKeymap as ce } from "@codemirror/commands";
+import { HighlightStyle as le, foldGutter as h, foldKeymap as ue, syntaxHighlighting as de } from "@codemirror/language";
+import { forceLinting as fe, lintGutter as pe, linter as g } from "@codemirror/lint";
+import { tags as _ } from "@lezer/highlight";
+import { showMinimap as me } from "@replit/codemirror-minimap";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/json-editor/JsonEditorContent.tsx
-function _({ value: _, onChange: v, placeholder: y, disabled: b = !1, readonly: x = !1, schema: S, showLineNumbers: ve = !0, showMinimap: C = !1, showFolding: w = !0, enablePathFinder: T = !0, highlightColors: E, onViewReady: D, onCursorChange: O, onBlur: k, onFocus: A, onPathCopy: j }) {
-	let M = i(null), N = i(null), P = i(null), F = i(v), I = i(O), L = i(k), R = i(A), z = i(D), B = i(j), V = i(T), H = i(S), [U, W] = a(null), G = i(new u()), K = i(new u()), q = te(), J = q.palette.mode === "dark", Y = E?.propertyName ?? q.palette.primary.main, X = E?.string ?? q.palette.success.main, Z = E?.number ?? q.palette.warning.main, Q = E?.boolean ?? q.palette.info.main, $ = E?.null ?? q.palette.text.secondary;
+function b(e) {
+	return e ? [d(), u()] : [];
+}
+function x(e) {
+	return e ? [h()] : [];
+}
+function S(e) {
+	return e ? [f(e)] : [];
+}
+function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly: C = !1, schema: w, showLineNumbers: T = !0, showMinimap: E = !1, showFolding: D = !0, enablePathFinder: O = !0, highlightColors: k, onViewReady: A, onCursorChange: j, onBlur: M, onFocus: N, onPathCopy: P }) {
+	let F = i(null), I = i(null), L = i(null), R = i(d), z = i(j), he = i(M), B = i(N), V = i(A), H = i(P), U = i(O), W = i(w), [G, K] = a(null), q = i(new p()), J = i(new p()), Y = i(new p()), X = i(new p()), Z = i(new p()), Q = te(), $ = Q.palette.mode === "dark", ge = k?.propertyName ?? Q.palette.primary.main, _e = k?.string ?? Q.palette.success.main, ve = k?.number ?? Q.palette.warning.main, ye = k?.boolean ?? Q.palette.info.main, be = k?.null ?? Q.palette.text.secondary;
 	return r(() => {
-		F.current = v;
-	}, [v]), r(() => {
-		I.current = O;
-	}, [O]), r(() => {
-		L.current = k;
-	}, [k]), r(() => {
-		R.current = A;
-	}, [A]), r(() => {
-		z.current = D;
-	}, [D]), r(() => {
-		B.current = j;
+		R.current = d;
+	}, [d]), r(() => {
+		z.current = j;
 	}, [j]), r(() => {
-		V.current = T;
-	}, [T]), r(() => {
-		H.current = S, P.current && he(P.current);
-	}, [S]), r(() => {
-		if (!N.current) return;
-		let r = P.current?.state.doc.toString() ?? _ ?? "", i = de.define([
+		he.current = M;
+	}, [M]), r(() => {
+		B.current = N;
+	}, [N]), r(() => {
+		V.current = A;
+	}, [A]), r(() => {
+		H.current = P;
+	}, [P]), r(() => {
+		U.current = O;
+	}, [O]), r(() => {
+		W.current = w, L.current && fe(L.current);
+	}, [w]), r(() => {
+		if (!I.current) return;
+		let r = L.current?.state.doc.toString() ?? u ?? "", i = le.define([
 			{
-				tag: m.propertyName,
-				color: Y,
+				tag: _.propertyName,
+				color: ge,
 				fontWeight: "bold"
 			},
 			{
-				tag: m.string,
-				color: X
+				tag: _.string,
+				color: _e
 			},
 			{
-				tag: m.number,
-				color: Z
+				tag: _.number,
+				color: ve
 			},
 			{
-				tag: m.bool,
-				color: Q,
+				tag: _.bool,
+				color: ye,
 				fontWeight: "bold"
 			},
 			{
-				tag: m.null,
-				color: $,
+				tag: _.null,
+				color: be,
 				fontStyle: "italic"
 			},
 			{
-				tag: m.bracket,
-				color: q.palette.text.secondary
+				tag: _.bracket,
+				color: Q.palette.text.secondary
 			},
 			{
-				tag: m.punctuation,
-				color: q.palette.text.disabled
+				tag: _.punctuation,
+				color: Q.palette.text.disabled
 			},
 			{
-				tag: m.invalid,
-				color: q.palette.error.main,
+				tag: _.invalid,
+				color: Q.palette.error.main,
 				textDecoration: "underline wavy"
 			}
 		]), a = l.theme({
@@ -78,63 +87,63 @@ function _({ value: _, onChange: v, placeholder: y, disabled: b = !1, readonly:
 			".cm-scroller": { overflow: "auto" },
 			".cm-content": {
 				padding: "8px 4px",
-				caretColor: q.palette.text.primary
+				caretColor: Q.palette.text.primary
 			},
 			".cm-gutters": {
-				backgroundColor: J ? q.palette.grey[900] : q.palette.grey[50],
-				color: q.palette.text.disabled,
+				backgroundColor: $ ? Q.palette.grey[900] : Q.palette.grey[50],
+				color: Q.palette.text.disabled,
 				border: "none",
-				borderRight: `1px solid ${q.palette.divider}`
+				borderRight: `1px solid ${Q.palette.divider}`
 			},
 			".cm-lineNumbers .cm-gutterElement": {
 				paddingLeft: "4px",
 				paddingRight: "8px"
 			},
-			".cm-activeLineGutter": { backgroundColor: q.palette.action.selected },
-			".cm-activeLine": { backgroundColor: q.palette.action.hover },
-			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: q.palette.primary.main + "40" },
-			".cm-cursor, .cm-dropCursor": { borderLeftColor: q.palette.text.primary },
+			".cm-activeLineGutter": { backgroundColor: Q.palette.action.selected },
+			".cm-activeLine": { backgroundColor: Q.palette.action.hover },
+			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: Q.palette.primary.main + "40" },
+			".cm-cursor, .cm-dropCursor": { borderLeftColor: Q.palette.text.primary },
 			"&.cm-focused": { outline: "none" },
 			".cm-placeholder": {
-				color: q.palette.text.disabled,
+				color: Q.palette.text.disabled,
 				fontStyle: "italic"
 			},
 			".cm-gutter-lint": { width: "16px" },
-			".cm-lint-marker-error": { color: q.palette.error.main },
-			".cm-lint-marker-warning": { color: q.palette.warning.main },
+			".cm-lint-marker-error": { color: Q.palette.error.main },
+			".cm-lint-marker-warning": { color: Q.palette.warning.main },
 			".cm-foldGutter .cm-gutterElement": {
 				cursor: "pointer",
-				color: q.palette.text.disabled
+				color: Q.palette.text.disabled
 			},
 			".cm-foldPlaceholder": {
-				backgroundColor: q.palette.action.selected,
-				border: `1px solid ${q.palette.divider}`,
+				backgroundColor: Q.palette.action.selected,
+				border: `1px solid ${Q.palette.divider}`,
 				borderRadius: "3px",
-				color: q.palette.text.secondary,
+				color: Q.palette.text.secondary,
 				padding: "0 4px"
 			},
 			".cm-tooltip.cm-tooltip-lint": {
-				backgroundColor: q.palette.background.paper,
-				border: `1px solid ${q.palette.divider}`,
+				backgroundColor: Q.palette.background.paper,
+				border: `1px solid ${Q.palette.divider}`,
 				borderRadius: "4px"
 			},
-			".cm-diagnostic-error": { borderLeft: `3px solid ${q.palette.error.main}` },
-			".cm-diagnostic-warning": { borderLeft: `3px solid ${q.palette.warning.main}` }
-		}, { dark: J }), o = C ? [_e.of({
+			".cm-diagnostic-error": { borderLeft: `3px solid ${Q.palette.error.main}` },
+			".cm-diagnostic-warning": { borderLeft: `3px solid ${Q.palette.warning.main}` }
+		}, { dark: $ }), o = E ? [me.of({
 			create: () => {
 				let e = document.createElement("div");
-				return e.style.width = "80px", e.style.overflow = "hidden", e.style.borderLeft = `1px solid ${q.palette.divider}`, e.style.backgroundColor = J ? q.palette.grey[900] : q.palette.grey[50], { dom: e };
+				return e.style.width = "80px", e.style.overflow = "hidden", e.style.borderLeft = `1px solid ${Q.palette.divider}`, e.style.backgroundColor = $ ? Q.palette.grey[900] : Q.palette.grey[50], { dom: e };
 			},
 			displayText: "blocks",
 			showOverlay: "always"
 		})] : [], s = [
 			a,
-			me(i),
-			se(),
-			ge(),
-			p(f()),
-			p((e) => {
-				let r = H.current;
+			de(i),
+			ie(),
+			pe(),
+			g(ae()),
+			g((e) => {
+				let r = W.current;
 				if (!r) return [];
 				let i;
 				try {
@@ -154,33 +163,33 @@ function _({ value: _, onChange: v, placeholder: y, disabled: b = !1, readonly:
 				}
 				return a;
 			}),
-			le(),
-			ie.of([
+			se(),
+			re.of([
+				...oe,
 				...ce,
-				...ue,
-				...pe
+				...ue
 			]),
-			G.current.of(l.editable.of(!b && !x)),
-			K.current.of(d.readOnly.of(x)),
+			q.current.of(l.editable.of(!h && !C)),
+			J.current.of(m.readOnly.of(C)),
 			ne(),
-			...ve ? [ae(), re()] : [],
-			...w ? [fe()] : [],
-			...y ? [oe(y)] : [],
+			X.current.of(b(T)),
+			Y.current.of(x(D)),
+			Z.current.of(S(f)),
 			...o,
 			l.updateListener.of((e) => {
-				e.docChanged && F.current?.(e.state.doc.toString());
+				e.docChanged && R.current?.(e.state.doc.toString());
 				let t = e.state.selection.main.head, n = e.state.doc.lineAt(t);
-				I.current(n.number, t - n.from + 1);
+				z.current(n.number, t - n.from + 1);
 			}),
 			l.domEventHandlers({
 				blur: () => {
-					L.current?.();
+					he.current?.();
 				},
 				focus: () => {
-					R.current?.();
+					B.current?.();
 				},
 				click: (t, n) => {
-					if (!V.current || !(t.ctrlKey || t.metaKey)) return !1;
+					if (!U.current || !(t.ctrlKey || t.metaKey)) return !1;
 					let r;
 					try {
 						r = n.posAtCoords({
@@ -193,79 +202,85 @@ function _({ value: _, onChange: v, placeholder: y, disabled: b = !1, readonly:
 					if (r === null) return !1;
 					let i = e(n.state, r);
 					return i ? (navigator.clipboard.writeText(i).then(() => {
-						let e = M.current?.getBoundingClientRect();
-						W({
+						let e = F.current?.getBoundingClientRect();
+						K({
 							x: t.clientX - (e?.left ?? 0),
 							y: t.clientY - (e?.top ?? 0),
 							path: i
-						}), B.current?.(i);
+						}), H.current?.(i);
 					}), !0) : !1;
 				}
 			})
 		], c = new l({
-			state: d.create({
+			state: m.create({
 				doc: r,
 				extensions: s
 			}),
-			parent: N.current
+			parent: I.current
 		});
-		return P.current = c, z.current(c), () => {
-			z.current(null), c.destroy(), P.current = null;
+		return L.current = c, V.current(c), () => {
+			V.current(null), c.destroy(), L.current = null;
 		};
 	}, [
-		J,
-		Y,
-		X,
-		Z,
-		Q,
 		$,
-		C
+		ge,
+		_e,
+		ve,
+		ye,
+		be,
+		E
 	]), r(() => {
-		let e = P.current;
+		let e = L.current;
 		if (!e) return;
 		let t = e.state.doc.toString();
-		t !== (_ ?? "") && e.dispatch({ changes: {
+		t !== (u ?? "") && e.dispatch({ changes: {
 			from: 0,
 			to: t.length,
-			insert: _ ?? ""
+			insert: u ?? ""
 		} });
-	}, [_]), r(() => {
-		P.current?.dispatch({ effects: [G.current.reconfigure(l.editable.of(!b && !x)), K.current.reconfigure(d.readOnly.of(x))] });
-	}, [b, x]), r(() => {
-		if (!U) return;
-		let e = setTimeout(() => W(null), 1500);
+	}, [u]), r(() => {
+		L.current?.dispatch({ effects: [q.current.reconfigure(l.editable.of(!h && !C)), J.current.reconfigure(m.readOnly.of(C))] });
+	}, [h, C]), r(() => {
+		L.current?.dispatch({ effects: X.current.reconfigure(b(T)) });
+	}, [T]), r(() => {
+		L.current?.dispatch({ effects: Y.current.reconfigure(x(D)) });
+	}, [D]), r(() => {
+		L.current?.dispatch({ effects: Z.current.reconfigure(S(f)) });
+	}, [f]), r(() => {
+		if (!G) return;
+		let e = setTimeout(() => K(null), 1500);
 		return () => clearTimeout(e);
-	}, [U]), /* @__PURE__ */ g(o, {
-		ref: M,
+	}, [G]), /* @__PURE__ */ y(o, {
+		ref: F,
 		sx: {
 			position: "relative",
 			flex: 1,
 			overflow: "hidden",
 			display: "flex"
 		},
-		children: [/* @__PURE__ */ h(o, {
-			ref: N,
+		children: [/* @__PURE__ */ v(o, {
+			ref: I,
 			sx: {
 				flex: 1,
 				overflow: "hidden",
 				display: "flex",
 				flexDirection: "column",
-				opacity: b ? .5 : 1,
-				backgroundColor: q.palette.background.paper,
+				opacity: h ? .5 : 1,
+				backgroundColor: Q.palette.background.paper,
 				"& .cm-editor": {
 					flex: 1,
 					display: "flex",
 					flexDirection: "column"
 				}
 			}
-		}), U && /* @__PURE__ */ h(s, {
+		}), G && /* @__PURE__ */ v(s, {
 			in: !0,
-			children: /* @__PURE__ */ h(c, {
+			children: /* @__PURE__ */ v(c, {
 				elevation: 3,
 				sx: {
 					position: "absolute",
-					left: U.x,
-					top: U.y,
+					left: G.x,
+					top: G.y,
 					transform: "translate(-50%, -130%)",
 					px: 1,
 					py: .5,
@@ -274,14 +289,14 @@ function _({ value: _, onChange: v, placeholder: y, disabled: b = !1, readonly:
 					bgcolor: "grey.900",
 					color: "common.white"
 				},
-				children: /* @__PURE__ */ g(ee, {
+				children: /* @__PURE__ */ y(ee, {
 					variant: "caption",
 					sx: { fontFamily: "monospace" },
-					children: ["Copied: ", U.path]
+					children: ["Copied: ", G.path]
 				})
 			})
 		})]
 	});
 }
 //#endregion
-export { _ as JsonEditorContent };
+export { C as JsonEditorContent };

package/dist/components/json-editor/JsonEditorToolbar.js

@@ -1,5 +1,5 @@
 import { ToolbarButton as e } from "../shared/ToolbarButton.js";
-import { useState as t } from "react";
+import { useTimedFlag as t } from "../shared/useTimedFlag.js";
 import { Box as n, Divider as r } from "@mui/material";
 import { redo as i, undo as a } from "@codemirror/commands";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -12,7 +12,7 @@ import p from "@mui/icons-material/AutoFixHigh";
 import m from "@mui/icons-material/Compress";
 //#region src/components/json-editor/JsonEditorToolbar.tsx
 function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disabled: y }) {
-	let [b, x] = t(!1), S = y || !h;
+	let [b, x] = t(), S = y || !h;
 	function C() {
 		let e = h;
 		if (!e) return;
@@ -44,7 +44,7 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
 	function T() {
 		let e = h?.state.doc.toString() ?? "";
 		navigator.clipboard.writeText(e).then(() => {
-			x(!0), setTimeout(() => x(!1), 2e3);
+			x();
 		});
 	}
 	function E() {