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

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

@@ -2,101 +2,114 @@ 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";
+import { createContext as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Box as u, Stack as d } from "@mui/material";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useStore as m } from "zustand";
 //#region src/components/tag-selection/TagSelection.tsx
-var m = i(null);
-function h(e) {
-	let t = a(m);
+var h = i(null);
+function g(e) {
+	let t = a(h);
 	if (!t) throw Error("TagSelectionStoreContext is missing.");
-	return p(t, e);
+	return m(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);
+function _({ tags: e, showSelectedTags: r = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, inputSize: l = "medium", chipSize: m = "small", disabled: h = !1, loading: _ = !1, maxTags: v, allowCreate: y = !1, maxVisibleChips: b, popoverPlacement: x = "bottom", listboxMaxHeight: S, searchDebounceMs: C, serverSideFilter: w = !1, translation: T, onTagSelect: E, onTagDelete: D, onTagsChange: O, onSearchChange: k, onTagCreate: A }) {
+	let j = g((e) => e.tags), M = g((e) => e.searchValue), N = g((e) => e.setTags), P = g((e) => e.setSearchValue), F = g((e) => e.selectTag), I = g((e) => e.deleteTag), L = g((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, {
+		N(e);
+	}, [e, N]);
+	let R = s(() => j.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [j]), z = s(() => j.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [j]), B = v !== void 0 && R.length >= v, V = (e) => {
+		O && O(e.filter((e) => e.selected), e);
+	}, H = (e) => {
+		if (e.disabled || e.selected) return;
+		F(e.id);
+		let t = j.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 && E && E(r, n, t), V(t);
+	}, U = (e) => {
+		I(e.id);
+		let t = j.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 && D && D(r, n, t), V(t);
+	}, W = c(null);
+	return o(() => () => {
+		W.current && clearTimeout(W.current);
+	}, []), /* @__PURE__ */ f(u, {
 		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);
-			},
+		children: /* @__PURE__ */ p(d, { children: [r && /* @__PURE__ */ f(n, {
+			selectedTags: R,
+			translation: T,
+			onTagDelete: U,
 			showSelectedTagsLabel: i,
-			chipSize: p,
-			disabled: m,
-			maxVisibleChips: y,
-			popoverPlacement: b
-		}), a && /* @__PURE__ */ d(t, {
-			availableTags: I,
-			searchValue: k,
-			translation: S,
+			chipSize: m,
+			disabled: h,
+			maxVisibleChips: b,
+			popoverPlacement: x
+		}), a && /* @__PURE__ */ f(t, {
+			availableTags: z,
+			searchValue: M,
+			translation: T,
 			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);
+				if (P(e), k) {
+					if (W.current &&= (clearTimeout(W.current), null), !C) {
+						k(e);
+						return;
+					}
+					W.current = setTimeout(() => {
+						k(e), W.current = null;
+					}, C);
+				}
 			},
+			onTagSelect: H,
 			onTagCreate: (e) => {
-				P(e), R([...O, e]), D && D(e);
+				L(e), V([...j, e]), A && A(e);
 			},
-			inputSize: c,
-			chipSize: p,
-			disabled: m,
-			loading: g,
-			isMaxReached: L,
-			allowCreate: v,
-			listboxMaxHeight: x
+			inputSize: l,
+			chipSize: m,
+			disabled: h,
+			loading: _,
+			isMaxReached: B,
+			allowCreate: y,
+			listboxMaxHeight: S,
+			serverSideFilter: w
 		})] })
 	});
 }
