@thebuoyant-tsdev/mui-ts-library 3.22.0 → 3.24.1

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

@@ -1,30 +1,33 @@
-import { Chip as e } from "@mui/material";
-import { jsx as t } from "react/jsx-runtime";
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { tagSelectionClasses as t } from "./tagSelectionClasses.js";
+import { Chip as n } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/tag-selection/TagSelectionChip.tsx
-function n({ tag: n, onDelete: r, onClick: i, chipSize: a = "medium", chipVariant: o = "filled", disabled: s = !1 }) {
-	let c = !!(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 && !s,
-		disabled: s || n.disabled,
-		variant: o,
-		color: c ? void 0 : n.color ?? "default",
+function i({ tag: i, onDelete: a, onClick: o, chipSize: s = "medium", chipVariant: c = "filled", disabled: l = !1 }) {
+	let u = !!(i.foregroundColor || i.backgroundColor), d = l || i.disabled;
+	return /* @__PURE__ */ r(n, {
+		size: s,
+		label: i.label,
+		onDelete: a ? () => a(i) : void 0,
+		onClick: o ? () => o(i) : void 0,
+		clickable: !!o && !i.disabled && !l,
+		disabled: d,
+		variant: c,
+		color: u ? void 0 : i.color ?? "default",
+		className: [t.chip, d && e.disabled].filter(Boolean).join(" "),
 		sx: {
-			...c && {
-				color: n.foregroundColor ?? "inherit",
-				backgroundColor: n.backgroundColor ?? "transparent",
-				borderColor: n.backgroundColor ?? void 0,
+			...u && {
+				color: i.foregroundColor ?? "inherit",
+				backgroundColor: i.backgroundColor ?? "transparent",
+				borderColor: i.backgroundColor ?? void 0,
 				"& .MuiChip-deleteIcon": {
-					color: n.foregroundColor ? `${n.foregroundColor}99` : "inherit",
-					"&:hover": { color: n.foregroundColor ?? "inherit" }
+					color: i.foregroundColor ? `${i.foregroundColor}99` : "inherit",
+					"&:hover": { color: i.foregroundColor ?? "inherit" }
 				}
 			},
-			cursor: i && !n.disabled && !s ? "pointer" : "default"
+			cursor: o && !i.disabled && !d ? "pointer" : "default"
 		}
 	});
 }
 //#endregion
-export { n as TagSelectionChip };
+export { i as TagSelectionChip };

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

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

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

@@ -0,0 +1,34 @@
+/**
+ * CSS class names for every named slot in the TagSelection component.
+ *
+ * Use these to style individual parts of the component without relying on
+ * MUI's internal class names, which can change between versions.
+ *
+ * @example
+ * ```css
+ * .MuiTsTagSelection-chip { border-radius: 4px; }
+ * .MuiTsTagSelection-chip.MuiTs-disabled { opacity: 0.5; }
+ * ```
+ */
+export declare const tagSelectionClasses: {
+    /** The outermost wrapper element of the TagSelection component. Also receives `MuiTs-disabled` when `disabled={true}`. */
+    readonly root: "MuiTsTagSelection-root";
+    /** The area that shows the selected-tags section (label + chips). */
+    readonly selectedTags: "MuiTsTagSelection-selectedTags";
+    /** The label text above the selected chips ("Selected tags"). */
+    readonly selectedTagsLabel: "MuiTsTagSelection-selectedTagsLabel";
+    /** The flex row that wraps all selected chips. */
+    readonly chipsStack: "MuiTsTagSelection-chipsStack";
+    /** Each selected tag chip. Also receives `MuiTs-disabled` when the chip is disabled. */
+    readonly chip: "MuiTsTagSelection-chip";
+    /** The overflow "+N" chip shown when `maxVisibleChips` is exceeded. */
+    readonly overflowChip: "MuiTsTagSelection-overflowChip";
+    /** The content box inside the overflow popover. */
+    readonly overflowPopover: "MuiTsTagSelection-overflowPopover";
+    /** The autocomplete section (search input + dropdown). */
+    readonly autocomplete: "MuiTsTagSelection-autocomplete";
+    /** Each option chip rendered inside the autocomplete dropdown list. */
+    readonly option: "MuiTsTagSelection-option";
+    /** The create-tag panel (color row + palette) shown when `allowCreate={true}` and search has no match. */
+    readonly createPanel: "MuiTsTagSelection-createPanel";
+};

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

@@ -0,0 +1,15 @@
+//#region src/components/tag-selection/tagSelectionClasses.ts
+var e = {
+	root: "MuiTsTagSelection-root",
+	selectedTags: "MuiTsTagSelection-selectedTags",
+	selectedTagsLabel: "MuiTsTagSelection-selectedTagsLabel",
+	chipsStack: "MuiTsTagSelection-chipsStack",
+	chip: "MuiTsTagSelection-chip",
+	overflowChip: "MuiTsTagSelection-overflowChip",
+	overflowPopover: "MuiTsTagSelection-overflowPopover",
+	autocomplete: "MuiTsTagSelection-autocomplete",
+	option: "MuiTsTagSelection-option",
+	createPanel: "MuiTsTagSelection-createPanel"
+};
+//#endregion
+export { e as tagSelectionClasses };