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

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -0,0 +1,65 @@
+export type ColorPickerFormat = "hex" | "rgb" | "hsl";
+/** Clean payload passed to `onChange` alongside the primary hex string — no internal HSV state exposed. */
+export type ColorPickerColorInfo = {
+    hex: string;
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+        a: number;
+    };
+};
+export type ColorPickerTranslation = {
+    formatLabel: string;
+    hexFieldLabel: string;
+    redLabel: string;
+    greenLabel: string;
+    blueLabel: string;
+    hueFieldLabel: string;
+    saturationFieldLabel: string;
+    lightnessFieldLabel: string;
+    alphaFieldLabel: string;
+    eyeDropperLabel: string;
+    savedColorsLabel: string;
+    gradientAreaLabel: string;
+    hueSliderLabel: string;
+};
+export declare const DEFAULT_COLOR_PICKER_TRANSLATION: Required<ColorPickerTranslation>;
+export type ColorPickerProps = {
+    /** Current color — accepts hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), or hsl()/hsla(). */
+    value: string;
+    /** Fires on every change — live while dragging, on every valid keystroke, and on swatch/eyedropper picks — with a normalized hex string plus a clean rgb/hsl breakdown. */
+    onChange: (hex: string, info: ColorPickerColorInfo) => void;
+    /** Fires once per "gesture" instead of continuously: on pointer-up after a drag, on blur after typing, or immediately for atomic actions (swatch click, eyedropper). Same dual-callback pattern as MUI's own `Slider` — use this instead of debouncing `onChange` yourself for expensive side effects (persisting to a backend, etc.). */
+    onChangeCommitted?: (hex: string, info: ColorPickerColorInfo) => void;
+    /** Initial display format for the value field — uncontrolled after mount (default: 'hex'). */
+    defaultFormat?: ColorPickerFormat;
+    /** Fires when the user switches the display format via the dropdown. */
+    onFormatChange?: (format: ColorPickerFormat) => void;
+    /** Shows the alpha slider and opacity field (default: true). */
+    showAlpha?: boolean;
+    /** Shows the eyedropper tool — auto-hidden when the browser doesn't support the EyeDropper API regardless of this prop (default: true). */
+    showEyeDropper?: boolean;
+    /** Shows the eyedropper button + hue/alpha slider row (default: true). Set `false` for a minimal gradient-area-only picker. */
+    showSliderSection?: boolean;
+    /** Shows the format dropdown + hex/RGB/HSL/alpha value fields row (default: true). Set `false` for a slider-only picker. */
+    showInputSection?: boolean;
+    /** Swatches shown below the picker — click to select. Purely a display list; the caller owns persistence. */
+    savedColors?: string[];
+    disabled?: boolean;
+    /** Scales the gradient area, slider thickness, and swatch size (default: 'medium'). */
+    colorGradientSize?: "small" | "medium";
+    /** Size of the format dropdown and value/alpha input fields, independent of `colorGradientSize` (default: 'medium'). */
+    inputSize?: "small" | "medium";
+    /** Overall panel width in px (default: 280). */
+    width?: number;
+    /** Form-integration: renders a hidden input so the value participates in native/React Hook Form/Formik form submission. */
+    name?: string;
+    translation?: Partial<ColorPickerTranslation>;
+};

package/dist/components/color-picker/ColorPicker.types.js

@@ -0,0 +1,18 @@
+//#region src/components/color-picker/ColorPicker.types.ts
+var e = {
+	formatLabel: "Color format",
+	hexFieldLabel: "Hex value",
+	redLabel: "Red",
+	greenLabel: "Green",
+	blueLabel: "Blue",
+	hueFieldLabel: "Hue",
+	saturationFieldLabel: "Saturation",
+	lightnessFieldLabel: "Lightness",
+	alphaFieldLabel: "Alpha",
+	eyeDropperLabel: "Pick color from screen",
+	savedColorsLabel: "Saved colors",
+	gradientAreaLabel: "Saturation and brightness",
+	hueSliderLabel: "Hue"
+};
+//#endregion
+export { e as DEFAULT_COLOR_PICKER_TRANSLATION };

