@thebuoyant-tsdev/mui-ts-library 3.8.0 → 3.11.0

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

@@ -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/password-strength-meter/PasswordStrengthMeter.d.ts

@@ -1,2 +1,2 @@
 import type { PasswordStrengthMeterProps } from "./PasswordStrengthMeter.types";
-export declare function PasswordStrengthMeter({ value, confirmValue, name, inputRef, disabled, error, helperText, autoComplete, customRequirements, generatorOptions, showConfirmField, showPasswordAdornment, showMeter, showPasswordGenerator, showSegmentedBar, showSummary, inputSize, translation, meterColors, passwordMinLength, checkColors, onPasswordChange, onConfirmChange, onPasswordGenerated, }: PasswordStrengthMeterProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordStrengthMeter({ value, confirmValue, name, inputRef, disabled, error, helperText, autoComplete, customRequirements, generatorOptions, showConfirmField, showPasswordAdornment, showMeter, showPasswordGenerator, showSegmentedBar, showSummary, showCopyButton, inputSize, translation, meterColors, passwordMinLength, checkColors, onPasswordChange, onConfirmChange, onPasswordGenerated, }: PasswordStrengthMeterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/password-strength-meter/PasswordStrengthMeter.js

@@ -2,17 +2,19 @@ import { scorePassword as e } from "./util/password-strength.util.js";
 import { PasswordStrengthBar as t } from "./PasswordStrengthBar.js";
 import { DEFAULT_CHECK_COLORS as n, DEFAULT_METER_COLORS as r, DEFAULT_PASSWORD_TRANSLATIONS as i } from "./PasswordStrengthMeter.types.js";
 import { useId as a, useMemo as o, useState as s } from "react";
-import { Box as c, Button as l, FormControl as u, FormHelperText as d, IconButton as f, InputAdornment as p, InputLabel as m, OutlinedInput as h, Stack as g, Tooltip as _, Typography as v } from "@mui/material";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import ee from "@mui/icons-material/AutoFixHigh";
-import x from "@mui/icons-material/CheckCircleOutlined";
-import S from "@mui/icons-material/ErrorOutlined";
-import te from "@mui/icons-material/CheckCircle";
-import ne from "@mui/icons-material/Cancel";
-import C from "@mui/icons-material/Visibility";
-import w from "@mui/icons-material/VisibilityOff";
+import { Box as ee, Button as te, FormControl as c, FormHelperText as l, IconButton as u, InputAdornment as d, InputLabel as f, OutlinedInput as p, Stack as m, Tooltip as h, Typography as g } from "@mui/material";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import ne from "@mui/icons-material/ContentCopy";
+import re from "@mui/icons-material/Check";
+import ie from "@mui/icons-material/AutoFixHigh";
+import y from "@mui/icons-material/CheckCircleOutlined";
+import b from "@mui/icons-material/ErrorOutlined";
+import ae from "@mui/icons-material/CheckCircle";
+import oe from "@mui/icons-material/Cancel";
+import x from "@mui/icons-material/Visibility";
+import S from "@mui/icons-material/VisibilityOff";
 //#region src/components/password-strength-meter/PasswordStrengthMeter.tsx
-function re(e) {
+function se(e) {
 	let t = [];
 	e.upper && t.push("ABCDEFGHIJKLMNOPQRSTUVWXYZ"), e.lower && t.push("abcdefghijklmnopqrstuvwxyz"), e.numbers && t.push("0123456789"), e.symbols && t.push("!@#$%^&*()-_=+[]{}|;:,.<>?"), t.length === 0 && t.push("abcdefghijklmnopqrstuvwxyz");
 	let n = t.join(""), r = new Uint32Array(e.length);
@@ -24,24 +26,24 @@ function re(e) {
 	}
 	return o.join("");
 }
-function T({ label: e, fulfilled: t, checkColors: n }) {
-	return /* @__PURE__ */ b(g, {
+function C({ label: e, fulfilled: t, checkColors: n }) {
+	return /* @__PURE__ */ v(m, {
 		direction: "row",
 		sx: {
 			alignItems: "center",
 			mb: .25
 		},
 		spacing: .5,
-		children: [/* @__PURE__ */ y(v, {
+		children: [/* @__PURE__ */ _(g, {
 			variant: "caption",
 			children: e
-		}), t ? /* @__PURE__ */ y(x, {
+		}), t ? /* @__PURE__ */ _(y, {
 			"data-testid": "psm-req-success",
 			style: {
 				fontSize: 16,
 				color: n.success
 			}
-		}) : /* @__PURE__ */ y(S, {
+		}) : /* @__PURE__ */ _(b, {
 			"data-testid": "psm-req-failure",
 			style: {
 				fontSize: 16,
@@ -50,217 +52,237 @@ function T({ label: e, fulfilled: t, checkColors: n }) {
 		})]
 	});
 }
-function E({ value: x, confirmValue: S, name: E, inputRef: D, disabled: O = !1, error: k = !1, helperText: A, autoComplete: j, customRequirements: ie, generatorOptions: M, showConfirmField: N = !1, showPasswordAdornment: ae = !0, showMeter: oe = !0, showPasswordGenerator: se = !1, showSegmentedBar: ce = !1, showSummary: le = !0, inputSize: P = "medium", translation: ue, meterColors: de, passwordMinLength: F = 8, checkColors: I = n, onPasswordChange: L, onConfirmChange: R, onPasswordGenerated: z }) {
-	let B = {
+function w({ value: y, confirmValue: b, name: w, inputRef: ce, disabled: T = !1, error: le = !1, helperText: E, autoComplete: ue, customRequirements: de, generatorOptions: D, showConfirmField: O = !1, showPasswordAdornment: k = !0, showMeter: fe = !0, showPasswordGenerator: pe = !1, showSegmentedBar: me = !1, showSummary: he = !0, showCopyButton: A = !1, inputSize: j = "medium", translation: ge, meterColors: _e, passwordMinLength: M = 8, checkColors: N = n, onPasswordChange: P, onConfirmChange: ve, onPasswordGenerated: ye }) {
+	let F = {
 		...i,
-		...ue
-	}, V = {
+		...ge
+	}, I = {
 		...r,
-		...de
-	}, H = a(), U = `${H}-password`, [W, G] = s(!1), [K, fe] = s(!1), [pe, q] = s(""), [me, J] = s(""), Y = x === void 0 ? pe : x, X = S === void 0 ? me : S, Z = N && X.length > 0, Q = Z && Y === X, $ = o(() => e(Y, F), [Y, F]);
-	return /* @__PURE__ */ b(g, { children: [
-		/* @__PURE__ */ b(u, {
+		..._e
+	}, L = a(), R = `${L}-password`, [z, B] = s(!1), [V, be] = s(!1), [xe, H] = s(""), [U, W] = s(""), [G, K] = s(!1), q = y === void 0 ? xe : y, J = b === void 0 ? U : b, Y = O && J.length > 0, X = Y && q === J, Z = o(() => e(q, M), [q, M]), Se = () => {
+		B((e) => !e);
+	}, Q = (e) => {
+		e.preventDefault();
+	}, $ = (e) => {
+		e.preventDefault();
+	};
+	return /* @__PURE__ */ v(m, { children: [
+		/* @__PURE__ */ v(c, {
 			variant: "outlined",
 			fullWidth: !0,
-			error: k,
+			error: le,
 			children: [
-				/* @__PURE__ */ y(m, {
-					htmlFor: U,
-					size: P,
-					children: B.label
+				/* @__PURE__ */ _(f, {
+					htmlFor: R,
+					size: j,
+					children: F.label
 				}),
-				/* @__PURE__ */ y(h, {
-					id: U,
-					type: W ? "text" : "password",
+				/* @__PURE__ */ _(p, {
+					id: R,
+					type: z ? "text" : "password",
 					fullWidth: !0,
-					size: P,
-					value: Y,
+					size: j,
+					value: q,
 					onChange: (t) => {
 						let n = t.target.value;
-						x === void 0 && q(n), L && L(n, e(n, F));
+						y === void 0 && H(n), P && P(n, e(n, M));
 					},
-					disabled: O,
-					inputRef: D,
+					disabled: T,
+					inputRef: ce,
 					inputProps: {
 						"data-testid": "psm-input",
-						name: E,
-						autoComplete: j
+						name: w,
+						autoComplete: ue
 					},
-					endAdornment: ae ? /* @__PURE__ */ y(p, {
+					endAdornment: k || A && q.length > 0 ? /* @__PURE__ */ v(d, {
 						position: "end",
-						children: /* @__PURE__ */ y(f, {
+						children: [A && q.length > 0 && /* @__PURE__ */ _(h, {
+							title: G ? F.copiedLabel : F.copyPasswordLabel,
+							arrow: !0,
+							children: /* @__PURE__ */ _("span", { children: /* @__PURE__ */ _(u, {
+								"data-testid": "psm-copy",
+								disabled: T,
+								"aria-label": G ? F.copiedLabel : F.copyPasswordLabel,
+								onClick: () => {
+									navigator.clipboard.writeText(q).then(() => {
+										K(!0), setTimeout(() => K(!1), 2e3);
+									});
+								},
+								onMouseDown: Q,
+								onMouseUp: $,
+								edge: k ? !1 : "end",
+								children: G ? /* @__PURE__ */ _(re, {
+									fontSize: "small",
+									color: "success"
+								}) : /* @__PURE__ */ _(ne, { fontSize: "small" })
+							}) })
+						}), k && /* @__PURE__ */ _(u, {
 							"data-testid": "psm-toggle",
-							disabled: O,
-							"aria-label": W ? B.hidePasswordLabel : B.showPasswordLabel,
-							onClick: () => {
-								G((e) => !e);
-							},
-							onMouseDown: (e) => {
-								e.preventDefault();
-							},
-							onMouseUp: (e) => {
-								e.preventDefault();
-							},
+							disabled: T,
+							"aria-label": z ? F.hidePasswordLabel : F.showPasswordLabel,
+							onClick: Se,
+							onMouseDown: Q,
+							onMouseUp: $,
 							edge: "end",
-							children: y(W ? w : C, {})
-						})
+							children: _(z ? S : x, {})
+						})]
 					}) : null,
-					label: B.label
+					label: F.label
 				}),
-				A && /* @__PURE__ */ y(d, { children: A })
+				E && /* @__PURE__ */ _(l, { children: E })
 			]
 		}),
-		se && /* @__PURE__ */ y(_, {
-			title: B.generatePasswordLabel,
+		pe && /* @__PURE__ */ _(h, {
+			title: F.generatePasswordLabel,
 			arrow: !0,
-			children: /* @__PURE__ */ y("span", { children: /* @__PURE__ */ y(l, {
+			children: /* @__PURE__ */ _("span", { children: /* @__PURE__ */ _(te, {
 				"data-testid": "psm-generate",
 				size: "small",
 				variant: "text",
-				startIcon: /* @__PURE__ */ y(ee, { fontSize: "small" }),
-				disabled: O,
+				startIcon: /* @__PURE__ */ _(ie, { fontSize: "small" }),
+				disabled: T,
 				onClick: () => {
-					let t = re({
-						length: M?.length ?? Math.max(16, F),
-						upper: M?.upper ?? !0,
-						lower: M?.lower ?? !0,
-						numbers: M?.numbers ?? !0,
-						symbols: M?.symbols ?? !0
+					let t = se({
+						length: D?.length ?? Math.max(16, M),
+						upper: D?.upper ?? !0,
+						lower: D?.lower ?? !0,
+						numbers: D?.numbers ?? !0,
+						symbols: D?.symbols ?? !0
 					});
-					x === void 0 && q(t), S === void 0 && J(""), L?.(t, e(t, F)), z?.(t), G(!0);
+					y === void 0 && H(t), b === void 0 && W(""), P?.(t, e(t, M)), ye?.(t), B(!0);
 				},
 				sx: {
 					mt: .5,
 					alignSelf: "flex-start",
 					textTransform: "none"
 				},
-				children: B.generatePasswordLabel
+				children: F.generatePasswordLabel
 			}) })
 		}),
-		N && /* @__PURE__ */ b(u, {
+		O && /* @__PURE__ */ v(c, {
 			variant: "outlined",
 			fullWidth: !0,
-			error: Z && !Q,
+			error: Y && !X,
 			sx: { mt: 1 },
 			children: [
-				/* @__PURE__ */ y(m, {
-					htmlFor: `${H}-confirm`,
-					size: P,
-					children: B.confirmLabel
+				/* @__PURE__ */ _(f, {
+					htmlFor: `${L}-confirm`,
+					size: j,
+					children: F.confirmLabel
 				}),
-				/* @__PURE__ */ y(h, {
-					id: `${H}-confirm`,
-					type: K ? "text" : "password",
+				/* @__PURE__ */ _(p, {
+					id: `${L}-confirm`,
+					type: V ? "text" : "password",
 					fullWidth: !0,
-					size: P,
-					value: X,
+					size: j,
+					value: J,
 					onChange: (e) => {
 						let t = e.target.value;
-						S === void 0 && J(t), R?.(t, t === Y);
+						b === void 0 && W(t), ve?.(t, t === q);
 					},
-					disabled: O,
+					disabled: T,
 					inputProps: { "data-testid": "psm-confirm-input" },
-					endAdornment: /* @__PURE__ */ b(p, {
+					endAdornment: /* @__PURE__ */ v(d, {
 						position: "end",
-						children: [Z && (Q ? /* @__PURE__ */ y(te, {
+						children: [Y && (X ? /* @__PURE__ */ _(ae, {
 							"data-testid": "psm-confirm-match",
 							sx: {
-								color: I.success,
+								color: N.success,
 								mr: .5
 							},
 							fontSize: "small"
-						}) : /* @__PURE__ */ y(ne, {
+						}) : /* @__PURE__ */ _(oe, {
 							"data-testid": "psm-confirm-mismatch",
 							sx: {
-								color: I.failure,
+								color: N.failure,
 								mr: .5
 							},
 							fontSize: "small"
-						})), /* @__PURE__ */ y(f, {
+						})), /* @__PURE__ */ _(u, {
 							size: "small",
-							disabled: O,
-							onClick: () => fe((e) => !e),
+							disabled: T,
+							onClick: () => be((e) => !e),
 							onMouseDown: (e) => e.preventDefault(),
 							edge: "end",
-							"aria-label": K ? B.hidePasswordLabel : B.showPasswordLabel,
-							children: y(K ? w : C, {})
+							"aria-label": V ? F.hidePasswordLabel : F.showPasswordLabel,
+							children: _(V ? S : x, {})
 						})]
 					}),
-					label: B.confirmLabel
+					label: F.confirmLabel
 				}),
-				Z && /* @__PURE__ */ y(d, {
-					sx: { color: Q ? I.success : I.failure },
-					children: Q ? B.confirmMatchLabel : B.confirmMismatchLabel
+				Y && /* @__PURE__ */ _(l, {
+					sx: { color: X ? N.success : N.failure },
+					children: X ? F.confirmMatchLabel : F.confirmMismatchLabel
 				})
 			]
 		}),
-		oe && /* @__PURE__ */ y(t, {
-			percent: $.percent,
+		fe && /* @__PURE__ */ _(t, {
+			percent: Z.percent,
 			color: ((e) => {
 				switch (e.meterStatus) {
-					case "weak": return V.weak;
-					case "ok": return V.ok;
-					case "good": return V.good;
-					case "very good": return V.veryGood;
+					case "weak": return I.weak;
+					case "ok": return I.ok;
+					case "good": return I.good;
+					case "very good": return I.veryGood;
 					default: return "transparent";
 				}
-			})($),
-			ariaLabel: B.meterAriaLabel,
-			segments: ce
+			})(Z),
+			ariaLabel: F.meterAriaLabel,
+			segments: me
 		}),
-		le && /* @__PURE__ */ b(c, {
+		he && /* @__PURE__ */ v(ee, {
 			"data-testid": "psm-summary",
 			sx: {
 				mt: .5,
 				p: .5
 			},
-			children: [/* @__PURE__ */ y(v, {
+			children: [/* @__PURE__ */ _(g, {
 				variant: "caption",
 				gutterBottom: !0,
 				sx: {
 					display: "block",
 					fontSize: 14
 				},
-				children: B.summaryHeaderLabel
-			}), /* @__PURE__ */ b(g, {
+				children: F.summaryHeaderLabel
+			}), /* @__PURE__ */ v(m, {
 				direction: "row",
 				spacing: 6,
-				children: [/* @__PURE__ */ b(g, {
+				children: [/* @__PURE__ */ v(m, {
 					direction: "column",
 					children: [
-						/* @__PURE__ */ y(T, {
-							label: B.summaryMinChars.replace("{n}", String(F)),
-							fulfilled: $.length >= F,
-							checkColors: I
+						/* @__PURE__ */ _(C, {
+							label: F.summaryMinChars.replace("{n}", String(M)),
+							fulfilled: Z.length >= M,
+							checkColors: N
 						}),
-						/* @__PURE__ */ y(T, {
-							label: B.summaryCapitalLetter,
-							fulfilled: $.hasUpper,
-							checkColors: I
+						/* @__PURE__ */ _(C, {
+							label: F.summaryCapitalLetter,
+							fulfilled: Z.hasUpper,
+							checkColors: N
 						}),
-						/* @__PURE__ */ y(T, {
-							label: B.summaryLowerCaseLetter,
-							fulfilled: $.hasLower,
-							checkColors: I
+						/* @__PURE__ */ _(C, {
+							label: F.summaryLowerCaseLetter,
+							fulfilled: Z.hasLower,
+							checkColors: N
 						})
 					]
-				}), /* @__PURE__ */ b(g, {
+				}), /* @__PURE__ */ v(m, {
 					direction: "column",
 					children: [
-						/* @__PURE__ */ y(T, {
-							label: B.summaryNumber,
-							fulfilled: $.hasDigit,
-							checkColors: I
+						/* @__PURE__ */ _(C, {
+							label: F.summaryNumber,
+							fulfilled: Z.hasDigit,
+							checkColors: N
 						}),
-						/* @__PURE__ */ y(T, {
-							label: B.summarySpecialChar,
-							fulfilled: $.hasSymbol,
-							checkColors: I
+						/* @__PURE__ */ _(C, {
+							label: F.summarySpecialChar,
+							fulfilled: Z.hasSymbol,
+							checkColors: N
 						}),
-						ie?.map((e, t) => /* @__PURE__ */ y(T, {
+						de?.map((e, t) => /* @__PURE__ */ _(C, {
 							label: e.label,
-							fulfilled: typeof e.fulfilled == "function" ? e.fulfilled(Y) : e.fulfilled,
-							checkColors: I
+							fulfilled: typeof e.fulfilled == "function" ? e.fulfilled(q) : e.fulfilled,
+							checkColors: N
 						}, t))
 					]
 				})]
@@ -269,4 +291,4 @@ function E({ value: x, confirmValue: S, name: E, inputRef: D, disabled: O = !1,
 	] });
 }
 //#endregion
-export { E as PasswordStrengthMeter };
+export { w as PasswordStrengthMeter };

package/dist/components/password-strength-meter/PasswordStrengthMeter.types.d.ts

@@ -40,6 +40,10 @@ export type PasswordStrengthMeterTranslation = {
     confirmMatchLabel: string;
     /** Shown when passwords do not match */
     confirmMismatchLabel: string;
+    /** Tooltip for the copy-to-clipboard button @since 3.9.0 */
+    copyPasswordLabel?: string;
+    /** Tooltip shown briefly after a successful copy @since 3.9.0 */
+    copiedLabel?: string;
 };
 /**
  * Options for the built-in password generator.
@@ -57,7 +61,7 @@ export type PasswordGeneratorOptions = {
     /** Include symbols !@#$%^&*... (default: true) */
     symbols?: boolean;
 };
-export declare const DEFAULT_PASSWORD_TRANSLATIONS: PasswordStrengthMeterTranslation;
+export declare const DEFAULT_PASSWORD_TRANSLATIONS: Required<PasswordStrengthMeterTranslation>;
 export declare const DEFAULT_METER_COLORS: MeterColors;
 export declare const DEFAULT_CHECK_COLORS: CheckColors;
 /**
@@ -94,6 +98,8 @@ export type PasswordStrengthMeterProps = {
     showSummary?: boolean;
     /** Render the strength bar as 4 animated segments instead of a single growing bar. */
     showSegmentedBar?: boolean;
+    /** Show a copy-to-clipboard button next to the password field (visible once a password is entered). */
+    showCopyButton?: boolean;
     translation?: Partial<PasswordStrengthMeterTranslation>;
     value?: string;
     onPasswordChange?: (password: string, strengthResult: StrengthResult) => void;

package/dist/components/password-strength-meter/PasswordStrengthMeter.types.js

@@ -13,7 +13,9 @@ var e = {
 	generatePasswordLabel: "Generate secure password",
 	confirmLabel: "Confirm password",
 	confirmMatchLabel: "Passwords match",
-	confirmMismatchLabel: "Passwords do not match"
+	confirmMismatchLabel: "Passwords do not match",
+	copyPasswordLabel: "Copy password",
+	copiedLabel: "Copied!"
 }, t = {
 	weak: "#cc0000",
 	ok: "#fdc010",

package/dist/components/radial-tree-chart/RadialTreeChart.d.ts

@@ -1,5 +1,5 @@
 import { type RadialTreeChartProps } from "./RadialTreeChart.types";
-export declare function RadialTreeChart({ data, size, autoFit, sortBy, showLabels, showIcons, chartColors, rootNodeRadius, branchNodeRadius, leafNodeRadius, linkColor, linkStrokeOpacity, linkStrokeWidth, labelFontSize, labelColor, separationSibling, separationCousin, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: RadialTreeChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadialTreeChart({ data, size, autoFit, sortBy, showLabels, showIcons, chartColors, rootNodeRadius, branchNodeRadius, leafNodeRadius, linkColor, linkStrokeOpacity, linkStrokeWidth, labelFontSize, labelColor, separationSibling, separationCousin, zoomable, drillable, onFocusChange, duration, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: RadialTreeChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadialTreeChart {
     var displayName: string;
 }