@thebuoyant-tsdev/mui-ts-library 3.24.1 → 3.25.0

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

@@ -15,31 +15,31 @@ function h(e) {
 		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, schema: O, showLineNumbers: k = !0, showLineColumn: A = !0, showMinimap: j = !1, showFolding: M = !0, showValidation: N = !1, enablePathFinder: P = !0, toolbarConfig: F, translation: I, highlightColors: L, onBlur: R, onFocus: ee, onPathCopy: z }) {
-	let B = {
+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, schema: O, showLineNumbers: k = !0, showLineColumn: A = !0, showMinimap: j = !1, showFolding: M = !0, showValidation: N = !1, enablePathFinder: P = !0, downloadFilename: F = "file.json", toolbarConfig: I, translation: L, highlightColors: R, onBlur: ee, onFocus: z, onPathCopy: B }) {
+	let V = {
 		...t,
-		...I
-	}, V = {
+		...L
+	}, H = {
 		...e,
-		...F
-	}, H = a(b), U = a(x), W = H === "auto", G = W ? void 0 : H ?? 300, K = s(null), [q, J] = c(null), [Y, X] = c({
+		...I
+	}, U = a(b), W = a(x), G = U === "auto", K = G ? void 0 : U ?? 300, q = s(null), [J, Y] = c(null), [X, Z] = c({
 		line: 1,
 		col: 1
-	}), [Z, Q] = c(() => h(g ?? "")), $ = o((e) => {
-		K.current = e, J(e);
-	}, []), te = o((e, t) => {
-		X({
+	}), [Q, $] = c(() => h(g ?? "")), te = o((e) => {
+		q.current = e, Y(e);
+	}, []), ne = o((e, t) => {
+		Z({
 			line: e,
 			col: t
 		});
-	}, []), ne = o((e) => {
+	}, []), re = o((e) => {
 		let t = h(e);
-		Q(t), v?.(t), _?.(e);
-	}, [_, v]), re = A || N || !!T;
+		$(t), v?.(t), _?.(e);
+	}, [_, v]), ie = A || N || !!T;
 	return /* @__PURE__ */ m(l, {
 		sx: {
-			width: U ?? "100%",
-			...W ? {
+			width: W ?? "100%",
+			...G ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
@@ -52,7 +52,7 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...W ? { flex: 1 } : { height: G },
+					...G ? { flex: 1 } : { height: K },
 					borderColor: w ? "error.main" : void 0,
 					"&:focus-within": {
 						borderColor: w ? "error.main" : "primary.main",
@@ -60,14 +60,15 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
 					}
 				},
 				children: [!C && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(r, {
-					editorView: q,
-					toolbarConfig: V,
-					translation: B,
+					editorView: J,
+					toolbarConfig: H,
+					translation: V,
 					indent: D,
+					downloadFilename: F,
 					disabled: S
 				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(n, {
 					value: g,
-					onChange: ne,
+					onChange: re,
 					placeholder: y,
 					disabled: S,
 					readonly: C,
@@ -76,23 +77,23 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
 					showMinimap: j,
 					showFolding: M,
 					enablePathFinder: P,
-					highlightColors: L,
-					onViewReady: $,
-					onCursorChange: te,
-					onBlur: R,
-					onFocus: ee,
-					onPathCopy: z
+					highlightColors: R,
+					onViewReady: te,
+					onCursorChange: ne,
+					onBlur: ee,
+					onFocus: z,
+					onPathCopy: B
 				})]
 			}),
-			re && /* @__PURE__ */ p(i, {
+			ie && /* @__PURE__ */ p(i, {
 				helperText: T,
 				error: w,
 				showLineColumn: A,
 				showValidation: N,
-				isValid: Z,
-				cursorLine: Y.line,
-				cursorCol: Y.col,
-				translation: B
+				isValid: Q,
+				cursorLine: X.line,
+				cursorCol: X.col,
+				translation: V
 			}),
 			E && /* @__PURE__ */ p("input", {
 				type: "hidden",

package/dist/components/json-editor/JsonEditor.types.d.ts

@@ -2,6 +2,7 @@ export type JsonEditorToolbarConfig = {
     showFormat?: boolean;
     showCompact?: boolean;
     showCopy?: boolean;
+    showDownload?: boolean;
     showClear?: boolean;
     showUndoRedo?: boolean;
 };
@@ -11,6 +12,8 @@ export type JsonEditorTranslation = {
     compact: string;
     copy: string;
     copySuccess: string;
+    download: string;
+    downloadSuccess: string;
     clear: string;
     undo: string;
     redo: string;
@@ -72,6 +75,8 @@ export type JsonEditorProps = {
     showFolding?: boolean;
     /** Shows a Valid / Invalid JSON indicator in the footer. */
     showValidation?: boolean;
+    /** Filename for the Download button export. Default: "file.json". */
+    downloadFilename?: string;
     toolbarConfig?: JsonEditorToolbarConfig;
     translation?: Partial<JsonEditorTranslation>;
     value?: string;

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

@@ -3,6 +3,7 @@ var e = {
 	showFormat: !0,
 	showCompact: !0,
 	showCopy: !0,
+	showDownload: !0,
 	showClear: !0,
 	showUndoRedo: !0
 }, t = {
@@ -10,6 +11,8 @@ var e = {
 	compact: "Compact JSON",
 	copy: "Copy",
 	copySuccess: "Copied!",
+	download: "Download",
+	downloadSuccess: "Downloaded!",
 	clear: "Clear",
 	undo: "Undo",
 	redo: "Redo",

package/dist/components/json-editor/JsonEditorToolbar.d.ts

@@ -5,7 +5,8 @@ type JsonEditorToolbarProps = {
     toolbarConfig: Required<JsonEditorToolbarConfig>;
     translation: JsonEditorTranslation;
     indent: number;
+    downloadFilename: string;
     disabled?: boolean;
 };
-export declare function JsonEditorToolbar({ editorView, toolbarConfig: tc, translation: t, indent, disabled, }: JsonEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditorToolbar({ editorView, toolbarConfig: tc, translation: t, indent, downloadFilename, disabled, }: JsonEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,21 +4,22 @@ 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";
 import c from "@mui/icons-material/ContentCopy";
-import l from "@mui/icons-material/Check";
-import u from "@mui/icons-material/Delete";
-import d from "@mui/icons-material/Undo";
-import f from "@mui/icons-material/Redo";
-import p from "@mui/icons-material/AutoFixHigh";
-import m from "@mui/icons-material/Compress";
+import l from "@mui/icons-material/Download";
+import u from "@mui/icons-material/Check";
+import d from "@mui/icons-material/Delete";
+import f from "@mui/icons-material/Undo";
+import p from "@mui/icons-material/Redo";
+import m from "@mui/icons-material/AutoFixHigh";
+import h 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(), S = y || !h;
-	function C() {
-		let e = h;
+function g({ editorView: g, toolbarConfig: _, translation: v, indent: y, downloadFilename: b, disabled: x }) {
+	let [S, C] = t(), [w, T] = t(), E = x || !g;
+	function D() {
+		let e = g;
 		if (!e) return;
 		let t = e.state.doc.toString();
 		try {
-			let n = JSON.stringify(JSON.parse(t), null, v);
+			let n = JSON.stringify(JSON.parse(t), null, y);
 			e.dispatch({ changes: {
 				from: 0,
 				to: e.state.doc.length,
@@ -27,8 +28,8 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
 		} catch {}
 		e.focus();
 	}
-	function w() {
-		let e = h;
+	function O() {
+		let e = g;
 		if (!e) return;
 		let t = e.state.doc.toString();
 		try {
@@ -41,29 +42,33 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
 		} catch {}
 		e.focus();
 	}
-	function T() {
-		let e = h?.state.doc.toString() ?? "";
+	function k() {
+		let e = g?.state.doc.toString() ?? "";
 		navigator.clipboard.writeText(e).then(() => {
-			x();
+			C();
 		});
 	}
-	function E() {
-		let e = h;
+	function A() {
+		let e = g?.state.doc.toString() ?? "", t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
+		r.href = n, r.download = b, r.click(), URL.revokeObjectURL(n), T();
+	}
+	function j() {
+		let e = g;
 		e && (e.dispatch({ changes: {
 			from: 0,
 			to: e.state.doc.length,
 			insert: ""
 		} }), e.focus());
 	}
-	function D() {
-		let e = h;
+	function M() {
+		let e = g;
 		e && (a(e), e.focus());
 	}
-	function O() {
-		let e = h;
+	function N() {
+		let e = g;
 		e && (i(e), e.focus());
 	}
-	let k = g.showFormat || g.showCompact, A = g.showCopy || g.showClear, j = g.showUndoRedo;
+	let P = _.showFormat || _.showCompact, F = _.showCopy || _.showDownload || _.showClear, I = _.showUndoRedo;
 	return /* @__PURE__ */ s(n, {
 		sx: {
 			display: "flex",
@@ -76,73 +81,85 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
 		role: "toolbar",
 		"aria-label": "JSON editor actions",
 		children: [
-			k && /* @__PURE__ */ s(n, {
+			P && /* @__PURE__ */ s(n, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: [g.showFormat && /* @__PURE__ */ o(e, {
-					label: _.format,
-					icon: /* @__PURE__ */ o(p, { fontSize: "small" }),
-					onClick: C,
-					disabled: S
-				}), g.showCompact && /* @__PURE__ */ o(e, {
-					label: _.compact,
+				children: [_.showFormat && /* @__PURE__ */ o(e, {
+					label: v.format,
 					icon: /* @__PURE__ */ o(m, { fontSize: "small" }),
-					onClick: w,
-					disabled: S
+					onClick: D,
+					disabled: E
+				}), _.showCompact && /* @__PURE__ */ o(e, {
+					label: v.compact,
+					icon: /* @__PURE__ */ o(h, { fontSize: "small" }),
+					onClick: O,
+					disabled: E
 				})]
 			}),
-			k && (A || j) && /* @__PURE__ */ o(r, {
+			P && (F || I) && /* @__PURE__ */ o(r, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
 			}),
-			A && /* @__PURE__ */ s(n, {
+			F && /* @__PURE__ */ s(n, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: [g.showCopy && /* @__PURE__ */ o(e, {
-					label: b ? _.copySuccess : _.copy,
-					icon: b ? /* @__PURE__ */ o(l, {
-						fontSize: "small",
-						color: "success"
-					}) : /* @__PURE__ */ o(c, { fontSize: "small" }),
-					onClick: T,
-					disabled: S
-				}), g.showClear && /* @__PURE__ */ o(e, {
-					label: _.clear,
-					icon: /* @__PURE__ */ o(u, { fontSize: "small" }),
-					onClick: E,
-					disabled: S
-				})]
+				children: [
+					_.showCopy && /* @__PURE__ */ o(e, {
+						label: S ? v.copySuccess : v.copy,
+						icon: S ? /* @__PURE__ */ o(u, {
+							fontSize: "small",
+							color: "success"
+						}) : /* @__PURE__ */ o(c, { fontSize: "small" }),
+						onClick: k,
+						disabled: E
+					}),
+					_.showDownload && /* @__PURE__ */ o(e, {
+						label: w ? v.downloadSuccess : v.download,
+						icon: w ? /* @__PURE__ */ o(u, {
+							fontSize: "small",
+							color: "success"
+						}) : /* @__PURE__ */ o(l, { fontSize: "small" }),
+						onClick: A,
+						disabled: E
+					}),
+					_.showClear && /* @__PURE__ */ o(e, {
+						label: v.clear,
+						icon: /* @__PURE__ */ o(d, { fontSize: "small" }),
+						onClick: j,
+						disabled: E
+					})
+				]
 			}),
-			A && j && /* @__PURE__ */ o(r, {
+			F && I && /* @__PURE__ */ o(r, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
 			}),
-			j && /* @__PURE__ */ s(n, {
+			I && /* @__PURE__ */ s(n, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
 				children: [/* @__PURE__ */ o(e, {
-					label: _.undo,
-					icon: /* @__PURE__ */ o(d, { fontSize: "small" }),
-					onClick: D,
-					disabled: S
-				}), /* @__PURE__ */ o(e, {
-					label: _.redo,
+					label: v.undo,
 					icon: /* @__PURE__ */ o(f, { fontSize: "small" }),
-					onClick: O,
-					disabled: S
+					onClick: M,
+					disabled: E
+				}), /* @__PURE__ */ o(e, {
+					label: v.redo,
+					icon: /* @__PURE__ */ o(p, { fontSize: "small" }),
+					onClick: N,
+					disabled: E
 				})]
 			}),
-			!k && !A && !j && /* @__PURE__ */ o(n, { sx: { height: 32 } })
+			!P && !F && !I && /* @__PURE__ */ o(n, { sx: { height: 32 } })
 		]
 	});
 }
 //#endregion
-export { h as JsonEditorToolbar };
+export { g as JsonEditorToolbar };