@thebuoyant-tsdev/mui-ts-library 3.33.1 → 3.34.0

package/README.de.md

@@ -555,6 +555,15 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.34.0] — 2026-07-18
+
+**Hinzugefügt**
+- **KanbanBoard — `showSearchField`**: Neues Boolean-Prop, das ein eingebautes `size="small"`-Suchfeld mit Lupen-Icon über dem Board rendert. Das Board verwaltet den Filterzustand intern — kein zusätzliches Wiring nötig. Placeholder-Text über `translation.searchFieldPlaceholder` anpassbar. Das bestehende `filterText`-Prop funktioniert weiterhin für Consumer, die ein eigenes Suchfeld bauen.
+- **KanbanBoard — `translation.searchFieldPlaceholder`**: Neuer Translation-Key (Standard `"Search by title or assignee…"`).
+- **KanbanBoard — CSS-Klassen**: `MuiTsKanbanBoard-searchFieldWrapper` und `MuiTsKanbanBoard-searchField`. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
 ### [3.33.1] — 2026-07-18
 
 **Geändert**

package/README.md

@@ -555,6 +555,15 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.34.0] — 2026-07-18
+
+**Added**
+- **KanbanBoard — `showSearchField`**: New boolean prop that renders a built-in `size="small"` search field with a magnifier icon above the board. The board manages the filter state internally — no extra wiring needed. Placeholder text customizable via `translation.searchFieldPlaceholder`. The existing `filterText` prop still works for consumers who build their own search UI.
+- **KanbanBoard — `translation.searchFieldPlaceholder`**: New translation key (default `"Search by title or assignee…"`).
+- **KanbanBoard — CSS classes**: `MuiTsKanbanBoard-searchFieldWrapper` and `MuiTsKanbanBoard-searchField`. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.33.1] — 2026-07-18
 
 **Changed**

package/dist/components/kanban-board/KanbanBoard.d.ts

@@ -1,2 +1,2 @@
 import { type KanbanBoardProps } from "./KanbanBoard.types";
-export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, filterText, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, showSearchField, filterText, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/kanban-board/KanbanBoard.js

@@ -5,138 +5,168 @@ import { KanbanBoardCardDialog as r } from "./KanbanBoardCardDialog.js";
 import { KanbanBoardColumn as i } from "./KanbanBoardColumn.js";
 import { DndContext as a, DragOverlay as o, KeyboardSensor as s, PointerSensor as c, closestCorners as l, useSensor as u, useSensors as d } from "@dnd-kit/core";
 import { arrayMove as f, sortableKeyboardCoordinates as p } from "@dnd-kit/sortable";
