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

package/dist/components/sunburst-chart/SunburstChart.js

@@ -0,0 +1,292 @@
+import { useCallback as e, useLayoutEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { Box as a, Tooltip as o, Typography as s, useTheme as c } from "@mui/material";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "d3";
+//#region src/components/sunburst-chart/SunburstChart.tsx
+var f = 2 * Math.PI, p = 11, m = p * .5, h = 5;
+function g(e, t = 0, n = ".", r = ",") {
+	if (e == null || !isFinite(e)) return "0";
+	let [i, a] = e.toFixed(Math.max(0, t)).split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, r);
+	return a ? `${o}${n}${a}` : o;
+}
+function ee(e, t) {
+	let n = Math.floor(t / m);
+	return n <= 0 ? "" : e.length <= n ? e : n < h ? "" : e.slice(0, n - 1) + "…";
+}
+function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
+	let i = (e.value ?? 0) > 0, o = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
+	return /* @__PURE__ */ u(a, {
+		sx: { py: .25 },
+		children: [
+			/* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					fontWeight: "bold",
+					display: "block"
+				},
+				children: e.data.name
+			}),
+			i && /* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .85
+				},
+				children: g(e.value ?? 0, t, n, r)
+			}),
+			e.depth > 0 && /* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .65,
+					mt: .25
+				},
+				children: o
+			})
+		]
+	});
+}
+function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g = 0, sortBy: _ = "value", chartColors: v, showRootLabel: y = !0, onSegmentClick: b, onZoomChange: x, valueDecimalCount: ne = 0, valueDecimalSeparator: re = ".", valueThousandsSeparator: S = ",", zoomable: C = !1, disabled: w = !1 }) {
+	let T = c(), E = r(null), [D, O] = i(`-${m / 2} -${m / 2} ${m} ${m}`), [k, A] = i(1), ie = n(() => {
+		if (k === 1) return D;
+		let [e, t, n, r] = D.split(" ").map(Number), i = n / k, a = r / k;
+		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
+	}, [D, k]), j = m / 2, M = Math.max(0, Math.min(g, Math.max(0, j - 1))), N = Math.max(1, j - M), ae = [
+		T.palette.primary.main,
+		T.palette.secondary.main,
+		T.palette.error.main,
+		T.palette.warning.main,
+		T.palette.success.main,
+		T.palette.info.main
+	], P = v && v.length > 0 ? v : ae, { root: F, ringThickness: I } = n(() => {
+		let e = d.hierarchy(s).sum((e) => e.value ?? 0);
+		_ === "value" ? e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0)) : e.sort((e, t) => String(e.data.name).localeCompare(String(t.data.name), void 0, {
+			numeric: !0,
+			sensitivity: "base"
+		}));
+		let t = d.partition().size([f, N])(e), n = d.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? N / n : N;
+		return n > 0 && t.descendants().forEach((e) => {
+			e.depth === 0 ? (e.y0 = 0, e.y1 = 0) : (e.y0 = (e.depth - 1) * r, e.y1 = e.depth * r);
+		}), {
+			root: t,
+			ringThickness: r
+		};
+	}, [
+		s,
+		N,
+		_
+	]), [L, R] = i(F), [z, oe] = i(F);
+	z !== F && (oe(F), R(F));
+	let B = n(() => F.children?.map((e) => e.data.name) ?? [F.data.name], [F]), se = n(() => d.scaleOrdinal().domain(B).range(P), [P, B]), V = (e) => {
+		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
+		let t = e;
+		for (; t.depth > 1;) t = t.parent;
+		return se(t.data.name);
+	}, H = n(() => d.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(j / 2).innerRadius((e) => M + e.y0).outerRadius((e) => M + e.y1 - 1), [j, M]), U = e((e) => {
+		let t = f / (L.x1 - L.x0), n = Math.max(0, Math.min(f, (e.x0 - L.x0) * t)), r = Math.max(0, Math.min(f, (e.x1 - L.x0) * t)), i = L.depth === 0 ? 0 : (L.depth - 1) * I;
+		return {
+			x0: n,
+			x1: r,
+			y0: Math.max(0, e.y0 - i),
+			y1: Math.max(0, e.y1 - i)
+		};
+	}, [L, I]), W = (e) => e.x1 > e.x0 && e.y1 > e.y0, G = (e) => (M + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, ce = (e) => {
+		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = M + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
+		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
+	}, le = e((e) => e.ancestors().includes(L), [L]), K = e((e) => {
+		let t = e.ancestors().reverse(), n = e.value ?? 0, r = F.value ?? 0;
+		return {
+			id: e.data.id,
+			name: e.data.name,
+			value: n || null,
+			percentage: r > 0 ? Math.round(n / r * 1e4) / 100 : 0,
+			depth: e.depth,
+			path: t.map((e) => e.data.name),
+			pathIds: t.map((e) => e.data.id),
+			childrenCount: e.children?.length ?? 0,
+			data: e.data
+		};
+	}, [F]), q = e((e) => {
+		R(e), x && x({
+			focusNode: K(e),
+			isRoot: e === F
+		});
+	}, [
+		F,
+		K,
+		x
+	]);
+	t(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = requestAnimationFrame(() => {
+			try {
+				let t = e.getBBox();
+				O(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+			} catch {
+				O(`-${m / 2} -${m / 2} ${m} ${m}`);
+			}
+		});
+		return () => cancelAnimationFrame(t);
+	}, [
+		m,
+		F,
+		L,
+		M,
+		I,
+		y
+	]);
+	let J = r(null), ue = (e) => {
+		J.current &&= (clearTimeout(J.current), null), J.current = setTimeout(() => {
+			e(), J.current = null;
+		}, 250);
+	}, Y = () => {
+		J.current &&= (clearTimeout(J.current), null);
+	};
+	t(() => {
+		if (w) return;
+		let e = (e) => {
+			e.key === "Escape" && (Y(), q(F), A(1));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		w,
+		F,
+		q
+	]);
+	let de = e((e) => {
+		if (!C || w || !e.ctrlKey) return;
+		e.preventDefault();
+		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+		A((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [C, w]), X = F.descendants().filter((e) => e.depth > 0), fe = (e) => {
+		if (w) return;
+		let t = X[Number(e.currentTarget.getAttribute("data-idx"))];
+		if (t) {
+			if (e.ctrlKey || e.metaKey) {
+				t.children && ue(() => q(t));
+				return;
+			}
+			b?.(K(t), e);
+		}
+	}, pe = (e) => {
+		w || (e.ctrlKey || e.metaKey) && (Y(), q(L.parent ?? F));
+	}, Z = (e) => {
+		if (!w) {
+			if (e.ctrlKey || e.metaKey) {
+				Y(), q(L.parent ?? F);
+				return;
+			}
+			b?.(K(L.parent ?? F), e);
+		}
+	}, Q = {
+		followCursor: !0,
+		enterDelay: 50,
+		enterNextDelay: 0,
+		disableHoverListener: w,
+		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
+	}, $ = T.palette.text.primary, me = T.typography.fontFamily;
+	return /* @__PURE__ */ l(a, {
+		sx: {
+			display: "inline-flex",
+			opacity: w ? .5 : 1,
+			cursor: w ? "not-allowed" : "default",
+			userSelect: "none"
+		},
+		children: /* @__PURE__ */ l("svg", {
+			width: m,
+			height: m,
+			viewBox: ie,
+			onWheel: de,
+			style: {
+				fontFamily: me ?? "sans-serif",
+				overflow: C && k > 1 ? "hidden" : "visible"
+			},
+			role: "img",
+			"aria-label": s.name,
+			children: /* @__PURE__ */ u("g", {
+				ref: E,
+				children: [
+					M > 0 && /* @__PURE__ */ l(o, {
+						...Q,
+						title: L.data.name,
+						placement: "top",
+						children: /* @__PURE__ */ l("circle", {
+							cx: 0,
+							cy: 0,
+							r: M,
+							fill: "transparent",
+							pointerEvents: w ? "none" : "auto",
+							onClick: Z,
+							style: { cursor: w ? "not-allowed" : "pointer" }
+						})
+					}),
+					/* @__PURE__ */ l("g", { children: X.map((e, t) => {
+						let n = U(e), r = W(n), i = !!e.children;
+						return /* @__PURE__ */ l(o, {
+							...Q,
+							placement: "top",
+							title: r ? /* @__PURE__ */ l(te, {
+								node: e,
+								valueDecimalCount: ne,
+								valueDecimalSep: re,
+								valueThousandsSep: S
+							}) : "",
+							children: /* @__PURE__ */ l("path", {
+								"data-idx": t,
+								d: H(n) || "",
+								fill: V(e),
+								fillOpacity: r ? i ? .75 : .5 : 0,
+								style: {
+									pointerEvents: r && !w ? "auto" : "none",
+									cursor: i && !w ? "pointer" : "default",
+									transition: "fill-opacity 0.15s"
+								},
+								onClick: fe,
+								onDoubleClick: pe
+							})
+						}, `tt-${e.data.id}-${t}`);
+					}) }),
+					h && /* @__PURE__ */ l("g", {
+						pointerEvents: "none",
+						textAnchor: "middle",
+						fill: $,
+						children: X.map((e, t) => {
+							if (!le(e)) return null;
+							let n = U(e);
+							if (!G(n)) return null;
+							let r = (M + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = ee(e.data.name, r);
+							return i ? /* @__PURE__ */ l("text", {
+								transform: ce(n),
+								dy: "0.35em",
+								fontSize: p,
+								children: i
+							}, `lbl-${e.data.id}-${t}`) : null;
+						})
+					}),
+					y && /* @__PURE__ */ l(o, {
+						...Q,
+						placement: "top",
+						title: "",
+						children: /* @__PURE__ */ l("g", {
+							textAnchor: "middle",
+							fill: $,
+							pointerEvents: w ? "none" : "auto",
+							onClick: Z,
+							style: { cursor: L !== F && !w ? "pointer" : "default" },
+							children: /* @__PURE__ */ l("text", {
+								fontSize: 13,
+								dy: "0.35em",
+								fontWeight: "bold",
+								children: L.data.name
+							})
+						})
+					})
+				]
+			})
+		})
+	});
+}
+_.displayName = "SunburstChart";
+//#endregion
+export { _ as SunburstChart };

package/dist/components/sunburst-chart/SunburstChart.types.js

@@ -0,0 +1,4 @@
+//#region src/components/sunburst-chart/SunburstChart.types.ts
+var e = { noData: "No data" };
+//#endregion
+export { e as DEFAULT_SUNBURST_CHART_TRANSLATION };

package/dist/components/tag-selection/TagSelection.js

@@ -0,0 +1,102 @@
+import { createTagSelectionStore as e } from "./TagSelection.store.js";
+import { TagSelectionAutocomplete as t } from "./TagSelectionAutocomplete.js";
+import { TagSelectionSelectedTags as n } from "./TagSelectionSelectedTags.js";
+import { DEFAULT_TAG_SELECTION_TRANSLATION as r } from "./TagSelection.types.js";
+import { createContext as i, useContext as a, useEffect as o, useMemo as s, useState as c } from "react";
+import { Box as l, Stack as u } from "@mui/material";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useStore as p } from "zustand";
+//#region src/components/tag-selection/TagSelection.tsx
+var m = i(null);
+function h(e) {
+	let t = a(m);
+	if (!t) throw Error("TagSelectionStoreContext is missing.");
+	return p(t, e);
+}
+function g({ tags: e, showSelectedTags: r = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, inputSize: c = "medium", chipSize: p = "small", disabled: m = !1, loading: g = !1, maxTags: _, allowCreate: v = !1, maxVisibleChips: y, popoverPlacement: b = "bottom", listboxMaxHeight: x, translation: S, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
+	let O = h((e) => e.tags), k = h((e) => e.searchValue), A = h((e) => e.setTags), j = h((e) => e.setSearchValue), M = h((e) => e.selectTag), N = h((e) => e.deleteTag), P = h((e) => e.addTag);
+	o(() => {
+		A(e);
+	}, [e, A]);
+	let F = s(() => O.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [O]), I = s(() => O.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [O]), L = _ !== void 0 && F.length >= _, R = (e) => {
+		T && T(e.filter((e) => e.selected), e);
+	};
+	return /* @__PURE__ */ d(l, {
+		sx: { width: "100%" },
+		children: /* @__PURE__ */ f(u, { children: [r && /* @__PURE__ */ d(n, {
+			selectedTags: F,
+			translation: S,
+			onTagDelete: (e) => {
+				N(e.id);
+				let t = O.map((t) => t.id === e.id ? {
+					...t,
+					selected: !1
+				} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
+				r && w && w(r, n, t), R(t);
+			},
+			showSelectedTagsLabel: i,
+			chipSize: p,
+			disabled: m,
+			maxVisibleChips: y,
+			popoverPlacement: b
+		}), a && /* @__PURE__ */ d(t, {
+			availableTags: I,
+			searchValue: k,
+			translation: S,
+			onSearchChange: (e) => {
+				j(e), E && E(e);
+			},
+			onTagSelect: (e) => {
+				if (e.disabled || e.selected) return;
+				M(e.id);
+				let t = O.map((t) => t.id === e.id ? {
+					...t,
+					selected: !0
+				} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
+				r && C && C(r, n, t), R(t);
+			},
+			onTagCreate: (e) => {
+				P(e), R([...O, e]), D && D(e);
+			},
+			inputSize: c,
+			chipSize: p,
+			disabled: m,
+			loading: g,
+			isMaxReached: L,
+			allowCreate: v,
+			listboxMaxHeight: x
+		})] })
+	});
+}
+function _({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, translation: o, inputSize: s = "medium", chipSize: l = "small", disabled: u = !1, loading: f = !1, maxTags: p, allowCreate: h = !1, maxVisibleChips: _, popoverPlacement: v = "bottom", listboxMaxHeight: y, onTagSelect: b, onTagDelete: x, onTagsChange: S, onSearchChange: C, onTagCreate: w }) {
+	let T = {
+		...r,
+		...o
+	}, [E] = c(() => e(t));
+	return /* @__PURE__ */ d(m.Provider, {
+		value: E,
+		children: /* @__PURE__ */ d(g, {
+			tags: t,
+			showSelectedTags: n,
+			showSelectedTagsLabel: i,
+			showAutoComplete: a,
+			translation: T,
+			inputSize: s,
+			chipSize: l,
+			disabled: u,
+			loading: f,
+			maxTags: p,
+			allowCreate: h,
+			maxVisibleChips: _,
+			popoverPlacement: v,
+			listboxMaxHeight: y,
+			onTagSelect: b,
+			onTagDelete: x,
+			onTagsChange: S,
+			onSearchChange: C,
+			onTagCreate: w
+		})
+	});
+}
+//#endregion
+export { _ as TagSelection };

package/dist/components/tag-selection/TagSelection.store.js

@@ -0,0 +1,40 @@
+import { createStore as e } from "zustand/vanilla";
+//#region src/components/tag-selection/TagSelection.store.ts
+function t(t) {
+	return e((e) => ({
+		tags: t,
+		searchValue: "",
+		setTags: (t) => {
+			e({ tags: t });
+		},
+		setSearchValue: (t) => {
+			e({ searchValue: t });
+		},
+		selectTag: (t) => {
+			e((e) => ({
+				tags: e.tags.map((e) => e.id === t && !e.disabled ? {
+					...e,
+					selected: !0
+				} : e),
+				searchValue: ""
+			}));
+		},
+		deleteTag: (t) => {
+			e((e) => ({ tags: e.tags.map((e) => e.id === t ? {
+				...e,
+				selected: !1
+			} : e) }));
+		},
+		addTag: (t) => {
+			e((e) => ({
+				tags: [...e.tags, {
+					...t,
+					selected: !0
+				}],
+				searchValue: ""
+			}));
+		}
+	}));
+}
+//#endregion
+export { t as createTagSelectionStore };

package/dist/components/tag-selection/TagSelection.types.d.ts

@@ -20,6 +20,8 @@ export type TagSelectionTranslation = {
     backgroundColorLabel: string;
     textColorLabel: string;
     autoTextColorLabel: string;
+    confirmCreateLabel: string;
+    cancelCreateLabel: string;
 };
 export declare const DEFAULT_TAG_SELECTION_TRANSLATION: TagSelectionTranslation;
 export type TagSelectionProps = {

package/dist/components/tag-selection/TagSelection.types.js

@@ -0,0 +1,18 @@
+//#region src/components/tag-selection/TagSelection.types.ts
+var e = {
+	selectedTagsLabel: "Selected tags",
+	autoCompleteLabel: "Search and add tags",
+	noSelectedTagsText: "No tags selected.",
+	noAvailableTagsText: "No tags available.",
+	placeholder: "Type to search...",
+	loadingText: "Loading...",
+	maxTagsReachedText: "Maximum number of tags reached.",
+	colorPickerLabel: "Custom color",
+	backgroundColorLabel: "Background color",
+	textColorLabel: "Text color",
+	autoTextColorLabel: "Auto",
+	confirmCreateLabel: "Confirm new tag",
+	cancelCreateLabel: "Cancel new tag"
+};
+//#endregion
+export { e as DEFAULT_TAG_SELECTION_TRANSLATION };