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

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

@@ -1,24 +1,25 @@
-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";
+import { DEFAULT_SUNBURST_CHART_TRANSLATION as e } from "./SunburstChart.types.js";
+import { useCallback as t, useEffect as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { Box as s, Tooltip as c, Typography as l, useTheme as ee } from "@mui/material";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import * as f 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 = ",") {
+var p = 2 * Math.PI, m = 11, h = m * .5, g = 5;
+function _(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(e, t) {
+	let n = Math.floor(t / h);
+	return n <= 0 ? "" : e.length <= n ? e : n < g ? "" : 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, {
+function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
+	let i = (e.value ?? 0) > 0, a = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
+	return /* @__PURE__ */ d(s, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -26,45 +27,48 @@ function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 				},
 				children: e.data.name
 			}),
-			i && /* @__PURE__ */ l(s, {
+			i && /* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: g(e.value ?? 0, t, n, r)
+				children: _(e.value ?? 0, t, n, r)
 			}),
-			e.depth > 0 && /* @__PURE__ */ l(s, {
+			e.depth > 0 && /* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .65,
 					mt: .25
 				},
-				children: o
+				children: a
 			})
 		]
 	});
 }
-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;
+function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onZoomChange: S, valueDecimalCount: re = 0, valueDecimalSeparator: ie = ".", valueThousandsSeparator: ae = ",", zoomable: C = !1, duration: w = 750, disabled: T = !1, translation: oe }) {
+	let E = ee(), se = {
+		...e,
+		...oe
+	}, D = !l.children?.length && !l.value, O = a(null), [k, A] = o(`-${h / 2} -${h / 2} ${h} ${h}`), [j, M] = o(1), ce = i(() => {
+		if (j === 1) return k;
+		let [e, t, n, r] = k.split(" ").map(Number), i = n / j, a = r / j;
 		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, {
+	}, [k, j]), N = h / 2, P = Math.max(0, Math.min(_, Math.max(0, N - 1))), F = Math.max(1, N - P), le = [
+		E.palette.primary.main,
+		E.palette.secondary.main,
+		E.palette.error.main,
+		E.palette.warning.main,
+		E.palette.success.main,
+		E.palette.info.main
+	], I = y && y.length > 0 ? y : le, { root: L, ringThickness: R } = i(() => {
+		let e = f.hierarchy(l).sum((e) => e.value ?? 0);
+		v === "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;
+		let t = f.partition().size([p, F])(e), n = f.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? F / n : F;
 		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);
 		}), {
@@ -72,29 +76,61 @@ function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g =
 			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) => {
+		l,
+		F,
+		v
+	]), [z, B] = o(L), [ue, de] = o(L), V = (e) => ({
+		x0: e.x0,
+		x1: e.x1,
+		yShift: e.depth === 0 ? 0 : (e.depth - 1) * R
+	}), [H, U] = o(() => V(L)), W = a(H);
+	if (ue !== L) {
+		de(L), B(L);
+		let e = V(L);
+		W.current = e, U(e);
+	}
+	let G = i(() => L.children?.map((e) => e.data.name) ?? [L.data.name], [L]), fe = i(() => f.scaleOrdinal().domain(G).range(I), [I, G]), pe = (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 fe(t.data.name);
+	}, me = i(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(N / 2).innerRadius((e) => P + e.y0).outerRadius((e) => P + e.y1 - 1), [N, P]), K = t((e) => {
+		let t = p / (H.x1 - H.x0);
 		return {
-			x0: n,
-			x1: r,
-			y0: Math.max(0, e.y0 - i),
-			y1: Math.max(0, e.y1 - i)
+			x0: Math.max(0, Math.min(p, (e.x0 - H.x0) * t)),
+			x1: Math.max(0, Math.min(p, (e.x1 - H.x0) * t)),
+			y0: Math.max(0, e.y0 - H.yShift),
+			y1: Math.max(0, e.y1 - H.yShift)
+		};
+	}, [H]);
+	n(() => {
+		let e = V(z), t = W.current;
+		if (t.x0 === e.x0 && t.x1 === e.x1 && t.yShift === e.yShift) return;
+		if (w <= 0) {
+			W.current = e, U(e);
+			return;
+		}
+		let n = null, r = f.interpolateNumber(t.x0, e.x0), i = f.interpolateNumber(t.x1, e.x1), a = f.interpolateNumber(t.yShift, e.yShift), o = performance.now(), s = (e) => {
+			let t = Math.min(1, (e - o) / w), c = f.easeCubic(t), l = {
+				x0: r(c),
+				x1: i(c),
+				yShift: a(c)
+			};
+			W.current = l, U(l), n = t < 1 ? requestAnimationFrame(s) : null;
+		};
+		return n = requestAnimationFrame(s), () => {
+			n != null && cancelAnimationFrame(n);
 		};
-	}, [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;
+	}, [
+		z,
+		R,
+		w
+	]);
+	let he = (e) => e.x1 > e.x0 && e.y1 > e.y0, ge = (e) => (P + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, _e = (e) => {
+		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = P + (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;
+	}, ve = t((e) => e.ancestors().includes(z), [z]), q = t((e) => {
+		let t = e.ancestors().reverse(), n = e.value ?? 0, r = L.value ?? 0;
 		return {
 			id: e.data.id,
 			name: e.data.name,
@@ -106,179 +142,186 @@ function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g =
 			childrenCount: e.children?.length ?? 0,
 			data: e.data
 		};
-	}, [F]), q = e((e) => {
-		R(e), x && x({
-			focusNode: K(e),
-			isRoot: e === F
+	}, [L]), J = t((e) => {
+		B(e), S && S({
+			focusNode: q(e),
+			isRoot: e === L
 		});
 	}, [
-		F,
-		K,
-		x
+		L,
+		q,
+		S
 	]);
-	t(() => {
-		let e = E.current;
+	r(() => {
+		let e = O.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}`);
+				A(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
 			} catch {
-				O(`-${m / 2} -${m / 2} ${m} ${m}`);
+				A(`-${h / 2} -${h / 2} ${h} ${h}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		m,
-		F,
+		h,
 		L,
-		M,
-		I,
-		y
+		z,
+		P,
+		R,
+		b
 	]);
-	let J = r(null), ue = (e) => {
-		J.current &&= (clearTimeout(J.current), null), J.current = setTimeout(() => {
-			e(), J.current = null;
+	let Y = a(null), ye = (e) => {
+		Y.current &&= (clearTimeout(Y.current), null), Y.current = setTimeout(() => {
+			e(), Y.current = null;
 		}, 250);
-	}, Y = () => {
-		J.current &&= (clearTimeout(J.current), null);
+	}, X = () => {
+		Y.current &&= (clearTimeout(Y.current), null);
 	};
-	t(() => {
-		if (w) return;
+	r(() => {
+		if (T) return;
 		let e = (e) => {
-			e.key === "Escape" && (Y(), q(F), A(1));
+			e.key === "Escape" && (X(), J(L), M(1));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		w,
-		F,
-		q
+		T,
+		L,
+		J
 	]);
-	let de = e((e) => {
-		if (!C || w || !e.ctrlKey) return;
+	let be = t((e) => {
+		if (!C || T || !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"))];
+		M((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [C, T]), Z = L.descendants().filter((e) => e.depth > 0), xe = (e) => {
+		if (T) return;
+		let t = Z[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (t) {
 			if (e.ctrlKey || e.metaKey) {
-				t.children && ue(() => q(t));
+				t.children && ye(() => J(t));
 				return;
 			}
-			b?.(K(t), e);
+			x?.(q(t), e);
 		}
-	}, pe = (e) => {
-		w || (e.ctrlKey || e.metaKey) && (Y(), q(L.parent ?? F));
-	}, Z = (e) => {
-		if (!w) {
+	}, Se = (e) => {
+		T || (e.ctrlKey || e.metaKey) && (X(), J(z.parent ?? L));
+	}, Q = (e) => {
+		if (!T) {
 			if (e.ctrlKey || e.metaKey) {
-				Y(), q(L.parent ?? F);
+				X(), J(z.parent ?? L);
 				return;
 			}
-			b?.(K(L.parent ?? F), e);
+			x?.(q(z.parent ?? L), e);
 		}
-	}, Q = {
+	}, $ = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: w,
+		disableHoverListener: T,
 		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
-	}, $ = T.palette.text.primary, me = T.typography.fontFamily;
-	return /* @__PURE__ */ l(a, {
+	}, Ce = E.palette.text.primary, we = E.typography.fontFamily;
+	return /* @__PURE__ */ u(s, {
 		sx: {
 			display: "inline-flex",
-			opacity: w ? .5 : 1,
-			cursor: w ? "not-allowed" : "default",
+			opacity: T ? .5 : 1,
+			cursor: T ? "not-allowed" : "default",
 			userSelect: "none"
 		},
-		children: /* @__PURE__ */ l("svg", {
-			width: m,
-			height: m,
-			viewBox: ie,
-			onWheel: de,
+		children: /* @__PURE__ */ u("svg", {
+			width: h,
+			height: h,
+			viewBox: ce,
+			onWheel: be,
 			style: {
-				fontFamily: me ?? "sans-serif",
-				overflow: C && k > 1 ? "hidden" : "visible"
+				fontFamily: we ?? "sans-serif",
+				overflow: C && j > 1 ? "hidden" : "visible"
 			},
 			role: "img",
-			"aria-label": s.name,
-			children: /* @__PURE__ */ u("g", {
-				ref: E,
+			"aria-label": l.name,
+			children: /* @__PURE__ */ d("g", {
+				ref: O,
 				children: [
-					M > 0 && /* @__PURE__ */ l(o, {
-						...Q,
-						title: L.data.name,
+					D && /* @__PURE__ */ u("text", {
+						textAnchor: "middle",
+						dy: "0.35em",
+						fontSize: 13,
+						fill: E.palette.text.secondary,
+						children: se.noData
+					}),
+					P > 0 && /* @__PURE__ */ u(c, {
+						...$,
+						title: z.data.name,
 						placement: "top",
-						children: /* @__PURE__ */ l("circle", {
+						children: /* @__PURE__ */ u("circle", {
 							cx: 0,
 							cy: 0,
-							r: M,
+							r: P,
 							fill: "transparent",
-							pointerEvents: w ? "none" : "auto",
-							onClick: Z,
-							style: { cursor: w ? "not-allowed" : "pointer" }
+							pointerEvents: T ? "none" : "auto",
+							onClick: Q,
+							style: { cursor: T ? "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,
+					/* @__PURE__ */ u("g", { children: Z.map((e, t) => {
+						let n = K(e), r = he(n), i = !!e.children;
+						return /* @__PURE__ */ u(c, {
+							...$,
 							placement: "top",
-							title: r ? /* @__PURE__ */ l(te, {
+							title: r ? /* @__PURE__ */ u(ne, {
 								node: e,
-								valueDecimalCount: ne,
-								valueDecimalSep: re,
-								valueThousandsSep: S
+								valueDecimalCount: re,
+								valueDecimalSep: ie,
+								valueThousandsSep: ae
 							}) : "",
-							children: /* @__PURE__ */ l("path", {
+							children: /* @__PURE__ */ u("path", {
 								"data-idx": t,
-								d: H(n) || "",
-								fill: V(e),
+								d: me(n) || "",
+								fill: pe(e),
 								fillOpacity: r ? i ? .75 : .5 : 0,
 								style: {
-									pointerEvents: r && !w ? "auto" : "none",
-									cursor: i && !w ? "pointer" : "default",
+									pointerEvents: r && !T ? "auto" : "none",
+									cursor: i && !T ? "pointer" : "default",
 									transition: "fill-opacity 0.15s"
 								},
-								onClick: fe,
-								onDoubleClick: pe
+								onClick: xe,
+								onDoubleClick: Se
 							})
 						}, `tt-${e.data.id}-${t}`);
 					}) }),
-					h && /* @__PURE__ */ l("g", {
+					g && /* @__PURE__ */ u("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),
+						fill: Ce,
+						children: Z.map((e, t) => {
+							if (!ve(e)) return null;
+							let n = K(e);
+							if (!ge(n)) return null;
+							let r = (P + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = te(e.data.name, r);
+							return i ? /* @__PURE__ */ u("text", {
+								transform: _e(n),
 								dy: "0.35em",
-								fontSize: p,
+								fontSize: m,
 								children: i
 							}, `lbl-${e.data.id}-${t}`) : null;
 						})
 					}),
-					y && /* @__PURE__ */ l(o, {
-						...Q,
+					b && !D && /* @__PURE__ */ u(c, {
+						...$,
 						placement: "top",
 						title: "",
-						children: /* @__PURE__ */ l("g", {
+						children: /* @__PURE__ */ u("g", {
 							textAnchor: "middle",
-							fill: $,
-							pointerEvents: w ? "none" : "auto",
-							onClick: Z,
-							style: { cursor: L !== F && !w ? "pointer" : "default" },
-							children: /* @__PURE__ */ l("text", {
+							fill: Ce,
+							pointerEvents: T ? "none" : "auto",
+							onClick: Q,
+							style: { cursor: z !== L && !T ? "pointer" : "default" },
+							children: /* @__PURE__ */ u("text", {
 								fontSize: 13,
 								dy: "0.35em",
 								fontWeight: "bold",
-								children: L.data.name
+								children: z.data.name
 							})
 						})
 					})
@@ -287,6 +330,6 @@ function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g =
 		})
 	});
 }
-_.displayName = "SunburstChart";
+v.displayName = "SunburstChart";
 //#endregion
-export { _ as SunburstChart };
+export { v as SunburstChart };

package/dist/components/sunburst-chart/SunburstChart.types.d.ts

@@ -66,6 +66,8 @@ export type SunburstChartProps = {
     valueThousandsSeparator?: string;
     /** Enable Ctrl+Scroll zoom — content outside `size` is clipped (default: false) */
     zoomable?: boolean;
+    /** Drill-down/out transition duration in ms — set to 0 to disable animation (default: 750) */
+    duration?: number;
     /** Disables all interactions (default: false) */
     disabled?: boolean;
     /** Override any translation string */

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

@@ -104,8 +104,9 @@ function v({ value: e, onChange: t, disabled: r = !1 }) {
 		} }) } }
 	});
 }
-function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S, onTagSelect: re, onTagCreate: C, inputSize: w = "medium", chipSize: T = "medium", disabled: E = !1, loading: ie = !1, isMaxReached: D = !1, allowCreate: O = !1, listboxMaxHeight: k }) {
-	let [A, j] = e("default"), [M, N] = e(null), [P, F] = e(null), [I, L] = e(!0), [R, z] = e(!1), [B, V] = e(!1), [H, U] = e("#1976d2"), [W, G] = e("#ffffff"), K = E || D, q = M !== null, J = y.filter((e) => e.label.toLowerCase().includes(b.trim().toLowerCase())), Y = O && b.trim() !== "" && J.length === 0, ae = B && !Y, X = q ? I ? h(M) : P ?? "#000000" : void 0, Z = () => {
+function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S, onTagSelect: re, onTagCreate: C, inputSize: w = "medium", chipSize: T = "medium", disabled: E = !1, loading: D = !1, isMaxReached: O = !1, allowCreate: ie = !1, listboxMaxHeight: k }) {
+	let [A, j] = e("default"), [M, N] = e(null), [P, F] = e(null), [I, L] = e(!0), [R, z] = e(!1), [B, V] = e(!1), [H, U] = e("#1976d2"), [W, G] = e("#ffffff"), K = E || O, q = M !== null, J = y.filter((e) => e.label.toLowerCase().includes(b.trim().toLowerCase())), Y = ie && b.trim() !== "" && J.length === 0, ae = B && !Y, X = q ? I ? h(M) : P ?? "#000000" : void 0, Z = () => {
+		if (K) return;
 		let e = b.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
 		C?.(q && M ? {
 			id: t,
@@ -149,7 +150,7 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 			onClose: () => V(!1),
 			size: w,
 			disabled: K,
-			loading: ie,
+			loading: D,
 			getOptionLabel: (e) => e.label,
 			inputValue: b,
 			onInputChange: (e, t) => S(t),
@@ -170,9 +171,9 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 				...e,
 				label: x.autoCompleteLabel,
 				placeholder: x.placeholder,
-				helperText: D && !E ? x.maxTagsReachedText : void 0,
+				helperText: O && !E ? x.maxTagsReachedText : void 0,
 				onKeyDown: (e) => {
-					Y && e.key === "Enter" && (e.preventDefault(), Z());
+					Y && !K && e.key === "Enter" && (e.preventDefault(), Z());
 				},
 				slotProps: {
 					...e.slotProps,
@@ -183,6 +184,7 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 							sx: { color: "success.main" },
 							onMouseDown: $,
 							onClick: Z,
+							disabled: K,
 							"aria-label": x.confirmCreateLabel,
 							children: /* @__PURE__ */ u(te, { fontSize: "small" })
 						}), /* @__PURE__ */ u(i, {