@thebuoyant-tsdev/mui-ts-library 3.2.0 → 3.4.0

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.js

@@ -0,0 +1,488 @@
+import { DEFAULT_HORIZONTAL_TREE_TRANSLATION as e } from "./HorizontalTreeChart.types.js";
+import { useCallback as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { Avatar as o, Box as s, Divider as c, Popover as l, Tooltip as ee, Typography as u, useTheme as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import * as h from "d3";
+//#region src/components/horizontal-tree-chart/HorizontalTreeChart.tsx
+var g = {
+	folder: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z",
+	person: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+};
+function te({ path: e, size: t }) {
+	let n = t / 2;
+	return /* @__PURE__ */ p("g", {
+		transform: `translate(${-n},${-n})`,
+		pointerEvents: "none",
+		children: /* @__PURE__ */ p("svg", {
+			width: t,
+			height: t,
+			viewBox: "0 0 24 24",
+			overflow: "visible",
+			children: /* @__PURE__ */ p("path", {
+				d: e,
+				fill: "white"
+			})
+		})
+	});
+}
+function _({ info: e, labelA: t, labelB: n }) {
+	return /* @__PURE__ */ m(s, {
+		sx: {
+			p: 2,
+			minWidth: 200,
+			maxWidth: 280
+		},
+		children: [/* @__PURE__ */ m(s, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: 1.5,
+				mb: 1.5
+			},
+			children: [/* @__PURE__ */ p(o, {
+				sx: {
+					bgcolor: "primary.main",
+					width: 40,
+					height: 40
+				},
+				children: e.name.charAt(0).toUpperCase()
+			}), /* @__PURE__ */ m(s, { children: [/* @__PURE__ */ p(u, {
+				variant: "body2",
+				sx: { fontWeight: "bold" },
+				children: e.name
+			}), e.subname && /* @__PURE__ */ p(u, {
+				variant: "caption",
+				color: "text.secondary",
+				children: e.subname
+			})] })]
+		}), (e.specialValueA != null || e.specialValueB != null) && /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p(c, { sx: { mb: 1.5 } }),
+			e.specialValueA != null && /* @__PURE__ */ m(s, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mb: .5
+				},
+				children: [/* @__PURE__ */ p(u, {
+					variant: "caption",
+					color: "text.secondary",
+					children: t
+				}), /* @__PURE__ */ p(u, {
+					variant: "caption",
+					children: String(e.specialValueA)
+				})]
+			}),
+			e.specialValueB != null && /* @__PURE__ */ m(s, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ p(u, {
+					variant: "caption",
+					color: "text.secondary",
+					children: n
+				}), /* @__PURE__ */ p(u, {
+					variant: "caption",
+					children: String(e.specialValueB)
+				})]
+			})
+		] })]
+	});
+}
+function v({ data: o, orientation: c = "LR", width: f = 800, height: v = 500, levelSpacing: y = 200, nodeRadius: b = 10, sortBy: x = "name", showLabels: ne = !0, labelFontSize: re = 12, labelColor: ie, showIcons: ae = !0, chartColors: S, linkStrokeOpacity: oe = 1, linkStrokeWidth: se = 1.5, linkColor: ce, zoomable: C = !1, drillable: w = !1, onFocusChange: T, showNodePopover: E = !1, renderNodePopoverContent: D, onNodeClick: le, disabled: O = !1, translation: ue }) {
+	let k = d(), A = {
+		...e,
+		...ue
+	}, de = [
+		k.palette.primary.main,
+		k.palette.secondary.main,
+		k.palette.error.main,
+		k.palette.warning.main,
+		k.palette.success.main,
+		k.palette.info.main
+	], j = S && S.length > 0 ? S : de, fe = ie || k.palette.text.primary, pe = ce || k.palette.text.secondary, me = k.palette.background.paper, he = k.typography.fontFamily, M = c === "TB" || c === "BT", N = M ? v : f, P = M ? f : v, [F, I] = a([o]), L = F[F.length - 1], [ge, _e] = a(o);
+	ge !== o && (_e(o), I([o]));
+	let R = r(() => {
+		let e = h.hierarchy(L);
+		x === "value" ? (e.sum((e) => e.value ?? 0), e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0))) : e.sort((e, t) => h.ascending(String(e.data.name), String(t.data.name)));
+		let t = h.max(e.descendants(), (e) => e.depth) ?? 1;
+		return h.tree().size([N * .8, Math.min(t * y, P * .85)])(e);
+	}, [
+		L,
+		x,
+		N,
+		P,
+		y
+	]), ve = R.descendants(), ye = R.links(), be = t((e) => e.data.colorConfig?.fill ?? j[e.depth % j.length], [j]), z = t((e) => {
+		switch (c) {
+			case "LR": return {
+				x: e.y,
+				y: e.x - N * .4
+			};
+			case "RL": return {
+				x: P * .85 - e.y,
+				y: e.x - N * .4
+			};
+			case "TB": return {
+				x: e.x - N * .4,
+				y: e.y
+			};
+			case "BT": return {
+				x: e.x - N * .4,
+				y: P * .85 - e.y
+			};
+		}
+	}, [
+		c,
+		N,
+		P
+	]), xe = t((e) => {
+		let t = z(e.source), n = z(e.target);
+		if (c === "LR" || c === "RL") {
+			let e = (t.x + n.x) / 2;
+			return `M${t.x},${t.y} C${e},${t.y} ${e},${n.y} ${n.x},${n.y}`;
+		}
+		let r = (t.y + n.y) / 2;
+		return `M${t.x},${t.y} C${t.x},${r} ${n.x},${r} ${n.x},${n.y}`;
+	}, [z, c]), B = t((e) => ({
+		id: e.data.id ?? null,
+		name: e.data.name,
+		subname: e.data.subname ?? null,
+		value: e.value ?? e.data.value ?? null,
+		specialValueA: e.data.specialValueA ?? null,
+		specialValueB: e.data.specialValueB ?? null,
+		depth: e.depth,
+		path: e.ancestors().map((e) => e.data.name).reverse(),
+		childrenCount: e.children?.length ?? 0,
+		data: e.data
+	}), []), [V, H] = a(`0 -${v / 2} ${f} ${v}`), [U, W] = a(1), G = i(null), Se = r(() => {
+		if (U === 1) return V;
+		let [e, t, n, r] = V.split(" ").map(Number), i = n / U, a = r / U;
+		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
+	}, [V, U]);
+	n(() => {
+		let e = G.current;
+		if (!e) return;
+		let t = requestAnimationFrame(() => {
+			try {
+				let t = e.getBBox();
+				H(`${t.x - 24} ${t.y - 24} ${t.width + 48} ${t.height + 48}`);
+			} catch {
+				H(`0 -${v / 2} ${f} ${v}`);
+			}
+		});
+		return () => cancelAnimationFrame(t);
+	}, [
+		R,
+		f,
+		v,
+		c
+	]);
+	let Ce = t((e) => {
+		if (!C || O || !e.ctrlKey) return;
+		e.preventDefault();
+		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+		W((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [C, O]), K = i(null), we = (e) => {
+		K.current &&= (clearTimeout(K.current), null), K.current = setTimeout(() => {
+			e(), K.current = null;
+		}, 250);
+	}, q = () => {
+		K.current &&= (clearTimeout(K.current), null);
+	}, J = t(() => {
+		I((e) => {
+			if (e.length <= 1) return e;
+			let t = e.slice(0, -1);
+			return T?.({
+				focusedNode: {
+					id: t[t.length - 1].id ?? null,
+					name: t[t.length - 1].name,
+					subname: t[t.length - 1].subname ?? null,
+					value: null,
+					specialValueA: null,
+					specialValueB: null,
+					depth: t.length - 1,
+					path: t.map((e) => e.name),
+					childrenCount: t[t.length - 1].children?.length ?? 0,
+					data: t[t.length - 1]
+				},
+				isRoot: t.length <= 1
+			}), t;
+		});
+	}, [T]);
+	n(() => {
+		if (!C && !w) return;
+		let e = (e) => {
+			e.key === "Escape" && (C && W(1), w && (I([o]), T?.({
+				focusedNode: {
+					id: o.id ?? null,
+					name: o.name,
+					subname: o.subname ?? null,
+					value: null,
+					specialValueA: null,
+					specialValueB: null,
+					depth: 0,
+					path: [o.name],
+					childrenCount: o.children?.length ?? 0,
+					data: o
+				},
+				isRoot: !0
+			})));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		C,
+		w,
+		o,
+		T
+	]);
+	let Y = i(null), X = i(null), [Te, Z] = a(!1), [Ee, De] = a(null), [Q, Oe] = a({
+		left: 0,
+		top: 0
+	}), [$, ke] = a(null), Ae = (e, t) => {
+		if (O) return;
+		let n = B(e);
+		if ((t.ctrlKey || t.metaKey) && w && e.children) {
+			we(() => {
+				I((t) => [...t, e.data]), T?.({
+					focusedNode: n,
+					isRoot: !1
+				});
+			});
+			return;
+		}
+		if ((t.ctrlKey || t.metaKey) && w) {
+			q(), J();
+			return;
+		}
+		if (E) {
+			let e = Y.current?.getBoundingClientRect();
+			Oe({
+				left: e ? t.clientX - e.left : t.clientX,
+				top: e ? t.clientY - e.top : t.clientY
+			}), De(X.current), ke(n), Z(!0);
+		}
+		le?.(n, t);
+	}, je = (e, t) => {
+		O || !w || (t.ctrlKey || t.metaKey) && (q(), J());
+	}, Me = {
+		followCursor: !0,
+		enterDelay: 50,
+		enterNextDelay: 0,
+		disableHoverListener: O,
+		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
+	}, Ne = Math.round(b * 1.3);
+	return /* @__PURE__ */ m(s, {
+		ref: Y,
+		sx: {
+			display: "inline-flex",
+			position: "relative",
+			opacity: O ? .5 : 1,
+			cursor: O ? "not-allowed" : "default",
+			userSelect: "none"
+		},
+		children: [
+			/* @__PURE__ */ p(s, {
+				ref: X,
+				sx: {
+					position: "absolute",
+					left: Q.left,
+					top: Q.top,
+					width: 0,
+					height: 0
+				}
+			}),
+			w && F.length > 1 && /* @__PURE__ */ p(s, {
+				sx: {
+					position: "absolute",
+					top: 4,
+					left: 0,
+					right: 0,
+					display: "flex",
+					justifyContent: "center",
+					pointerEvents: "none",
+					zIndex: 1
+				},
+				children: /* @__PURE__ */ p(u, {
+					variant: "caption",
+					sx: {
+						bgcolor: "action.hover",
+						borderRadius: 1,
+						px: 1,
+						py: .25,
+						color: "text.secondary",
+						fontSize: "0.7rem"
+					},
+					children: F.map((e) => e.name).join(" › ")
+				})
+			}),
+			/* @__PURE__ */ p("svg", {
+				width: f,
+				height: v,
+				viewBox: Se,
+				onWheel: Ce,
+				style: {
+					fontFamily: he ?? "sans-serif",
+					overflow: C && U > 1 ? "hidden" : "visible"
+				},
+				role: "img",
+				"aria-label": o.name,
+				children: /* @__PURE__ */ m("g", {
+					ref: G,
+					children: [/* @__PURE__ */ p("g", {
+						fill: "none",
+						stroke: pe,
+						strokeOpacity: oe,
+						strokeWidth: se,
+						children: ye.map((e, t) => /* @__PURE__ */ p("path", { d: xe(e) }, `link-${t}`))
+					}), ve.map((e, t) => {
+						let n = z(e), r = be(e), i = B(e), a = e.children ? g.folder : g.person, o = c === "LR", l = c === "RL", d = o ? b + 6 : l ? -(b + 6) : 0, f = !o && !l ? c === "TB" ? b + 16 : -(b + 6) : 0, h = o ? "start" : l ? "end" : "middle", _ = /* @__PURE__ */ m(s, {
+							sx: {
+								py: .5,
+								minWidth: 140
+							},
+							children: [
+								/* @__PURE__ */ p(u, {
+									variant: "caption",
+									sx: {
+										fontWeight: "bold",
+										display: "block",
+										fontSize: "0.8rem"
+									},
+									children: e.data.name
+								}),
+								e.data.subname && /* @__PURE__ */ p(u, {
+									variant: "caption",
+									sx: {
+										display: "block",
+										opacity: .85
+									},
+									children: e.data.subname
+								}),
+								(i.specialValueA != null || i.specialValueB != null || e.children) && /* @__PURE__ */ m(s, {
+									sx: {
+										mt: .75,
+										borderTop: "1px solid rgba(255,255,255,0.2)",
+										pt: .75
+									},
+									children: [
+										i.specialValueA != null && /* @__PURE__ */ m(s, {
+											sx: {
+												display: "flex",
+												justifyContent: "space-between",
+												gap: 2
+											},
+											children: [/* @__PURE__ */ p(u, {
+												variant: "caption",
+												sx: { opacity: .6 },
+												children: A.specialValueA ?? "A"
+											}), /* @__PURE__ */ p(u, {
+												variant: "caption",
+												children: String(i.specialValueA)
+											})]
+										}),
+										i.specialValueB != null && /* @__PURE__ */ m(s, {
+											sx: {
+												display: "flex",
+												justifyContent: "space-between",
+												gap: 2
+											},
+											children: [/* @__PURE__ */ p(u, {
+												variant: "caption",
+												sx: { opacity: .6 },
+												children: A.specialValueB ?? "B"
+											}), /* @__PURE__ */ p(u, {
+												variant: "caption",
+												children: String(i.specialValueB)
+											})]
+										}),
+										e.children && /* @__PURE__ */ m(s, {
+											sx: {
+												display: "flex",
+												justifyContent: "space-between",
+												gap: 2
+											},
+											children: [/* @__PURE__ */ p(u, {
+												variant: "caption",
+												sx: { opacity: .6 },
+												children: "Reports"
+											}), /* @__PURE__ */ p(u, {
+												variant: "caption",
+												children: e.children.length
+											})]
+										})
+									]
+								})
+							]
+						});
+						return /* @__PURE__ */ p(ee, {
+							...Me,
+							title: _,
+							children: /* @__PURE__ */ m("g", {
+								transform: `translate(${n.x},${n.y})`,
+								onClick: (t) => Ae(e, t),
+								onDoubleClick: (t) => je(e, t),
+								style: { cursor: O ? "not-allowed" : "pointer" },
+								children: [
+									/* @__PURE__ */ p("circle", {
+										r: b + 8,
+										fill: "transparent"
+									}),
+									/* @__PURE__ */ p("circle", {
+										r: b + 2,
+										fill: r,
+										fillOpacity: .15
+									}),
+									/* @__PURE__ */ p("circle", {
+										r: b,
+										fill: r
+									}),
+									ae && /* @__PURE__ */ p(te, {
+										path: a,
+										size: Ne
+									}),
+									ne && /* @__PURE__ */ p("text", {
+										x: d,
+										y: f,
+										dy: "0.35em",
+										textAnchor: h,
+										fontSize: re,
+										fontWeight: e.children ? "bold" : "normal",
+										fill: e.data.colorConfig?.textColor ?? fe,
+										paintOrder: "stroke",
+										stroke: me,
+										strokeWidth: 3,
+										pointerEvents: "none",
+										children: e.data.name
+									})
+								]
+							})
+						}, `node-${t}`);
+					})]
+				})
+			}),
+			E && /* @__PURE__ */ p(l, {
+				open: Te,
+				anchorEl: Ee,
+				onClose: () => Z(!1),
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "right"
+				},
+				transformOrigin: {
+					vertical: "top",
+					horizontal: "left"
+				},
+				slotProps: { paper: { elevation: 4 } },
+				children: $ && (D ? D($) : /* @__PURE__ */ p(_, {
+					info: $,
+					labelA: A.specialValueA ?? "Value A",
+					labelB: A.specialValueB ?? "Value B"
+				}))
+			})
+		]
+	});
+}
+v.displayName = "HorizontalTreeChart";
+//#endregion
+export { v as HorizontalTreeChart };

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.types.js

@@ -0,0 +1,8 @@
+//#region src/components/horizontal-tree-chart/HorizontalTreeChart.types.ts
+var e = {
+	noData: "No data",
+	specialValueA: "Value A",
+	specialValueB: "Value B"
+};
+//#endregion
+export { e as DEFAULT_HORIZONTAL_TREE_TRANSLATION };

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

@@ -0,0 +1,102 @@
+import { DEFAULT_JSON_EDITOR_TOOLBAR_CONFIG as e, DEFAULT_JSON_EDITOR_TRANSLATION as t } from "./JsonEditor.types.js";
+import { JsonEditorContent as n } from "./JsonEditorContent.js";
+import { JsonEditorToolbar as r } from "./JsonEditorToolbar.js";
+import { JsonEditorFooter as i } from "./JsonEditorFooter.js";
+import { normalizeSize as a } from "../shared/normalizeSize.js";
+import { useCallback as o, useRef as s, useState as c } from "react";
+import { Box as l, Divider as u, Paper as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/json-editor/JsonEditor.tsx
+function h(e) {
+	if (!e.trim()) return !1;
+	try {
+		return JSON.parse(e), !0;
+	} catch {
+		return !1;
+	}
+}
+function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b, width: x, disabled: S = !1, readonly: C = !1, error: w = !1, helperText: T, name: E, indent: D = 2, showLineNumbers: O = !0, showLineColumn: k = !0, showMinimap: A = !1, showValidation: j = !1, toolbarConfig: M, translation: N, highlightColors: P, onBlur: F, onFocus: I }) {
+	let L = {
+		...t,
+		...N
+	}, R = {
+		...e,
+		...M
+	}, z = a(b), B = a(x), V = z === "auto", H = V ? void 0 : z ?? 300, U = s(null), [W, G] = c(null), [K, q] = c({
+		line: 1,
+		col: 1
+	}), [J, Y] = c(() => h(g ?? "")), X = o((e) => {
+		U.current = e, G(e);
+	}, []), Z = o((e, t) => {
+		q({
+			line: e,
+			col: t
+		});
+	}, []), Q = o((e) => {
+		let t = h(e);
+		Y(t), v?.(t), _?.(e);
+	}, [_, v]), $ = k || j || !!T;
+	return /* @__PURE__ */ m(l, {
+		sx: {
+			width: B ?? "100%",
+			...V ? {
+				display: "flex",
+				flexDirection: "column",
+				flex: 1
+			} : {}
+		},
+		children: [
+			/* @__PURE__ */ m(d, {
+				variant: "outlined",
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					overflow: "hidden",
+					...V ? { flex: 1 } : { height: H },
+					borderColor: w ? "error.main" : void 0,
+					"&:focus-within": {
+						borderColor: w ? "error.main" : "primary.main",
+						borderWidth: 2
+					}
+				},
+				children: [!C && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(r, {
+					editorView: W,
+					toolbarConfig: R,
+					translation: L,
+					indent: D,
+					disabled: S
+				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(n, {
+					value: g,
+					onChange: Q,
+					placeholder: y,
+					disabled: S,
+					readonly: C,
+					showLineNumbers: O,
+					showMinimap: A,
+					highlightColors: P,
+					onViewReady: X,
+					onCursorChange: Z,
+					onBlur: F,
+					onFocus: I
+				})]
+			}),
+			$ && /* @__PURE__ */ p(i, {
+				helperText: T,
+				error: w,
+				showLineColumn: k,
+				showValidation: j,
+				isValid: J,
+				cursorLine: K.line,
+				cursorCol: K.col,
+				translation: L
+			}),
+			E && /* @__PURE__ */ p("input", {
+				type: "hidden",
+				name: E,
+				value: g ?? ""
+			})
+		]
+	});
+}
+//#endregion
+export { g as JsonEditor };

package/dist/components/json-editor/JsonEditor.types.js

@@ -0,0 +1,21 @@
+//#region src/components/json-editor/JsonEditor.types.ts
+var e = {
+	showFormat: !0,
+	showCompact: !0,
+	showCopy: !0,
+	showClear: !0,
+	showUndoRedo: !0
+}, t = {
+	format: "Format JSON",
+	compact: "Compact JSON",
+	copy: "Copy",
+	copySuccess: "Copied!",
+	clear: "Clear",
+	undo: "Undo",
+	redo: "Redo",
+	lineColumn: "Ln {line}, Col {col}",
+	validJson: "Valid JSON",
+	invalidJson: "Invalid JSON"
+};
+//#endregion
+export { e as DEFAULT_JSON_EDITOR_TOOLBAR_CONFIG, t as DEFAULT_JSON_EDITOR_TRANSLATION };