-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 = {
+function v({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, translation: o, inputSize: s = "medium", chipSize: c = "small", disabled: u = !1, loading: d = !1, maxTags: p, allowCreate: m = !1, maxVisibleChips: g, popoverPlacement: v = "bottom", listboxMaxHeight: y, searchDebounceMs: b, serverSideFilter: x = !1, onTagSelect: S, onTagDelete: C, onTagsChange: w, onSearchChange: T, onTagCreate: E }) {
+	let D = {
 		...r,
 		...o
-	}, [E] = c(() => e(t));
-	return /* @__PURE__ */ d(m.Provider, {
-		value: E,
-		children: /* @__PURE__ */ d(g, {
+	}, [O] = l(() => e(t));
+	return /* @__PURE__ */ f(h.Provider, {
+		value: O,
+		children: /* @__PURE__ */ f(_, {
 			tags: t,
 			showSelectedTags: n,
 			showSelectedTagsLabel: i,
 			showAutoComplete: a,
-			translation: T,
+			translation: D,
 			inputSize: s,
-			chipSize: l,
+			chipSize: c,
 			disabled: u,
-			loading: f,
+			loading: d,
 			maxTags: p,
-			allowCreate: h,
-			maxVisibleChips: _,
+			allowCreate: m,
+			maxVisibleChips: g,
 			popoverPlacement: v,
 			listboxMaxHeight: y,
-			onTagSelect: b,
-			onTagDelete: x,
-			onTagsChange: S,
-			onSearchChange: C,
-			onTagCreate: w
+			searchDebounceMs: b,
+			serverSideFilter: x,
+			onTagSelect: S,
+			onTagDelete: C,
+			onTagsChange: w,
+			onSearchChange: T,
+			onTagCreate: E
 		})
 	});
 }
 //#endregion
-export { _ as TagSelection };
+export { v as TagSelection };

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

@@ -36,6 +36,8 @@ export type TagSelectionProps = {
     maxTags?: number;
     maxVisibleChips?: number;
     popoverPlacement?: "top" | "bottom";
+    searchDebounceMs?: number;
+    serverSideFilter?: boolean;
     showAutoComplete?: boolean;
     showSelectedTags?: boolean;
     showSelectedTagsLabel?: boolean;

package/dist/components/tag-selection/TagSelectionAutocomplete.d.ts

@@ -13,6 +13,7 @@ type TagSelectionAutocompleteProps = {
     isMaxReached?: boolean;
     allowCreate?: boolean;
     listboxMaxHeight?: number;
+    serverSideFilter?: boolean;
 };
-export declare function TagSelectionAutocomplete({ availableTags, searchValue, translation, onSearchChange, onTagSelect, onTagCreate, inputSize, chipSize, disabled, loading, isMaxReached, allowCreate, listboxMaxHeight, }: TagSelectionAutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagSelectionAutocomplete({ availableTags, searchValue, translation, onSearchChange, onTagSelect, onTagCreate, inputSize, chipSize, disabled, loading, isMaxReached, allowCreate, listboxMaxHeight, serverSideFilter, }: TagSelectionAutocompleteProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 import { useState as e } from "react";
 import { Autocomplete as t, Box as n, Chip as r, IconButton as i, Stack as a, Switch as ee, TextField as o, Tooltip as s, Typography as c } from "@mui/material";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import te from "@mui/icons-material/Check";
-import f from "@mui/icons-material/Close";
+import f from "@mui/icons-material/Check";
+import te from "@mui/icons-material/Close";
 //#region src/components/tag-selection/TagSelectionAutocomplete.tsx
-var ne = [
+var p = [
 	"default",
 	"primary",
 	"secondary",
@@ -12,7 +12,7 @@ var ne = [
 	"info",
 	"success",
 	"warning"
-], p = [
+], m = [
 	"#f44336",
 	"#e91e63",
 	"#9c27b0",
@@ -34,14 +34,14 @@ var ne = [
 	"#607d8b",
 	"#000000"
 ];
-function m(e) {
+function h(e) {
 	return /^#[0-9A-Fa-f]{6}$/.test(e);
 }
-function h(e) {
+function g(e) {
 	let t = parseInt(e.slice(1, 3), 16), n = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
 	return (.299 * t + .587 * n + .114 * r) / 255 > .5 ? "#000000" : "#ffffff";
 }
-function g(e, t) {
+function _(e, t) {
 	let n = t.trim();
 	if (!n) return e;
 	let r = e.toLowerCase().indexOf(n.toLowerCase());
@@ -51,7 +51,7 @@ function g(e, t) {
 		e.slice(r + n.length)
 	] });
 }
-function _({ color: e, selected: t, onClick: r }) {
+function v({ color: e, selected: t, onClick: r }) {
 	return /* @__PURE__ */ u(n, {
 		onClick: r,
 		sx: {
@@ -74,7 +74,7 @@ function _({ color: e, selected: t, onClick: r }) {
 		}
 	});
 }
-function v({ value: e, onChange: t, disabled: r = !1 }) {
+function y({ value: e, onChange: t, disabled: r = !1 }) {
 	return /* @__PURE__ */ u(o, {
 		size: "small",
 		fullWidth: !0,
@@ -82,7 +82,7 @@ function v({ value: e, onChange: t, disabled: r = !1 }) {
 		onChange: (e) => t(e.target.value),
 		placeholder: "#rrggbb",
 		disabled: r,
-		error: !r && e.length > 1 && !m(e),
+		error: !r && e.length > 1 && !h(e),
 		sx: {
 			"& .MuiInputBase-root": { height: 28 },
 			"& .MuiInputBase-input": {
@@ -98,64 +98,67 @@ function v({ value: e, onChange: t, disabled: r = !1 }) {
 			borderRadius: .25,
 			flexShrink: 0,
 			mr: .5,
-			backgroundColor: m(e) ? e : "action.disabledBackground",
+			backgroundColor: h(e) ? e : "action.disabledBackground",
 			border: "1px solid",
 			borderColor: "divider"
 		} }) } }
 	});
 }
-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 ? {
+function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C, onTagSelect: w, onTagCreate: T, inputSize: ne = "medium", chipSize: E = "medium", disabled: D = !1, loading: re = !1, isMaxReached: O = !1, allowCreate: ie = !1, listboxMaxHeight: k, serverSideFilter: A = !1 }) {
+	let [j, M] = e("default"), [N, P] = e(null), [F, I] = e(null), [L, R] = e(!0), [z, B] = e(!1), [V, H] = e(!1), [U, W] = e("#1976d2"), [G, K] = e("#ffffff"), q = D || O, J = N !== null, ae = A ? b : b.filter((e) => e.label.toLowerCase().includes(x.trim().toLowerCase())), Y = ie && x.trim() !== "" && ae.length === 0, oe = V && !Y, X = J ? L ? g(N) : F ?? "#000000" : void 0, Z = () => {
+		if (q) return;
+		let e = x.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
+		T?.(J && N ? {
 			id: t,
 			label: e,
 			selected: !0,
 			color: "default",
-			backgroundColor: M,
+			backgroundColor: N,
 			foregroundColor: X
 		} : {
 			id: t,
 			label: e,
 			selected: !0,
-			color: A
-		}), j("default"), N(null), F(null), L(!0), z(!1), S("");
+			color: j
+		}), M("default"), P(null), I(null), R(!0), B(!1), C("");
 	}, Q = () => {
-		S(""), j("default"), N(null), F(null), L(!0), z(!1);
-	}, oe = (e) => {
-		N(e), U(e), j("default");
+		C(""), M("default"), P(null), I(null), R(!0), B(!1);
 	}, se = (e) => {
-		U(e), m(e) && (N(e), j("default"));
+		P(e), W(e), M("default");
 	}, ce = (e) => {
-		F(e), G(e);
+		W(e), h(e) && (P(e), M("default"));
 	}, le = (e) => {
-		G(e), m(e) && F(e);
+		I(e), K(e);
 	}, ue = (e) => {
-		if (L(e), e) F(null);
-		else if (M) {
-			let e = h(M);
-			F(e), G(e);
+		K(e), h(e) && I(e);
+	}, de = (e) => {
+		if (R(e), e) I(null);
+		else if (N) {
+			let e = g(N);
+			I(e), K(e);
 		}
 	}, $ = (e) => e.preventDefault();
 	return /* @__PURE__ */ d(n, {
 		sx: { mb: 2 },
 		children: [/* @__PURE__ */ u(t, {
-			options: y,
+			options: b,
+			filterOptions: A ? (e) => e : void 0,
 			value: null,
-			open: ae,
+			open: oe,
 			onOpen: () => {
-				Y || V(!0);
+				Y || H(!0);
 			},
-			onClose: () => V(!1),
-			size: w,
-			disabled: K,
-			loading: D,
+			onClose: () => H(!1),
+			size: ne,
+			disabled: q,
+			loading: re,
 			getOptionLabel: (e) => e.label,
-			inputValue: b,
-			onInputChange: (e, t) => S(t),
+			inputValue: x,
+			onInputChange: (e, t, n) => {
+				n === "input" && C(t);
+			},
 			onChange: (e, t) => {
-				t && re(t);
+				t && w(t);
 			},
 			slotProps: { listbox: { sx: {
 				display: "flex",
@@ -169,11 +172,11 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 			} } },
 			renderInput: (e) => /* @__PURE__ */ u(o, {
 				...e,
-				label: x.autoCompleteLabel,
-				placeholder: x.placeholder,
-				helperText: O && !E ? x.maxTagsReachedText : void 0,
+				label: S.autoCompleteLabel,
+				placeholder: S.placeholder,
+				helperText: O && !D ? S.maxTagsReachedText : void 0,
 				onKeyDown: (e) => {
-					Y && !K && e.key === "Enter" && (e.preventDefault(), Z());
+					Y && !q && e.key === "Enter" && (e.preventDefault(), Z());
 				},
 				slotProps: {
 					...e.slotProps,
@@ -184,15 +187,15 @@ 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" })
+							disabled: q,
+							"aria-label": S.confirmCreateLabel,
+							children: /* @__PURE__ */ u(f, { fontSize: "small" })
 						}), /* @__PURE__ */ u(i, {
 							size: "small",
 							onMouseDown: $,
 							onClick: Q,
-							"aria-label": x.cancelCreateLabel,
-							children: /* @__PURE__ */ u(f, { fontSize: "small" })
+							"aria-label": S.cancelCreateLabel,
+							children: /* @__PURE__ */ u(te, { fontSize: "small" })
 						})] }), e.slotProps?.input?.endAdornment] })
 					}
 				}
@@ -207,8 +210,8 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 						margin: 0
 					},
 					children: /* @__PURE__ */ u(r, {
-						size: T,
-						label: g(n.label, b),
+						size: E,
+						label: _(n.label, x),
 						color: i ? void 0 : n.color ?? "default",
 						sx: i ? {
 							color: n.foregroundColor ?? "inherit",
@@ -218,8 +221,8 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 				}, e);
 			},
 			isOptionEqualToValue: (e, t) => e.id === t.id,
-			noOptionsText: x.noAvailableTagsText,
-			loadingText: x.loadingText
+			noOptionsText: S.noAvailableTagsText,
+			loadingText: S.loadingText
 		}), Y && /* @__PURE__ */ d(n, {
 			sx: { position: "relative" },
 			onMouseDown: $,
@@ -231,33 +234,33 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 					gap: .5,
 					alignItems: "center"
 				},
-				children: [ne.map((e) => /* @__PURE__ */ u(r, {
-					size: T,
+				children: [p.map((e) => /* @__PURE__ */ u(r, {
+					size: E,
 					color: e,
 					label: e,
-					variant: !q && A === e ? "filled" : "outlined",
+					variant: !J && j === e ? "filled" : "outlined",
 					onClick: () => {
-						j(e), N(null), F(null), z(!1);
+						M(e), P(null), I(null), B(!1);
 					},
 					clickable: !0
 				}, e)), /* @__PURE__ */ u(s, {
-					title: x.colorPickerLabel,
+					title: S.colorPickerLabel,
 					children: /* @__PURE__ */ u(r, {
-						size: T,
-						label: q ? M : "···",
+						size: E,
+						label: J ? N : "···",
 						variant: "outlined",
 						onClick: () => {
-							z((e) => !e), M && U(M), P && G(P);
+							B((e) => !e), N && W(N), F && K(F);
 						},
 						sx: (e) => ({
 							cursor: "pointer",
 							fontFamily: "monospace",
 							fontSize: "0.7rem",
-							...q ? {
-								backgroundColor: M,
+							...J ? {
+								backgroundColor: N,
 								color: X,
 								border: "1.5px solid transparent",
-								backgroundImage: `linear-gradient(${M}, ${M}), linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0)`,
+								backgroundImage: `linear-gradient(${N}, ${N}), linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0)`,
 								backgroundOrigin: "border-box",
 								backgroundClip: "padding-box, border-box"
 							} : {
@@ -270,7 +273,7 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 						clickable: !0
 					})
 				})]
-			}), R && /* @__PURE__ */ u(n, {
+			}), z && /* @__PURE__ */ u(n, {
 				sx: {
 					position: "absolute",
 					top: "calc(100% + 4px)",
@@ -298,25 +301,25 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 							display: "block",
 							mb: .5
 						},
-						children: x.backgroundColorLabel
+						children: S.backgroundColorLabel
 					}), /* @__PURE__ */ d(n, {
 						sx: {
 							display: "grid",
 							gridTemplateColumns: "repeat(5, 24px)",
 							gap: .5
 						},
-						children: [p.map((e) => /* @__PURE__ */ u(_, {
+						children: [m.map((e) => /* @__PURE__ */ u(v, {
 							color: e,
-							selected: M === e,
-							onClick: () => oe(e)
+							selected: N === e,
+							onClick: () => se(e)
 						}, e)), /* @__PURE__ */ u(n, {
 							sx: {
 								gridColumn: "span 5",
 								mt: .25
 							},
-							children: /* @__PURE__ */ u(v, {
-								value: H,
-								onChange: se
+							children: /* @__PURE__ */ u(y, {
+								value: U,
+								onChange: ce
 							})
 						})]
 					})] }), /* @__PURE__ */ d(n, { children: [
@@ -328,30 +331,30 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 								display: "block",
 								mb: .5
 							},
-							children: x.textColorLabel
+							children: S.textColorLabel
 						}),
 						/* @__PURE__ */ d(n, {
 							sx: {
 								display: "grid",
 								gridTemplateColumns: "repeat(5, 24px)",
 								gap: .5,
-								opacity: I ? .3 : 1,
-								pointerEvents: I ? "none" : "auto",
+								opacity: L ? .3 : 1,
+								pointerEvents: L ? "none" : "auto",
 								transition: "opacity 0.15s"
 							},
-							children: [p.map((e) => /* @__PURE__ */ u(_, {
+							children: [m.map((e) => /* @__PURE__ */ u(v, {
 								color: e,
-								selected: P === e,
-								onClick: () => ce(e)
+								selected: F === e,
+								onClick: () => le(e)
 							}, e)), /* @__PURE__ */ u(n, {
 								sx: {
 									gridColumn: "span 5",
 									mt: .25
 								},
-								children: /* @__PURE__ */ u(v, {
-									value: I ? X ?? "#000000" : W,
-									onChange: le,
-									disabled: I
+								children: /* @__PURE__ */ u(y, {
+									value: L ? X ?? "#000000" : G,
+									onChange: ue,
+									disabled: L
 								})
 							})]
 						}),
@@ -367,11 +370,11 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 							children: [/* @__PURE__ */ u(c, {
 								variant: "caption",
 								color: "text.secondary",
-								children: x.autoTextColorLabel
+								children: S.autoTextColorLabel
 							}), /* @__PURE__ */ u(ee, {
 								size: "small",
-								checked: I,
-								onChange: (e) => ue(e.target.checked)
+								checked: L,
+								onChange: (e) => de(e.target.checked)
 							})]
 						})
 					] })]
@@ -381,4 +384,4 @@ function y({ availableTags: y, searchValue: b, translation: x, onSearchChange: S
 	});
 }
 //#endregion
-export { y as TagSelectionAutocomplete };
+export { b as TagSelectionAutocomplete };