package/dist/components/color-picker/util/colorConversion.util.d.ts

@@ -0,0 +1,51 @@
+export type RgbaColor = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type HsvaColor = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export type HslaColor = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function rgbaToHex({ r, g, b, a }: RgbaColor): string;
+export declare function hexToRgba(hex: string): RgbaColor | null;
+export declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHsv(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function hslToRgb(h: number, s: number, l: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHsl(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare function hsvaToRgba({ h, s, v, a }: HsvaColor): RgbaColor;
+export declare function rgbaToHsva({ r, g, b, a }: RgbaColor): HsvaColor;
+export declare function hsvaToHsla({ h, s, v, a }: HsvaColor): HslaColor;
+export declare function hslaToHsva({ h, s, l, a }: HslaColor): HsvaColor;
+/** Accepts #hex (3/4/6/8 digits), rgb()/rgba(), and hsl()/hsla() — returns null when unparseable. */
+export declare function parseColorString(input: string): RgbaColor | null;
+export declare function formatRgbString({ r, g, b, a }: RgbaColor): string;
+export declare function formatHslString({ h, s, l, a }: HslaColor): string;
+/** WCAG-style luminance heuristic — picks black or white text for readable contrast on a given background. */
+export declare function getContrastTextColor(r: number, g: number, b: number): "#000000" | "#ffffff";

package/dist/components/color-picker/util/colorConversion.util.js

@@ -0,0 +1,166 @@
+//#region src/components/color-picker/util/colorConversion.util.ts
+function e(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function t(t) {
+	return e(Math.round(t), 0, 255).toString(16).padStart(2, "0");
+}
+function n({ r: e, g: n, b: r, a: i }) {
+	let a = `#${t(e)}${t(n)}${t(r)}`;
+	return i < 1 ? `${a}${t(i * 255)}` : a;
+}
+function r(e) {
+	let t = e.trim().replace(/^#/, ""), n, r, i, a = 1;
+	if (t.length === 3 || t.length === 4) n = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), i = parseInt(t[2] + t[2], 16), t.length === 4 && (a = parseInt(t[3] + t[3], 16) / 255);
+	else if (t.length === 6 || t.length === 8) n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), t.length === 8 && (a = parseInt(t.slice(6, 8), 16) / 255);
+	else return null;
+	return [
+		n,
+		r,
+		i,
+		a
+	].some((e) => Number.isNaN(e)) ? null : {
+		r: n,
+		g: r,
+		b: i,
+		a
+	};
+}
+function i(e, t, n) {
+	let r = t / 100, i = n / 100, a = i * r, o = a * (1 - Math.abs(e / 60 % 2 - 1)), s = i - a, [c, l, u] = e < 60 ? [
+		a,
+		o,
+		0
+	] : e < 120 ? [
+		o,
+		a,
+		0
+	] : e < 180 ? [
+		0,
+		a,
+		o
+	] : e < 240 ? [
+		0,
+		o,
+		a
+	] : e < 300 ? [
+		o,
+		0,
+		a
+	] : [
+		a,
+		0,
+		o
+	];
+	return {
+		r: (c + s) * 255,
+		g: (l + s) * 255,
+		b: (u + s) * 255
+	};
+}
+function a(e, t, n) {
+	let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = o - Math.min(r, i, a), c = 0;
+	s !== 0 && (c = o === r ? 60 * ((i - a) / s % 6) : o === i ? 60 * ((a - r) / s + 2) : 60 * ((r - i) / s + 4)), c < 0 && (c += 360);
+	let l = o === 0 ? 0 : s / o;
+	return {
+		h: c,
+		s: l * 100,
+		v: o * 100
+	};
+}
+function o(e, t, n) {
+	let r = t / 100, i = n / 100, a = (1 - Math.abs(2 * i - 1)) * r, o = a * (1 - Math.abs(e / 60 % 2 - 1)), s = i - a / 2, [c, l, u] = e < 60 ? [
+		a,
+		o,
+		0
+	] : e < 120 ? [
+		o,
+		a,
+		0
+	] : e < 180 ? [
+		0,
+		a,
+		o
+	] : e < 240 ? [
+		0,
+		o,
+		a
+	] : e < 300 ? [
+		o,
+		0,
+		a
+	] : [
+		a,
+		0,
+		o
+	];
+	return {
+		r: (c + s) * 255,
+		g: (l + s) * 255,
+		b: (u + s) * 255
+	};
+}
+function s(e, t, n) {
+	let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = Math.min(r, i, a), c = (o + s) / 2, l = o - s, u = 0, d = 0;
+	return l !== 0 && (d = c > .5 ? l / (2 - o - s) : l / (o + s), u = o === r ? 60 * ((i - a) / l % 6) : o === i ? 60 * ((a - r) / l + 2) : 60 * ((r - i) / l + 4)), u < 0 && (u += 360), {
+		h: u,
+		s: d * 100,
+		l: c * 100
+	};
+}
+function c({ h: e, s: t, v: n, a: r }) {
+	let { r: a, g: o, b: s } = i(e, t, n);
+	return {
+		r: a,
+		g: o,
+		b: s,
+		a: r
+	};
+}
+function l({ r: e, g: t, b: n, a: r }) {
+	let { h: i, s: o, v: s } = a(e, t, n);
+	return {
+		h: i,
+		s: o,
+		v: s,
+		a: r
+	};
+}
+function u({ h: e, s: t, v: n, a: r }) {
+	let { r: a, g: o, b: c } = i(e, t, n);
+	return {
+		...s(a, o, c),
+		a: r
+	};
+}
+function d({ h: e, s: t, l: n, a: r }) {
+	let { r: i, g: s, b: c } = o(e, t, n);
+	return {
+		...a(i, s, c),
+		a: r
+	};
+}
+function f(e) {
+	let t = e.trim();
+	if (t.startsWith("#")) return r(t);
+	let n = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/i);
+	if (n) return {
+		r: Number(n[1]),
+		g: Number(n[2]),
+		b: Number(n[3]),
+		a: n[4] === void 0 ? 1 : Number(n[4])
+	};
+	let i = t.match(/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)$/i);
+	if (i) {
+		let { r: e, g: t, b: n } = o(Number(i[1]), Number(i[2]), Number(i[3]));
+		return {
+			r: e,
+			g: t,
+			b: n,
+			a: i[4] === void 0 ? 1 : Number(i[4])
+		};
+	}
+	return null;
+}
+//#endregion
+export { e as clamp, r as hexToRgba, d as hslaToHsva, u as hsvaToHsla, c as hsvaToRgba, f as parseColorString, n as rgbaToHex, l as rgbaToHsva };

package/dist/components/rich-text-editor/RichTextEditor.d.ts

@@ -5,4 +5,4 @@ declare module "@tiptap/core" {
     }
 }
 import { type RichTextEditorProps } from "./RichTextEditor.types";
