@thebuoyant-tsdev/mui-ts-library 3.20.0 → 3.21.0

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

@@ -1,19 +1,19 @@
 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);
+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 && !o,
-		disabled: o || n.disabled,
-		variant: n.selected ? "filled" : "outlined",
-		color: s ? void 0 : n.color ?? "default",
+		clickable: !!i && !n.disabled && !s,
+		disabled: s || n.disabled,
+		variant: o,
+		color: c ? void 0 : n.color ?? "default",
 		sx: {
-			...s && {
+			...c && {
 				color: n.foregroundColor ?? "inherit",
 				backgroundColor: n.backgroundColor ?? "transparent",
 				borderColor: n.backgroundColor ?? void 0,
@@ -22,7 +22,7 @@ function n({ tag: n, onDelete: r, onClick: i, chipSize: a = "medium", disabled:
 					"&:hover": { color: n.foregroundColor ?? "inherit" }
 				}
 			},
-			cursor: i && !n.disabled && !o ? "pointer" : "default"
+			cursor: i && !n.disabled && !s ? "pointer" : "default"
 		}
 	});
 }

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

@@ -5,9 +5,10 @@ type TagSelectionSelectedTagsProps = {
     onTagDelete: (tag: TagSelectionItem) => void;
     showSelectedTagsLabel: boolean;
     chipSize: "small" | "medium";
+    chipVariant: "filled" | "outlined";
     disabled?: boolean;
     maxVisibleChips?: number;
     popoverPlacement?: "top" | "bottom";
 };
-export declare function TagSelectionSelectedTags({ selectedTags, translation, onTagDelete, showSelectedTagsLabel, chipSize, disabled, maxVisibleChips, popoverPlacement, }: TagSelectionSelectedTagsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagSelectionSelectedTags({ selectedTags, translation, onTagDelete, showSelectedTagsLabel, chipSize, chipVariant, disabled, maxVisibleChips, popoverPlacement, }: TagSelectionSelectedTagsProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,14 +3,14 @@ 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" ? {
+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" ? {
 		vertical: "top",
 		horizontal: "left"
 	} : {
 		vertical: "bottom",
 		horizontal: "left"
-	}, w = _ === "top" ? {
+	}, T = v === "top" ? {
 		vertical: "bottom",
 		horizontal: "left"
 	} : {
@@ -33,23 +33,24 @@ function u({ selectedTags: u, translation: d, onTagDelete: f, showSelectedTagsLa
 				flexWrap: "wrap",
 				gap: 1
 			},
-			children: [b.map((t) => /* @__PURE__ */ c(e, {
+			children: [x.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, {
+				chipVariant: h,
+				disabled: g
+			}, t.id)), S.length > 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(r, {
 				size: m,
-				label: `+${x.length}`,
+				label: `+${S.length}`,
 				variant: "outlined",
 				clickable: !0,
-				onClick: (e) => y(e.currentTarget)
+				onClick: (e) => b(e.currentTarget)
 			}), /* @__PURE__ */ c(i, {
-				open: S,
-				anchorEl: v,
-				onClose: () => y(null),
-				anchorOrigin: C,
-				transformOrigin: w,
+				open: C,
+				anchorEl: y,
+				onClose: () => b(null),
+				anchorOrigin: w,
+				transformOrigin: T,
 				children: /* @__PURE__ */ c(n, {
 					sx: {
 						p: 1,
@@ -58,11 +59,12 @@ function u({ selectedTags: u, translation: d, onTagDelete: f, showSelectedTagsLa
 						gap: .5,
 						maxWidth: 320
 					},
-					children: x.map((t) => /* @__PURE__ */ c(e, {
+					children: S.map((t) => /* @__PURE__ */ c(e, {
 						tag: t,
-						onDelete: h ? void 0 : f,
+						onDelete: g ? void 0 : f,
 						chipSize: m,
-						disabled: h
+						chipVariant: h,
+						disabled: g
 					}, t.id))
 				})
 			})] })]