-import { Box as m } from "@mui/material";
-import { useEffect as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import m from "@mui/icons-material/Search";
+import { Box as h, InputAdornment as g, TextField as ee } from "@mui/material";
+import { useEffect as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoard.tsx
-function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D, showPriority: O = !0, showAssignee: k = !0, showDueDate: A = !0, showDueDateWarning: j = !0, chipVariant: M = "outlined", filterText: N = "", width: P = "100%", height: F = "100%", translation: I }) {
-	let L = {
+function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: w, enableBuiltinDialogs: T = !0, onTaskCreated: E, onTaskUpdated: D, onTaskDeleted: O, onTaskMoved: k, showPriority: A = !0, showAssignee: j = !0, showDueDate: M = !0, showDueDateWarning: N = !0, chipVariant: P = "outlined", showSearchField: F = !1, filterText: I = "", width: L = "100%", height: R = "100%", translation: z }) {
+	let B = {
 		...t,
-		...I
-	}, [R, z] = g(y);
-	h(() => {
-		z(y);
-	}, [y]);
-	let [B, V] = g(null), [H, U] = g(null), W = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
-	function G({ active: e }) {
-		V(R.find((t) => t.id === e.id) ?? null);
+		...z
+	}, [V, H] = v(x);
+	_(() => {
+		H(x);
+	}, [x]);
+	let [U, W] = v(null), [G, K] = v(null), [q, J] = v(""), Y = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
+	function X({ active: e }) {
+		W(V.find((t) => t.id === e.id) ?? null);
 	}
-	function K({ active: e, over: t }) {
+	function Z({ active: e, over: t }) {
 		if (!t) return;
-		let n = e.id, r = t.id, i = R.find((e) => e.id === n);
+		let n = e.id, r = t.id, i = V.find((e) => e.id === n);
 		if (!i) return;
-		let a = b.find((e) => e.id === r), o = R.find((e) => e.id === r), s = a?.id ?? o?.status;
-		!s || i.status === s || z((e) => e.map((e) => e.id === n ? {
+		let a = S.find((e) => e.id === r), o = V.find((e) => e.id === r), s = a?.id ?? o?.status;
+		!s || i.status === s || H((e) => e.map((e) => e.id === n ? {
 			...e,
 			status: s
 		} : e));
 	}
-	function q({ active: e, over: t }) {
-		let n = B?.status;
-		if (V(null), !t) {
-			z(y);
+	function Q({ active: e, over: t }) {
+		let n = U?.status;
+		if (W(null), !t) {
+			H(x);
 			return;
 		}
-		let r = e.id, i = t.id, a = R.findIndex((e) => e.id === r), o = R.findIndex((e) => e.id === i), s;
-		if (s = a !== -1 && o !== -1 && a !== o ? f(R, a, o) : [...R], z(s), x?.(s), n) {
+		let r = e.id, i = t.id, a = V.findIndex((e) => e.id === r), o = V.findIndex((e) => e.id === i), s;
+		if (s = a !== -1 && o !== -1 && a !== o ? f(V, a, o) : [...V], H(s), C?.(s), n) {
 			let e = s.find((e) => e.id === r);
-			e && e.status !== n && D?.(e, n, e.status);
+			e && e.status !== n && k?.(e, n, e.status);
 		}
 	}
-	function J(e) {
-		C ? U({
+	function te(e) {
+		T ? K({
 			mode: "edit",
 			task: e
-		}) : S?.(e);
+		}) : w?.(e);
 	}
-	function Y(e) {
-		U({
+	function ne(e) {
+		K({
 			mode: "add",
 			columnId: e
 		});
 	}
-	function X(e) {
-		let t = !R.find((t) => t.id === e.id), n = t ? [...R, e] : R.map((t) => t.id === e.id ? e : t);
-		z(n), x?.(n), t ? w?.(e) : T?.(e), U(null);
+	function re(e) {
+		let t = !V.find((t) => t.id === e.id), n = t ? [...V, e] : V.map((t) => t.id === e.id ? e : t);
+		H(n), C?.(n), t ? E?.(e) : D?.(e), K(null);
 	}
-	function Z(e) {
-		let t = R.filter((t) => t.id !== e);
-		z(t), x?.(t), E?.(e), U(null);
+	function ie(e) {
+		let t = V.filter((t) => t.id !== e);
+		H(t), C?.(t), O?.(e), K(null);
 	}
-	function Q(e) {
-		U({
+	function ae(e) {
+		K({
 			mode: "delete",
 			task: e
 		});
 	}
-	let $ = N.trim().toLowerCase();
-	function ee(e) {
+	let $ = (I || q).trim().toLowerCase();
+	function oe(e) {
 		return $ ? e.title.toLowerCase().includes($) || (e.assignee?.toLowerCase().includes($) ?? !1) : !0;
 	}
-	return /* @__PURE__ */ v(m, {
+	return /* @__PURE__ */ b(h, {
 		className: e.root,
 		sx: {
-			width: P,
-			height: F,
+			width: L,
+			height: R,
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden"
 		},
-		children: [/* @__PURE__ */ v(a, {
-			sensors: W,
-			collisionDetection: l,
-			onDragStart: G,
-			onDragOver: K,
-			onDragEnd: q,
-			children: [/* @__PURE__ */ _(m, {
-				className: e.columns,
+		children: [
+			F && /* @__PURE__ */ y(h, {
+				className: e.searchFieldWrapper,
 				sx: {
-					flex: 1,
-					display: "flex",
-					gap: 2,
-					p: 2,
-					overflowX: "auto",
-					overflowY: "hidden",
-					alignItems: "stretch"
+					px: 2,
+					pt: 1.5,
+					pb: .5
 				},
-				children: b.map((e) => {
-					let t = R.filter((t) => t.status === e.id);
-					return /* @__PURE__ */ _(i, {
-						column: e,
-						tasks: t.filter(ee),
-						totalCount: t.length,
-						showPriority: O,
-						showAssignee: k,
-						showDueDate: A,
-						showDueDateWarning: j,
-						chipVariant: M,
-						t: L,
-						enableBuiltinDialogs: C,
-						onCardClick: J,
-						onAddClick: Y
-					}, e.id);
+				children: /* @__PURE__ */ y(ee, {
+					className: e.searchField,
+					size: "small",
+					placeholder: B.searchFieldPlaceholder,
+					value: q,
+					onChange: (e) => J(e.target.value),
+					slotProps: {
+						input: { startAdornment: /* @__PURE__ */ y(g, {
+							position: "start",
+							children: /* @__PURE__ */ y(m, {
+								fontSize: "small",
+								sx: { color: "text.disabled" }
+							})
+						}) },
+						htmlInput: { "aria-label": B.searchFieldPlaceholder }
+					},
+					sx: { width: 280 }
 				})
-			}), /* @__PURE__ */ _(o, { children: B && /* @__PURE__ */ _(n, {
-				task: B,
-				showPriority: O,
-				showAssignee: k,
-				showDueDate: A,
-				showDueDateWarning: j,
-				chipVariant: M,
-				t: L,
-				onCardClick: () => {},
-				isOverlay: !0
-			}) })]
-		}), C && /* @__PURE__ */ _(r, {
-			state: H,
-			columns: b,
-			t: L,
-			onSave: X,
-			onDelete: Z,
-			onRequestDelete: Q,
-			onClose: () => U(null)
-		}, H ? `${H.mode}-${H.mode === "add" ? H.columnId : H.task.id}` : "closed")]
+			}),
+			/* @__PURE__ */ b(a, {
+				sensors: Y,
+				collisionDetection: l,
+				onDragStart: X,
+				onDragOver: Z,
+				onDragEnd: Q,
+				children: [/* @__PURE__ */ y(h, {
+					className: e.columns,
+					sx: {
+						flex: 1,
+						display: "flex",
+						gap: 2,
+						p: 2,
+						overflowX: "auto",
+						overflowY: "hidden",
+						alignItems: "stretch"
+					},
+					children: S.map((e) => {
+						let t = V.filter((t) => t.status === e.id);
+						return /* @__PURE__ */ y(i, {
+							column: e,
+							tasks: t.filter(oe),
+							totalCount: t.length,
+							showPriority: A,
+							showAssignee: j,
+							showDueDate: M,
+							showDueDateWarning: N,
+							chipVariant: P,
+							t: B,
+							enableBuiltinDialogs: T,
+							onCardClick: te,
+							onAddClick: ne
+						}, e.id);
+					})
+				}), /* @__PURE__ */ y(o, { children: U && /* @__PURE__ */ y(n, {
+					task: U,
+					showPriority: A,
+					showAssignee: j,
+					showDueDate: M,
+					showDueDateWarning: N,
+					chipVariant: P,
+					t: B,
+					onCardClick: () => {},
+					isOverlay: !0
+				}) })]
+			}),
+			T && /* @__PURE__ */ y(r, {
+				state: G,
+				columns: S,
+				t: B,
+				onSave: re,
+				onDelete: ie,
+				onRequestDelete: ae,
+				onClose: () => K(null)
+			}, G ? `${G.mode}-${G.mode === "add" ? G.columnId : G.task.id}` : "closed")
+		]
 	});
 }
 //#endregion
-export { y as KanbanBoard };
+export { x as KanbanBoard };

package/dist/components/kanban-board/KanbanBoard.types.d.ts

@@ -37,6 +37,8 @@ export type KanbanBoardTranslation = {
     dialogFieldDueDate: string;
     dialogFieldStatus: string;
     noCardsLabel: string;
+    /** Placeholder text for the built-in search field (`showSearchField={true}`). */
+    searchFieldPlaceholder: string;
 };
 export declare const DEFAULT_KANBAN_BOARD_TRANSLATION: Required<KanbanBoardTranslation>;
 export type KanbanBoardProps = {
@@ -92,12 +94,23 @@ export type KanbanBoardProps = {
      * `"filled"` — solid background, more prominent.
      */
     chipVariant?: "outlined" | "filled";
+    /**
+     * When `true`, renders a built-in `size="small"` search field above the board columns.
+     * The board manages the search state internally — no extra wiring needed.
+     * Customize the placeholder via `translation.searchFieldPlaceholder`.
+     *
+     * For full control over placement, styling, or debouncing, leave this `false` (default)
+     * and pass `filterText` instead.
+     */
+    showSearchField?: boolean;
     /**
      * Filters visible cards by title and assignee (case-insensitive substring match).
      * The consumer is responsible for rendering the search input and passing the string.
      * An empty string or `undefined` shows all cards.
      * Column counters reflect the filtered count; WIP-limit checks always use the
      * unfiltered column total so the over-limit warning is never hidden by a filter.
+     *
+     * Alternative: set `showSearchField={true}` to let the board render a built-in field.
      */
     filterText?: string;
     /** Width of the board. Default: "100%". */

package/dist/components/kanban-board/KanbanBoard.types.js

@@ -13,7 +13,8 @@ var e = {
 	dialogFieldAssignee: "Assignee",
 	dialogFieldDueDate: "Due date",
 	dialogFieldStatus: "Status",
-	noCardsLabel: "No cards"
+	noCardsLabel: "No cards",
+	searchFieldPlaceholder: "Search by title or assignee…"
 };
 //#endregion
 export { e as DEFAULT_KANBAN_BOARD_TRANSLATION };

package/dist/components/kanban-board/kanbanBoardClasses.d.ts

@@ -46,4 +46,8 @@ export declare const kanbanBoardClasses: {
     readonly cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot";
     /** The "+ Add card" button at the bottom of each column. */
     readonly addButton: "MuiTsKanbanBoard-addButton";
+    /** The wrapper Box around the built-in search field (`showSearchField={true}`). */
+    readonly searchFieldWrapper: "MuiTsKanbanBoard-searchFieldWrapper";
+    /** The built-in search TextField (`showSearchField={true}`). */
+    readonly searchField: "MuiTsKanbanBoard-searchField";
 };

package/dist/components/kanban-board/kanbanBoardClasses.js

@@ -13,7 +13,9 @@ var e = {
 	cardAssignee: "MuiTsKanbanBoard-cardAssignee",
 	cardDueDate: "MuiTsKanbanBoard-cardDueDate",
 	cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot",
-	addButton: "MuiTsKanbanBoard-addButton"
+	addButton: "MuiTsKanbanBoard-addButton",
+	searchFieldWrapper: "MuiTsKanbanBoard-searchFieldWrapper",
+	searchField: "MuiTsKanbanBoard-searchField"
 };
 //#endregion
 export { e as kanbanBoardClasses };

package/dist/components/rich-text-editor/RichTextEditorEmojiPicker.js

@@ -1,11 +1,11 @@
 import { EMOJI_CATEGORIES as e } from "./util/emojis.js";
-import { Box as t, InputAdornment as n, Popover as r, TextField as i, Typography as a } from "@mui/material";
-import { useMemo as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "@mui/icons-material/Search";
+import t from "@mui/icons-material/Search";
+import { Box as n, InputAdornment as r, Popover as i, TextField as a, Typography as o } from "@mui/material";
+import { useMemo as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/rich-text-editor/RichTextEditorEmojiPicker.tsx
 function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
-	let [g, _] = s(""), v = o(() => {
+	let [g, _] = c(""), v = s(() => {
 		let t = g.trim().toLowerCase();
 		return t ? e.map((e) => ({
 			...e,
@@ -18,7 +18,7 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 	function b() {
 		p(), _("");
 	}
-	return /* @__PURE__ */ l(r, {
+	return /* @__PURE__ */ u(i, {
 		open: f,
 		anchorEl: d,
 		onClose: b,
@@ -36,32 +36,32 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 			display: "flex",
 			flexDirection: "column"
 		} } },
-		children: [/* @__PURE__ */ c(t, {
+		children: [/* @__PURE__ */ l(n, {
 			sx: {
 				p: 1,
 				borderBottom: 1,
 				borderColor: "divider"
 			},
-			children: /* @__PURE__ */ c(i, {
+			children: /* @__PURE__ */ l(a, {
 				autoFocus: !0,
 				fullWidth: !0,
 				size: "small",
 				placeholder: h.emojiSearchPlaceholder,
 				value: g,
 				onChange: (e) => _(e.target.value),
-				slotProps: { input: { startAdornment: /* @__PURE__ */ c(n, {
+				slotProps: { input: { startAdornment: /* @__PURE__ */ l(r, {
 					position: "start",
-					children: /* @__PURE__ */ c(u, { fontSize: "small" })
+					children: /* @__PURE__ */ l(t, { fontSize: "small" })
 				}) } }
 			})
-		}), /* @__PURE__ */ l(t, {
+		}), /* @__PURE__ */ u(n, {
 			sx: {
 				overflowY: "auto",
 				flex: 1,
 				px: 1,
 				pb: 1
 			},
-			children: [v.map((e) => /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(a, {
+			children: [v.map((e) => /* @__PURE__ */ u(n, { children: [/* @__PURE__ */ l(o, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -71,13 +71,13 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 					px: .5
 				},
 				children: e.label
-			}), /* @__PURE__ */ c(t, {
+			}), /* @__PURE__ */ l(n, {
 				sx: {
 					display: "flex",
 					flexWrap: "wrap",
 					gap: .25
 				},
-				children: e.emojis.map((e) => /* @__PURE__ */ c(t, {
+				children: e.emojis.map((e) => /* @__PURE__ */ l(n, {
 					component: "button",
 					title: e.name,
 					"aria-label": e.name,
@@ -94,7 +94,7 @@ function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
 					},
 					children: e.emoji
 				}, e.emoji))
-			})] }, e.label)), v.length === 0 && /* @__PURE__ */ c(a, {
+			})] }, e.label)), v.length === 0 && /* @__PURE__ */ l(o, {
 				variant: "body2",
 				color: "text.secondary",
 				sx: {