-export declare function RichTextEditor({ disabled, error, height, helperText, maxCharacters, name, placeholder, readonly, showCharacterCount, showToolbar, showWordCount, toolbarConfig, translation, value, width, onBlur, onChange, onFocus, onMarkdownChange, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditor({ disabled, error, height, helperText, maxCharacters, mentionItems, mentionTriggerChar, name, onMentionSearch, placeholder, readonly, showCharacterCount, showToolbar, showWordCount, toolbarConfig, translation, value, width, onBlur, onChange, onFocus, onMarkdownChange, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,56 +1,83 @@
 import { normalizeSize as e } from "../shared/normalizeSize.js";
 import { DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG as t, DEFAULT_RICH_TEXT_EDITOR_TRANSLATION as n } from "./RichTextEditor.types.js";
-import { RichTextEditorContent as r } from "./RichTextEditorContent.js";
-import { RichTextEditorToolbar as i } from "./RichTextEditorToolbar.js";
-import { RichTextEditorFooter as a } from "./RichTextEditorFooter.js";
-import { useEffect as o, useRef as s, useState as c } from "react";
-import { Box as l, Divider as u, Paper as d } from "@mui/material";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useEditor as h } from "@tiptap/react";
-import { StarterKit as g } from "@tiptap/starter-kit";
-import { TextStyle as _ } from "@tiptap/extension-text-style";
-import { Color as v } from "@tiptap/extension-color";
-import { Highlight as ee } from "@tiptap/extension-highlight";
-import { Placeholder as y } from "@tiptap/extension-placeholder";
-import { CharacterCount as b } from "@tiptap/extension-character-count";
-import { TableKit as x } from "@tiptap/extension-table";
-import { Image as S } from "@tiptap/extension-image";
-import { Markdown as C } from "tiptap-markdown";
+import { buildMentionSuggestion as r } from "./RichTextEditorMentionSuggestion.js";
+import { RichTextEditorContent as i } from "./RichTextEditorContent.js";
+import { RichTextEditorToolbar as a } from "./RichTextEditorToolbar.js";
+import { RichTextEditorFooter as ee } from "./RichTextEditorFooter.js";
+import { useEffect as o, useMemo as te, useRef as s, useState as c } from "react";
+import { Box as l, Divider as u, Paper as ne } from "@mui/material";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useEditor as re } from "@tiptap/react";
+import { Mention as m } from "@tiptap/extension-mention";
+import { StarterKit as h } from "@tiptap/starter-kit";
+import { TextStyle as ie } from "@tiptap/extension-text-style";
+import { Color as g } from "@tiptap/extension-color";
+import { Highlight as _ } from "@tiptap/extension-highlight";
+import { Placeholder as ae } from "@tiptap/extension-placeholder";
+import { CharacterCount as v } from "@tiptap/extension-character-count";
+import { TableKit as oe } from "@tiptap/extension-table";
+import { Image as y } from "@tiptap/extension-image";
+import { Markdown as b } from "tiptap-markdown";
 //#region src/components/rich-text-editor/RichTextEditor.tsx
-function w({ disabled: w = !1, error: T = !1, height: E, helperText: D, maxCharacters: O, name: k, placeholder: A, readonly: j = !1, showCharacterCount: M = !1, showToolbar: N = !0, showWordCount: P = !1, toolbarConfig: F, translation: I, value: L, width: R, onBlur: z, onChange: B, onFocus: V, onMarkdownChange: te }) {
+function x({ disabled: x = !1, error: S = !1, height: se, helperText: C, maxCharacters: w, mentionItems: T, mentionTriggerChar: E = "@", name: D, onMentionSearch: O, placeholder: k, readonly: A = !1, showCharacterCount: j = !1, showToolbar: M = !0, showWordCount: N = !1, toolbarConfig: P, translation: F, value: I, width: L, onBlur: R, onChange: z, onFocus: B, onMarkdownChange: V }) {
 	let H = {
 		...n,
-		...I
+		...F
 	}, U = {
 		...t,
-		...F
-	}, [W, G] = c(!1), [K, q] = c(!1), J = s(K);
+		...P
+	}, [W, G] = c(!1), [K, ce] = c(!1), q = s(K), J = s(T ?? []);
 	o(() => {
-		J.current = K;
+		J.current = T ?? [];
+	}, [T]), o(() => {
+		q.current = K;
 	}, [K]);
-	let Y = e(E), X = e(R), Z = Y === "auto", Q = Z ? void 0 : Y ?? 200, ne = O !== void 0 && O > 0 || M || P, $ = h({
+	let Y = e(se), le = e(L), X = Y === "auto", ue = X ? void 0 : Y ?? 200, Z = T !== void 0 || O !== void 0, Q = te(() => Z ? m.configure({
+		HTMLAttributes: { class: "rte-mention" },
+		renderHTML({ options: e, node: t }) {
+			return [
+				"span",
+				{
+					...e.HTMLAttributes,
+					"data-id": t.attrs.id,
+					"data-label": t.attrs.label
+				},
+				`${E}${t.attrs.label}`
+			];
+		},
+		suggestion: r({
+			getItems: () => J.current,
+			onMentionSearch: O,
+			noResultsLabel: H.mentionNoResults ?? "No results"
+		})
+	}) : null, [
+		Z,
+		E,
+		O
+	]), de = w !== void 0 && w > 0 || j || N, $ = re({
 		shouldRerenderOnTransaction: !0,
 		extensions: [
-			g.configure({ link: { openOnClick: !1 } }),
-			_,
-			v,
-			ee.configure({ multicolor: !0 }),
-			C.configure({
+			h.configure({ link: { openOnClick: !1 } }),
+			ie,
+			g,
+			_.configure({ multicolor: !0 }),
+			b.configure({
 				transformPastedText: !0,
 				transformCopiedText: !1
 			}),
-			y.configure({ placeholder: A ?? "" }),
-			...U.showTableButton ? [x] : [],
-			...U.showImageButton ? [S.configure({
+			ae.configure({ placeholder: k ?? "" }),
+			...U.showTableButton ? [oe] : [],
+			...U.showImageButton ? [y.configure({
 				inline: !1,
 				allowBase64: !0
 			})] : [],
-			...ne ? O !== void 0 && O > 0 ? [b.configure({ limit: O })] : [b] : []
+			...Q ? [Q] : [],
+			...de ? w !== void 0 && w > 0 ? [v.configure({ limit: w })] : [v] : []
 		],
-		content: L ?? "",
-		editable: !w && !j,
+		content: I ?? "",
+		editable: !x && !A,
 		editorProps: { handlePaste(e, t) {
-			if (!J.current) return !1;
+			if (!q.current) return !1;
 			let n = t.clipboardData?.getData("text/plain");
 			if (!n) return !1;
 			t.preventDefault();
@@ -58,26 +85,26 @@ function w({ disabled: w = !1, error: T = !1, height: E, helperText: D, maxChara
 			return e.dispatch(r.tr.insertText(n, r.selection.from, r.selection.to)), !0;
 		} },
 		onUpdate({ editor: e }) {
-			B?.(e.getHTML()), te?.(e.storage.markdown.getMarkdown());
+			z?.(e.getHTML()), V?.(e.storage.markdown.getMarkdown());
 		},
 		onBlur() {
-			z?.();
+			R?.();
 		},
 		onFocus() {
-			V?.();
+			B?.();
 		}
 	});
 	o(() => {
-		!$ || L === void 0 || $.getHTML() !== L && $.commands.setContent(L, { emitUpdate: !1 });
-	}, [$, L]), o(() => {
-		$ && $.setEditable(!w && !j);
+		!$ || I === void 0 || $.getHTML() !== I && $.commands.setContent(I, { emitUpdate: !1 });
+	}, [$, I]), o(() => {
+		$ && $.setEditable(!x && !A);
 	}, [
 		$,
-		w,
-		j
+		x,
+		A
 	]);
-	let re = $?.storage.characterCount?.characters?.() ?? 0, ie = $?.storage.characterCount?.words?.() ?? 0, ae = M || O !== void 0 && O > 0 || P || !!D;
-	return /* @__PURE__ */ m(l, {
+	let fe = $?.storage.characterCount?.characters?.() ?? 0, pe = $?.storage.characterCount?.words?.() ?? 0, me = j || w !== void 0 && w > 0 || N || !!C;
+	return /* @__PURE__ */ p(l, {
 		sx: W ? {
 			position: "fixed",
 			top: 0,
@@ -90,60 +117,60 @@ function w({ disabled: w = !1, error: T = !1, height: E, helperText: D, maxChara
 			bgcolor: "background.default",
 			p: 1
 		} : {
-			width: X ?? "100%",
-			...Z ? {
+			width: le ?? "100%",
+			...X ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
 			} : {}
 		},
 		children: [
-			/* @__PURE__ */ m(d, {
+			/* @__PURE__ */ p(ne, {
 				variant: "outlined",
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...W || Z ? { flex: 1 } : { height: Q },
-					borderColor: T ? "error.main" : void 0,
+					...W || X ? { flex: 1 } : { height: ue },
+					borderColor: S ? "error.main" : void 0,
 					"&:focus-within": {
-						borderColor: T ? "error.main" : "primary.main",
+						borderColor: S ? "error.main" : "primary.main",
 						borderWidth: 2
 					}
 				},
-				children: [N && !j && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
+				children: [M && !A && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(a, {
 					editor: $,
 					toolbarConfig: U,
 					translation: H,
-					disabled: w,
+					disabled: x,
 					isFullscreen: W,
 					onToggleFullscreen: () => G((e) => !e),
 					pasteAsPlainText: K,
-					onTogglePasteAsPlainText: () => q((e) => !e)
-				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(r, {
+					onTogglePasteAsPlainText: () => ce((e) => !e)
+				}), /* @__PURE__ */ f(u, {})] }), /* @__PURE__ */ f(i, {
 					editor: $,
-					error: T,
-					disabled: w,
-					readonly: j
+					error: S,
+					disabled: x,
+					readonly: A
 				})]
 			}),
-			ae && /* @__PURE__ */ p(a, {
-				helperText: D,
-				error: T,
-				showCharacterCount: M || O !== void 0 && O > 0,
-				charCount: re,
-				maxCharacters: O && O > 0 ? O : void 0,
-				showWordCount: P,
-				wordCount: ie,
+			me && /* @__PURE__ */ f(ee, {
+				helperText: C,
+				error: S,
+				showCharacterCount: j || w !== void 0 && w > 0,
+				charCount: fe,
+				maxCharacters: w && w > 0 ? w : void 0,
+				showWordCount: N,
+				wordCount: pe,
 				translation: H
 			}),
-			k && /* @__PURE__ */ p("input", {
+			D && /* @__PURE__ */ f("input", {
 				type: "hidden",
-				name: k,
+				name: D,
 				value: $ ? $.getHTML() : ""
 			})
 		]
 	});
 }
 //#endregion
-export { w as RichTextEditor };
+export { x as RichTextEditor };

package/dist/components/rich-text-editor/RichTextEditor.types.d.ts

@@ -1,3 +1,7 @@
+export type MentionItem = {
+    id: string;
+    label: string;
+};
 export type RichTextEditorToolbarConfig = {
     showBold?: boolean;
     showItalic?: boolean;
@@ -99,6 +103,8 @@ export type RichTextEditorTranslation = {
     markdownDialogCopy?: string;
     /** @since 3.8.0 */
     markdownDialogCopied?: string;
+    /** Text shown in mention dropdown when no items match the query @since 3.14.0 */
+    mentionNoResults?: string;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TRANSLATION: Required<RichTextEditorTranslation>;
 export type RichTextEditorProps = {
@@ -121,6 +127,24 @@ export type RichTextEditorProps = {
     value?: string;
     /** Breite des Editors. Zahlen → px. "auto" oder leer → 100% des Elternelements. */
     width?: number | string;
+    /**
+     * List of items for @-mention autocomplete. The Mention extension is only active when this prop is provided.
+     * Used for client-side filtering when `onMentionSearch` is not provided.
+     * @since 3.14.0
+     */
+    mentionItems?: MentionItem[];
+    /**
+     * Custom search/filter function called on each keystroke after @.
+     * When provided, `mentionItems` is ignored for filtering — return the relevant subset.
+     * Supports async for server-side search.
+     * @since 3.14.0
+     */
+    onMentionSearch?: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+    /**
+     * Character that triggers the mention autocomplete popup. Default: "@"
+     * @since 3.14.0
+     */
+    mentionTriggerChar?: string;
     onBlur?: () => void;
     onChange?: (value: string) => void;
     onFocus?: () => void;

package/dist/components/rich-text-editor/RichTextEditor.types.js

@@ -79,7 +79,8 @@ var e = {
 	markdownDialogApply: "Apply",
 	markdownDialogCancel: "Cancel",
 	markdownDialogCopy: "Copy",
-	markdownDialogCopied: "Copied!"
+	markdownDialogCopied: "Copied!",
+	mentionNoResults: "No results"
 };
 //#endregion
 export { e as DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG, t as DEFAULT_RICH_TEXT_EDITOR_TRANSLATION };

package/dist/components/rich-text-editor/RichTextEditorMentionList.d.ts

@@ -0,0 +1,11 @@
+import type { MentionItem } from "./RichTextEditor.types";
+export type MentionListProps = {
+    items: MentionItem[];
+    noResultsLabel: string;
+    clientRect: (() => DOMRect | null) | null;
+    onSelect: (item: MentionItem) => void;
+};
+export type MentionListRef = {
+    onKeyDown: (event: KeyboardEvent) => boolean;
+};
+export declare const RichTextEditorMentionList: import("react").ForwardRefExoticComponent<MentionListProps & import("react").RefAttributes<MentionListRef>>;

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

@@ -0,0 +1,54 @@
+import { forwardRef as e, useEffect as t, useImperativeHandle as n, useRef as r, useState as i } from "react";
+import { List as a, ListItemButton as o, Paper as s, Popper as c, Typography as l } from "@mui/material";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/rich-text-editor/RichTextEditorMentionList.tsx
+var d = e(function({ items: e, noResultsLabel: d, clientRect: f, onSelect: p }, m) {
+	let [h, g] = i(0), [_, v] = i(e), y = r(null);
+	e !== _ && (v(e), g(0)), t(() => {
+		(y.current?.children[h])?.scrollIntoView({ block: "nearest" });
+	}, [h]), n(m, () => ({ onKeyDown(t) {
+		return t.key === "ArrowUp" ? (g((t) => (t - 1 + e.length) % e.length), !0) : t.key === "ArrowDown" ? (g((t) => (t + 1) % e.length), !0) : t.key === "Enter" ? (e[h] && p(e[h]), !0) : !1;
+	} }));
+	let b = f ? { getBoundingClientRect: f } : null;
+	return /* @__PURE__ */ u(c, {
+		open: !!b,
+		anchorEl: b,
+		placement: "bottom-start",
+		modifiers: [{
+			name: "offset",
+			options: { offset: [0, 4] }
+		}],
+		style: { zIndex: 1400 },
+		children: /* @__PURE__ */ u(s, {
+			elevation: 4,
+			sx: {
+				maxHeight: 240,
+				overflow: "auto",
+				minWidth: 180
+			},
+			children: e.length === 0 ? /* @__PURE__ */ u(l, {
+				variant: "body2",
+				sx: {
+					px: 2,
+					py: 1,
+					color: "text.secondary"
+				},
+				children: d
+			}) : /* @__PURE__ */ u(a, {
+				ref: y,
+				dense: !0,
+				disablePadding: !0,
+				children: e.map((e, t) => /* @__PURE__ */ u(o, {
+					selected: t === h,
+					onMouseDown: (t) => {
+						t.preventDefault(), p(e);
+					},
+					onMouseEnter: () => g(t),
+					children: e.label
+				}, e.id))
+			})
+		})
+	});
+});
+//#endregion
+export { d as RichTextEditorMentionList };