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

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 };

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

@@ -0,0 +1,382 @@
+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";
+//#region src/components/tag-selection/TagSelectionAutocomplete.tsx
+var ne = [
+	"default",
+	"primary",
+	"secondary",
+	"error",
+	"info",
+	"success",
+	"warning"
+], p = [
+	"#f44336",
+	"#e91e63",
+	"#9c27b0",
+	"#673ab7",
+	"#3f51b5",
+	"#2196f3",
+	"#03a9f4",
+	"#00bcd4",
+	"#009688",
+	"#4caf50",
+	"#8bc34a",
+	"#cddc39",
+	"#ffeb3b",
+	"#ffc107",
+	"#ff9800",
+	"#ff5722",
+	"#795548",
+	"#9e9e9e",
+	"#607d8b",
+	"#000000"
+];
+function m(e) {
+	return /^#[0-9A-Fa-f]{6}$/.test(e);
+}
+function h(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) {
+	let n = t.trim();
+	if (!n) return e;
+	let r = e.toLowerCase().indexOf(n.toLowerCase());
+	return r === -1 ? e : /* @__PURE__ */ d(l, { children: [
+		e.slice(0, r),
+		/* @__PURE__ */ u("strong", { children: e.slice(r, r + n.length) }),
+		e.slice(r + n.length)
+	] });
+}
+function _({ color: e, selected: t, onClick: r }) {
+	return /* @__PURE__ */ u(n, {
+		onClick: r,
+		sx: {
+			width: 24,
+			height: 24,
+			borderRadius: .5,
+			backgroundColor: e,
+			cursor: "pointer",
+			border: "2px solid",
+			borderColor: t ? "primary.main" : "transparent",
+			outline: t ? "1px solid" : "none",
+			outlineColor: "primary.main",
+			outlineOffset: 1,
+			flexShrink: 0,
+			"&:hover": {
+				transform: "scale(1.2)",
+				borderColor: "primary.main"
+			},
+			transition: "transform 0.1s"
+		}
+	});
+}
+function v({ value: e, onChange: t, disabled: r = !1 }) {
+	return /* @__PURE__ */ u(o, {
+		size: "small",
+		fullWidth: !0,
+		value: e,
+		onChange: (e) => t(e.target.value),
+		placeholder: "#rrggbb",
+		disabled: r,
+		error: !r && e.length > 1 && !m(e),
+		sx: {
+			"& .MuiInputBase-root": { height: 28 },
+			"& .MuiInputBase-input": {
+				py: 0,
+				px: .5,
+				fontSize: "0.72rem",
+				fontFamily: "monospace"
+			}
+		},
+		slotProps: { input: { startAdornment: /* @__PURE__ */ u(n, { sx: {
+			width: 12,
+			height: 12,
+			borderRadius: .25,
+			flexShrink: 0,
+			mr: .5,
+			backgroundColor: m(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: 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 = () => {
+		let e = b.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
+		C?.(q && M ? {
+			id: t,
+			label: e,
+			selected: !0,
+			color: "default",
+			backgroundColor: M,
+			foregroundColor: X
+		} : {
+			id: t,
+			label: e,
+			selected: !0,
+			color: A
+		}), j("default"), N(null), F(null), L(!0), z(!1), S("");
+	}, Q = () => {
+		S(""), j("default"), N(null), F(null), L(!0), z(!1);
+	}, oe = (e) => {
+		N(e), U(e), j("default");
+	}, se = (e) => {
+		U(e), m(e) && (N(e), j("default"));
+	}, ce = (e) => {
+		F(e), G(e);
+	}, le = (e) => {
+		G(e), m(e) && F(e);
+	}, ue = (e) => {
+		if (L(e), e) F(null);
+		else if (M) {
+			let e = h(M);
+			F(e), G(e);
+		}
+	}, $ = (e) => e.preventDefault();
+	return /* @__PURE__ */ d(n, {
+		sx: { mb: 2 },
+		children: [/* @__PURE__ */ u(t, {
+			options: y,
+			value: null,
+			open: ae,
+			onOpen: () => {
+				Y || V(!0);
+			},
+			onClose: () => V(!1),
+			size: w,
+			disabled: K,
+			loading: ie,
+			getOptionLabel: (e) => e.label,
+			inputValue: b,
+			onInputChange: (e, t) => S(t),
+			onChange: (e, t) => {
+				t && re(t);
+			},
+			slotProps: { listbox: { sx: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 1,
+				padding: 1,
+				...k !== void 0 && {
+					maxHeight: k,
+					overflowY: "auto"
+				}
+			} } },
+			renderInput: (e) => /* @__PURE__ */ u(o, {
+				...e,
+				label: x.autoCompleteLabel,
+				placeholder: x.placeholder,
+				helperText: D && !E ? x.maxTagsReachedText : void 0,
+				onKeyDown: (e) => {
+					Y && e.key === "Enter" && (e.preventDefault(), Z());
+				},
+				slotProps: {
+					...e.slotProps,
+					input: {
+						...e.slotProps?.input,
+						endAdornment: /* @__PURE__ */ d(l, { children: [Y && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(i, {
+							size: "small",
+							sx: { color: "success.main" },
+							onMouseDown: $,
+							onClick: Z,
+							"aria-label": x.confirmCreateLabel,
+							children: /* @__PURE__ */ u(te, { fontSize: "small" })
+						}), /* @__PURE__ */ u(i, {
+							size: "small",
+							onMouseDown: $,
+							onClick: Q,
+							"aria-label": x.cancelCreateLabel,
+							children: /* @__PURE__ */ u(f, { fontSize: "small" })
+						})] }), e.slotProps?.input?.endAdornment] })
+					}
+				}
+			}),
+			renderOption: ({ key: e, ...t }, n) => {
+				let i = !!(n.foregroundColor || n.backgroundColor);
+				return /* @__PURE__ */ u("li", {
+					...t,
+					style: {
+						width: "auto",
+						padding: 0,
+						margin: 0
+					},
+					children: /* @__PURE__ */ u(r, {
+						size: T,
+						label: g(n.label, b),
+						color: i ? void 0 : n.color ?? "default",
+						sx: i ? {
+							color: n.foregroundColor ?? "inherit",
+							backgroundColor: n.backgroundColor ?? "transparent"
+						} : void 0
+					})
+				}, e);
+			},
+			isOptionEqualToValue: (e, t) => e.id === t.id,
+			noOptionsText: x.noAvailableTagsText,
+			loadingText: x.loadingText
+		}), Y && /* @__PURE__ */ d(n, {
+			sx: { position: "relative" },
+			onMouseDown: $,
+			children: [/* @__PURE__ */ d(a, {
+				direction: "row",
+				sx: {
+					mt: .5,
+					flexWrap: "wrap",
+					gap: .5,
+					alignItems: "center"
+				},
+				children: [ne.map((e) => /* @__PURE__ */ u(r, {
+					size: T,
+					color: e,
+					label: e,
+					variant: !q && A === e ? "filled" : "outlined",
+					onClick: () => {
+						j(e), N(null), F(null), z(!1);
+					},
+					clickable: !0
+				}, e)), /* @__PURE__ */ u(s, {
+					title: x.colorPickerLabel,
+					children: /* @__PURE__ */ u(r, {
+						size: T,
+						label: q ? M : "···",
+						variant: "outlined",
+						onClick: () => {
+							z((e) => !e), M && U(M), P && G(P);
+						},
+						sx: (e) => ({
+							cursor: "pointer",
+							fontFamily: "monospace",
+							fontSize: "0.7rem",
+							...q ? {
+								backgroundColor: M,
+								color: X,
+								border: "1.5px solid transparent",
+								backgroundImage: `linear-gradient(${M}, ${M}), linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0)`,
+								backgroundOrigin: "border-box",
+								backgroundClip: "padding-box, border-box"
+							} : {
+								border: "1.5px solid transparent",
+								backgroundImage: `linear-gradient(${e.palette.background.paper}, ${e.palette.background.paper}), linear-gradient(90deg, #f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0)`,
+								backgroundOrigin: "border-box",
+								backgroundClip: "padding-box, border-box"
+							}
+						}),
+						clickable: !0
+					})
+				})]
+			}), R && /* @__PURE__ */ u(n, {
+				sx: {
+					position: "absolute",
+					top: "calc(100% + 4px)",
+					left: 0,
+					zIndex: 1400,
+					backgroundColor: "background.paper",
+					border: "1px solid",
+					borderColor: "divider",
+					borderRadius: 1,
+					boxShadow: 8,
+					p: 1.25,
+					width: "max-content"
+				},
+				children: /* @__PURE__ */ d(n, {
+					sx: {
+						display: "grid",
+						gridTemplateColumns: "auto auto",
+						gap: 2
+					},
+					children: [/* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(c, {
+						variant: "caption",
+						sx: {
+							fontWeight: 700,
+							color: "text.primary",
+							display: "block",
+							mb: .5
+						},
+						children: x.backgroundColorLabel
+					}), /* @__PURE__ */ d(n, {
+						sx: {
+							display: "grid",
+							gridTemplateColumns: "repeat(5, 24px)",
+							gap: .5
+						},
+						children: [p.map((e) => /* @__PURE__ */ u(_, {
+							color: e,
+							selected: M === e,
+							onClick: () => oe(e)
+						}, e)), /* @__PURE__ */ u(n, {
+							sx: {
+								gridColumn: "span 5",
+								mt: .25
+							},
+							children: /* @__PURE__ */ u(v, {
+								value: H,
+								onChange: se
+							})
+						})]
+					})] }), /* @__PURE__ */ d(n, { children: [
+						/* @__PURE__ */ u(c, {
+							variant: "caption",
+							sx: {
+								fontWeight: 700,
+								color: "text.primary",
+								display: "block",
+								mb: .5
+							},
+							children: x.textColorLabel
+						}),
+						/* @__PURE__ */ d(n, {
+							sx: {
+								display: "grid",
+								gridTemplateColumns: "repeat(5, 24px)",
+								gap: .5,
+								opacity: I ? .3 : 1,
+								pointerEvents: I ? "none" : "auto",
+								transition: "opacity 0.15s"
+							},
+							children: [p.map((e) => /* @__PURE__ */ u(_, {
+								color: e,
+								selected: P === e,
+								onClick: () => ce(e)
+							}, e)), /* @__PURE__ */ u(n, {
+								sx: {
+									gridColumn: "span 5",
+									mt: .25
+								},
+								children: /* @__PURE__ */ u(v, {
+									value: I ? X ?? "#000000" : W,
+									onChange: le,
+									disabled: I
+								})
+							})]
+						}),
+						/* @__PURE__ */ d(a, {
+							direction: "row",
+							sx: {
+								width: "100%",
+								alignItems: "center",
+								justifyContent: "flex-end",
+								gap: .5,
+								mt: .25
+							},
+							children: [/* @__PURE__ */ u(c, {
+								variant: "caption",
+								color: "text.secondary",
+								children: x.autoTextColorLabel
+							}), /* @__PURE__ */ u(ee, {
+								size: "small",
+								checked: I,
+								onChange: (e) => ue(e.target.checked)
+							})]
+						})
+					] })]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { y as TagSelectionAutocomplete };

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

@@ -0,0 +1,30 @@
+import { Chip as e } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/tag-selection/TagSelectionChip.tsx
+function n({ tag: n, onDelete: r, onClick: i, chipSize: a = "medium", disabled: o = !1 }) {
+	let s = !!(n.foregroundColor || n.backgroundColor);
+	return /* @__PURE__ */ t(e, {
+		size: a,
+		label: n.label,
+		onDelete: r ? () => r(n) : void 0,
+		onClick: i ? () => i(n) : void 0,
+		clickable: !!i && !n.disabled && !o,
+		disabled: o || n.disabled,
+		variant: n.selected ? "filled" : "outlined",
+		color: s ? void 0 : n.color ?? "default",
+		sx: {
+			...s && {
+				color: n.foregroundColor ?? "inherit",
+				backgroundColor: n.backgroundColor ?? "transparent",
+				borderColor: n.backgroundColor ?? void 0,
+				"& .MuiChip-deleteIcon": {
+					color: n.foregroundColor ? `${n.foregroundColor}99` : "inherit",
+					"&:hover": { color: n.foregroundColor ?? "inherit" }
+				}
+			},
+			cursor: i && !n.disabled && !o ? "pointer" : "default"
+		}
+	});
+}
+//#endregion
+export { n as TagSelectionChip };

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

@@ -0,0 +1,73 @@
+import { TagSelectionChip as e } from "./TagSelectionChip.js";
+import { useState as t } from "react";
+import { Box as n, Chip as r, Popover as i, Stack as a, Typography as o } from "@mui/material";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/tag-selection/TagSelectionSelectedTags.tsx
+function u({ selectedTags: u, translation: d, onTagDelete: f, showSelectedTagsLabel: p, chipSize: m = "medium", disabled: h = !1, maxVisibleChips: g, popoverPlacement: _ = "bottom" }) {
+	let [v, y] = t(null), b = g === void 0 ? u : u.slice(0, g), x = g === void 0 ? [] : u.slice(g), S = !!v && x.length > 0, C = _ === "top" ? {
+		vertical: "top",
+		horizontal: "left"
+	} : {
+		vertical: "bottom",
+		horizontal: "left"
+	}, w = _ === "top" ? {
+		vertical: "bottom",
+		horizontal: "left"
+	} : {
+		vertical: "top",
+		horizontal: "left"
+	};
+	return /* @__PURE__ */ l(n, {
+		sx: { mb: 2 },
+		children: [p && /* @__PURE__ */ c(o, {
+			variant: "subtitle2",
+			gutterBottom: !0,
+			children: d.selectedTagsLabel
+		}), u.length === 0 ? /* @__PURE__ */ c(o, {
+			variant: "body2",
+			color: "text.secondary",
+			children: d.noSelectedTagsText
+		}) : /* @__PURE__ */ l(a, {
+			direction: "row",
+			sx: {
+				flexWrap: "wrap",
+				gap: 1
+			},
+			children: [b.map((t) => /* @__PURE__ */ c(e, {
+				tag: t,
+				onDelete: f,
+				chipSize: m,
+				disabled: h
+			}, t.id)), x.length > 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(r, {
+				size: m,
+				label: `+${x.length}`,
+				variant: "outlined",
+				clickable: !0,
+				onClick: (e) => y(e.currentTarget)
+			}), /* @__PURE__ */ c(i, {
+				open: S,
+				anchorEl: v,
+				onClose: () => y(null),
+				anchorOrigin: C,
+				transformOrigin: w,
+				children: /* @__PURE__ */ c(n, {
+					sx: {
+						p: 1,
+						display: "flex",
+						flexWrap: "wrap",
+						gap: .5,
+						maxWidth: 320
+					},
+					children: x.map((t) => /* @__PURE__ */ c(e, {
+						tag: t,
+						onDelete: h ? void 0 : f,
+						chipSize: m,
+						disabled: h
+					}, t.id))
+				})
+			})] })]
+		})]
+	});
+}
+//#endregion
+export { u as TagSelectionSelectedTags };