@webority/support-react 0.13.1 → 0.13.4

package/dist/support-react.js

@@ -1,14 +1,14 @@
 import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
-import { AppAlert as c, AppAvatar as l, AppBadge as u, AppButton as d, AppCard as f, AppCopyButton as p, AppDataTable as m, AppFileAttachment as h, AppIcon as g, AppInfoList as _, AppInput as v, AppLink as y, AppModal as b, AppSearch as x, AppSelect as S, AppSkeleton as C, AppSpinner as w, AppStatusBadge as T, AppTableEmptyState as E, AppTabs as D, AppTextarea as O, usePagination as k } from "@webority/ui-react";
-import { toBlob as A } from "html-to-image";
-import { Fragment as ee, jsx as j, jsxs as M } from "react/jsx-runtime";
+import { AppAlert as c, AppAvatar as l, AppBadge as u, AppButton as d, AppCard as f, AppCopyButton as p, AppDataTable as m, AppFileAttachment as h, AppIcon as g, AppInfoList as _, AppInput as v, AppLink as y, AppModal as b, AppSearch as x, AppSelect as S, AppSkeleton as C, AppSpinner as w, AppStatusBadge as T, AppTableEmptyState as E, AppTabs as D, AppTextarea as O } from "@webority/ui-react";
+import { toBlob as k } from "html-to-image";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
 //#region src/client.js
 var N = "Something went wrong. Please try again.", P = class extends Error {
 	constructor(e, t, n) {
 		super(t), this.name = "SupportApiError", this.code = e, this.status = n;
 	}
 };
-async function te(e) {
+async function F(e) {
 	if (e && typeof Blob < "u" && e instanceof Blob) try {
 		return JSON.parse(await e.text());
 	} catch {
@@ -21,63 +21,69 @@ async function te(e) {
 	}
 	return e ?? null;
 }
-async function ne(e) {
+async function I(e) {
 	if (e instanceof P) return e;
 	let t = e?.response;
 	if (!t) return new P("network", N);
-	let n = await te(t.data);
+	let n = await F(t.data);
 	return new P(typeof n?.code == "string" && n.code ? n.code : "unknown", typeof n?.message == "string" && n.message ? n.message : N, t.status);
 }
-async function F(e) {
+async function L(e) {
 	try {
 		return (await e()).data;
 	} catch (e) {
-		throw await ne(e);
+		throw await I(e);
 	}
 }
-function I(e, t, n) {
+function R(e, t, n) {
 	n != null && String(n).trim() !== "" && e.append(t, String(n));
 }
-function L(e, t, n, r) {
+function z(e, t, n, r) {
 	(n ?? []).forEach((n, i) => {
 		let a = n?.name || `${r}-${i + 1}.png`;
 		e.append(t, n, a);
 	});
 }
-function re(e, t = "/api/support") {
+function ee(e, t = "/api/support") {
 	let n = t.replace(/\/+$/, ""), r = (e) => `${n}/tickets/${encodeURIComponent(e)}`;
 	return {
-		getConfig: () => F(() => e.get(`${n}/settings`)),
-		listTickets: () => F(() => e.get(`${n}/tickets`)),
-		getTicket: (t) => F(() => e.get(r(t))),
+		getConfig: () => L(() => e.get(`${n}/settings`)),
+		listTickets: ({ status: t, search: r, page: i, pageSize: a } = {}) => {
+			let o = new URLSearchParams();
+			R(o, "status", t), R(o, "search", r?.trim()), R(o, "page", i), R(o, "pageSize", a);
+			let s = o.toString();
+			return L(() => e.get(`${n}/tickets${s ? `?${s}` : ""}`));
+		},
+		getTicketCounts: () => L(() => e.get(`${n}/tickets/counts`)),
+		getTicket: (t) => L(() => e.get(r(t))),
 		createTicket: ({ category: t, subject: r, body: i, pageUrl: a, userAgent: o, appVersion: s, files: c, screenshots: l }) => {
 			let u = new FormData();
-			return u.append("category", t ?? ""), u.append("subject", r ?? ""), u.append("body", i ?? ""), I(u, "pageUrl", a), I(u, "userAgent", o), I(u, "appVersion", s), L(u, "files", c, "file"), L(u, "screenshots", l, "screenshot"), F(() => e.post(`${n}/tickets`, u));
+			return u.append("category", t ?? ""), u.append("subject", r ?? ""), u.append("body", i ?? ""), R(u, "pageUrl", a), R(u, "userAgent", o), R(u, "appVersion", s), z(u, "files", c, "file"), z(u, "screenshots", l, "screenshot"), L(() => e.post(`${n}/tickets`, u));
 		},
 		reply: (t, { body: n, files: i, screenshots: a }) => {
 			let o = new FormData();
-			return o.append("body", n ?? ""), L(o, "files", i, "file"), L(o, "screenshots", a, "screenshot"), F(() => e.post(`${r(t)}/replies`, o));
+			return o.append("body", n ?? ""), z(o, "files", i, "file"), z(o, "screenshots", a, "screenshot"), L(() => e.post(`${r(t)}/replies`, o));
 		},
-		reopen: (t) => F(() => e.post(`${r(t)}/reopen`)),
+		reopen: (t) => L(() => e.post(`${r(t)}/reopen`)),
 		rate: (t, { satisfaction: n, comment: i }) => {
 			let a = { satisfaction: n };
-			return i != null && i.trim() !== "" && (a.comment = i.trim()), F(() => e.post(`${r(t)}/rating`, a));
+			return i != null && i.trim() !== "" && (a.comment = i.trim()), L(() => e.post(`${r(t)}/rating`, a));
 		},
-		fetchAttachment: (t) => F(() => e.get(`${n}/attachments/${encodeURIComponent(t)}`, { responseType: "blob" }))
+		fetchAttachment: (t) => L(() => e.get(`${n}/attachments/${encodeURIComponent(t)}`, { responseType: "blob" }))
 	};
 }
 //#endregion
 //#region src/context.js
-var ie = e(null);
-function ae() {
-	let e = n(ie);
+var B = e(null);
+function V() {
+	let e = n(B);
 	if (!e) throw Error("Support components and hooks must be used inside <SupportProvider>.");
 	return e;
 }
-function R() {
-	return ae().client;
+function H() {
+	return V().client;
 }
-function z(e, n, i = !0) {
+function U(e, n, i = !0) {
 	let [a, c] = s({
 		data: null,
 		loading: i,
@@ -126,8 +132,8 @@ function z(e, n, i = !0) {
 		setData: m
 	};
 }
-function B() {
-	let { loadConfig: e } = ae(), { data: t, loading: n, error: r, reload: i } = z(e, "config");
+function W() {
+	let { loadConfig: e } = V(), { data: t, loading: n, error: r, reload: i } = U(e, "config");
 	return {
 		config: t,
 		loading: n,
@@ -135,17 +141,39 @@ function B() {
 		reload: i
 	};
 }
-function V() {
-	let e = R(), { data: t, loading: n, error: r, reload: i } = z(() => e.listTickets(), "tickets");
+function te(e = {}) {
+	let t = H(), { status: n, search: r, page: i, pageSize: a } = e, { data: o, loading: s, error: c, reload: l } = U(() => t.listTickets({
+		status: n,
+		search: r,
+		page: i,
+		pageSize: a
+	}), JSON.stringify([
+		"tickets",
+		n ?? null,
+		r ?? null,
+		i ?? null,
+		a ?? null
+	]));
 	return {
-		tickets: t ?? [],
+		tickets: o?.items ?? [],
+		totalCount: o?.totalCount ?? 0,
+		totalPages: o?.totalPages ?? 0,
+		loading: s,
+		error: c,
+		reload: l
+	};
+}
+function ne() {
+	let e = H(), { data: t, loading: n, error: r, reload: i } = U(() => e.getTicketCounts(), "ticket-counts");
+	return {
+		counts: t,
 		loading: n,
 		error: r,
 		reload: i
 	};
 }
-function H(e) {
-	let n = R(), { data: r, loading: i, error: a, reload: o, setData: s } = z(() => n.getTicket(e), e ?? "", !!e), c = t(async (e) => {
+function G(e) {
+	let n = H(), { data: r, loading: i, error: a, reload: o, setData: s } = U(() => n.getTicket(e), e ?? "", !!e), c = t(async (e) => {
 		let t = await e();
 		return s(t), t;
 	}, [s]);
@@ -173,7 +201,7 @@ function H(e) {
 }
 //#endregion
 //#region src/lib/format.js
-var oe = new Intl.DateTimeFormat(void 0, {
+var re = new Intl.DateTimeFormat(void 0, {
 	day: "numeric",
 	month: "short",
 	year: "numeric",
@@ -181,12 +209,12 @@ var oe = new Intl.DateTimeFormat(void 0, {
 	minute: "2-digit",
 	timeZoneName: "short"
 });
-function U(e) {
+function K(e) {
 	if (!e) return "-";
 	let t = new Date(e);
-	return Number.isNaN(t.getTime()) ? "-" : oe.format(t);
+	return Number.isNaN(t.getTime()) ? "-" : re.format(t);
 }
-function W(e) {
+function q(e) {
 	if (!Number.isFinite(e) || e < 0) return "-";
 	if (e < 1024) return `${e} B`;
 	if (e < 1024 * 1024) return `${Math.round(e / 1024)} KB`;
@@ -195,11 +223,10 @@ function W(e) {
 }
 //#endregion
 //#region src/lib/files.js
-function se(e) {
-	let t = e?.allowedContentTypes ?? [];
-	return t.length > 0 ? t.join(",") : void 0;
+function ie(e) {
+	return (e?.allowedContentTypes ?? []).join(",");
 }
-function ce(e, t) {
+function ae(e, t) {
 	if (t.length === 0) return !0;
 	let n = (e || "").toLowerCase();
 	return t.some((e) => {
@@ -207,17 +234,17 @@ function ce(e, t) {
 		return t.endsWith("/*") ? n.startsWith(t.slice(0, -1)) : n === t;
 	});
 }
-function G(e, t) {
+function J(e, t) {
 	let n = e ?? [], r = t?.maxAttachmentsPerMessage ?? 0, i = t?.maxAttachmentBytes ?? 0, a = t?.allowedContentTypes ?? [];
 	if (r > 0 && n.length > r) return r === 1 ? "You can attach one file." : `You can attach up to ${r} files.`;
 	for (let e of n) {
 		let t = e.name || "This file";
-		if (!ce(e.type, a)) return `${t} is a file type we cannot accept.`;
-		if (i > 0 && e.size > i) return `${t} is larger than ${W(i)}.`;
+		if (!ae(e.type, a)) return `${t} is a file type we cannot accept.`;
+		if (i > 0 && e.size > i) return `${t} is larger than ${q(i)}.`;
 	}
 	return null;
 }
-function K(e) {
+function Y(e) {
 	let t = Array.from(e.clipboardData?.items ?? []), n = Date.now();
 	return t.filter((e) => e.kind === "file" && e.type.startsWith("image/")).map((e) => e.getAsFile()).filter(Boolean).map((e, t) => {
 		let r = (e.type.split("/")[1] || "png").replace("jpeg", "jpg");
@@ -226,8 +253,8 @@ function K(e) {
 }
 //#endregion
 //#region src/components/AttachmentField.jsx
-function q({ id: e, label: t = "Attachments", files: n, onChange: r, config: i, error: a }) {
-	let o = i?.maxAttachmentBytes ?? 0, s = o > 0 ? Math.round(o / (1024 * 1024) * 10) / 10 : void 0;
+function X({ id: e, label: t = "Attachments", files: n, onChange: r, config: i, error: a }) {
+	let o = i?.maxAttachmentBytes ?? 0, s = o > 0 ? Math.max(.1, Math.round(o / (1024 * 1024) * 10) / 10) : 0;
 	return /* @__PURE__ */ j(h, {
 		id: e,
 		label: t,
@@ -235,30 +262,31 @@ function q({ id: e, label: t = "Attachments", files: n, onChange: r, config: i,
 		multiple: !0,
 		value: n,
 		onChange: r,
-		accept: se(i),
+		accept: ie(i),
 		maxSizeMb: s,
+		validate: !1,
 		error: a || void 0
 	});
 }
 //#endregion
 //#region src/components/TicketForm.jsx
-function le(e, t) {
+function oe(e, t) {
 	return t && e.includes(t) ? t : e[0] ?? "";
 }
-function J({ id: e, config: t, defaultCategory: n, extraFiles: r = [], onSubmit: i, onBusyChange: a, children: o }) {
-	let l = t?.categories ?? [], [u, d] = s(() => le(l, n)), [f, p] = s(""), [m, h] = s(""), [g, _] = s([]), [y, b] = s({}), [x, C] = s(""), w = (e) => {
+function se({ id: e, config: t, defaultCategory: n, extraFiles: r = [], onSubmit: i, onBusyChange: a, children: o }) {
+	let l = t?.categories ?? [], [u, d] = s(() => oe(l, n)), [f, p] = s(""), [m, h] = s(""), [g, _] = s([]), [y, b] = s({}), [x, C] = s(""), w = (e) => {
 		_(e), b((n) => ({
 			...n,
-			files: G([...r, ...e], t) ?? void 0
+			files: J([...r, ...e], t) ?? void 0
 		}));
 	}, T = (e) => {
-		let t = K(e);
+		let t = Y(e);
 		t.length > 0 && w([...g, ...t]);
 	};
 	function E() {
 		let e = {};
 		u || (e.category = "Choose a category."), f.trim() || (e.subject = "Give your ticket a subject."), m.trim() || (e.body = "Tell us what happened.");
-		let n = G([...r, ...g], t);
+		let n = J([...r, ...g], t);
 		return n && (e.files = n), b(e), Object.keys(e).length === 0;
 	}
 	async function D(e) {
@@ -325,7 +353,7 @@ function J({ id: e, config: t, defaultCategory: n, extraFiles: r = [], onSubmit:
 				error: y.body
 			}),
 			o,
-			/* @__PURE__ */ j(q, {
+			/* @__PURE__ */ j(X, {
 				id: `${e}-files`,
 				files: g,
 				onChange: w,
@@ -337,16 +365,16 @@ function J({ id: e, config: t, defaultCategory: n, extraFiles: r = [], onSubmit:
 }
 //#endregion
 //#region src/ReportIssue.jsx
-var ue = "supportCapture", de = { zIndex: "var(--wui-z-fixed)" }, fe = (e) => e?.dataset?.[ue] !== "exclude";
-async function pe() {
-	let e = await A(document.body, {
-		filter: fe,
+var ce = "supportCapture", le = { zIndex: "var(--wui-z-fixed)" }, ue = (e) => e?.dataset?.[ce] !== "exclude";
+async function de() {
+	let e = await k(document.body, {
+		filter: ue,
 		pixelRatio: Math.min(window.devicePixelRatio || 1, 2)
 	});
 	if (!e) throw Error("The page capture came back empty.");
 	return new File([e], "screenshot.png", { type: "image/png" });
 }
-function me({ file: e, onRemove: t }) {
+function fe({ file: e, onRemove: t }) {
 	let [n, i] = s(null);
 	return r(() => {
 		let t = URL.createObjectURL(e);
@@ -374,109 +402,112 @@ function me({ file: e, onRemove: t }) {
 		]
 	});
 }
-function he({ label: e = "Report an issue", floating: t = !1, defaultCategory: n = "Bug report", appVersion: r, getTicketHref: a, onOpenTicket: o, onCreated: l }) {
-	let u = R(), { config: f, error: p } = B(), m = `support-report-${i().replace(/[^a-zA-Z0-9-]/g, "")}`, [h, g] = s(!1), [_, v] = s(!1), [y, x] = s(null), [S, C] = s(!1), [w, T] = s(!1), [E, D] = s(null);
-	async function O() {
-		v(!0), D(null);
+function pe({ label: e = "Report an issue", floating: t = !1, defaultCategory: n = "Bug report", appVersion: r, getTicketHref: a, onOpenTicket: o, onCreated: l, className: u, style: f }) {
+	let p = H(), { config: m, error: h } = W(), g = `support-report-${i().replace(/[^a-zA-Z0-9-]/g, "")}`, [_, v] = s(!1), [y, x] = s(!1), [S, C] = s(null), [w, T] = s(!1), [E, D] = s(!1), [O, k] = s(null);
+	async function N() {
+		x(!0), k(null);
 		try {
-			x(await pe()), C(!1);
+			C(await de()), T(!1);
 		} catch {
-			x(null), C(!0);
+			C(null), T(!0);
 		} finally {
-			v(!1), g(!0);
+			x(!1), v(!0);
 		}
 	}
-	let k = () => {
-		w || (g(!1), x(null), D(null));
+	let P = () => {
+		E || (v(!1), C(null), k(null));
 	};
-	async function A(e) {
-		let t = await u.createTicket({
+	async function F(e) {
+		let t = await p.createTicket({
 			...e,
 			pageUrl: window.location.href,
 			userAgent: navigator.userAgent,
 			appVersion: r,
-			screenshots: y ? [y] : []
+			screenshots: S ? [S] : []
 		});
-		D(t), x(null), l?.(t);
+		k(t), C(null), l?.(t);
 	}
-	let N = E && a ? a(E.id) : void 0;
-	return /* @__PURE__ */ M(ee, { children: [/* @__PURE__ */ j("span", {
+	let I = O && a ? a(O.id) : void 0, L = O ? /* @__PURE__ */ M("div", {
+		className: "d-flex justify-content-end gap-2 w-100",
+		children: [/* @__PURE__ */ j(d, {
+			variant: "secondary",
+			onClick: P,
+			children: "Close"
+		}), O && (I || o) ? /* @__PURE__ */ j(d, {
+			href: I,
+			onClick: I ? void 0 : () => {
+				v(!1), k(null), o(O);
+			},
+			children: "View ticket"
+		}) : null]
+	}) : /* @__PURE__ */ M("div", {
+		className: "d-flex justify-content-end gap-2 w-100",
+		children: [/* @__PURE__ */ j(d, {
+			variant: "secondary",
+			onClick: P,
+			disabled: E,
+			children: "Cancel"
+		}), /* @__PURE__ */ j(d, {
+			type: "submit",
+			form: g,
+			loading: E,
+			disabled: !m,
+			children: "Send report"
+		})]
+	});
+	return /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j("span", {
 		"data-support-capture": "exclude",
-		className: t ? "position-fixed bottom-0 end-0 m-3" : "d-inline-block",
-		style: t ? de : void 0,
+		className: [t ? "position-fixed bottom-0 end-0 m-3" : "d-inline-block", u].filter(Boolean).join(" "),
+		style: t ? {
+			...le,
+			...f
+		} : f,
 		children: /* @__PURE__ */ j(d, {
 			leftIcon: "bug",
 			variant: t ? "primary" : "outline",
-			loading: _,
-			onClick: O,
+			loading: y,
+			onClick: N,
 			"aria-haspopup": "dialog",
 			children: e
 		})
 	}), /* @__PURE__ */ j(b, {
-		open: h,
+		open: _,
 		size: "lg",
 		title: "Report an issue",
 		subtitle: "Tell us what went wrong. We attach a screenshot of this page to help us see it.",
 		headerIcon: "bug",
 		staticBackdrop: !0,
-		onClose: k,
-		footer: E ? /* @__PURE__ */ M("div", {
-			className: "d-flex justify-content-end gap-2 w-100",
-			children: [/* @__PURE__ */ j(d, {
-				variant: "secondary",
-				onClick: k,
-				children: "Close"
-			}), E && (N || o) ? /* @__PURE__ */ j(d, {
-				href: N,
-				onClick: N ? void 0 : () => {
-					g(!1), D(null), o(E);
-				},
-				children: "View ticket"
-			}) : null]
-		}) : /* @__PURE__ */ M("div", {
-			className: "d-flex justify-content-end gap-2 w-100",
-			children: [/* @__PURE__ */ j(d, {
-				variant: "secondary",
-				onClick: k,
-				disabled: w,
-				children: "Cancel"
-			}), /* @__PURE__ */ j(d, {
-				type: "submit",
-				form: m,
-				loading: w,
-				disabled: !f,
-				children: "Send report"
-			})]
-		}),
-		children: E ? /* @__PURE__ */ j(c, {
+		onClose: P,
+		footer: L,
+		children: O ? /* @__PURE__ */ j(c, {
 			variant: "success",
 			role: "status",
-			title: `Ticket ${E.number} is with the support team`,
+			title: `Ticket ${O.number} is with the support team`,
 			children: "We reply by email. You can follow the ticket on your support page."
-		}) : f ? /* @__PURE__ */ j(J, {
-			id: m,
-			config: f,
+		}) : m ? /* @__PURE__ */ j(se, {
+			id: g,
+			config: m,
 			defaultCategory: n,
-			extraFiles: y ? [y] : [],
-			onSubmit: A,
-			onBusyChange: T,
-			children: y ? /* @__PURE__ */ j(me, {
-				file: y,
-				onRemove: () => x(null)
-			}) : S ? /* @__PURE__ */ j(c, {
+			extraFiles: S ? [S] : [],
+			onSubmit: F,
+			onBusyChange: D,
+			children: S ? /* @__PURE__ */ j(fe, {
+				file: S,
+				onRemove: () => C(null)
+			}) : w ? /* @__PURE__ */ j(c, {
 				variant: "info",
 				children: "We could not take a screenshot of this page. You can attach an image instead."
 			}) : null
 		}) : /* @__PURE__ */ j(c, {
-			variant: p ? "danger" : "info",
-			children: p ? p.message || "We could not load the support settings." : "Loading the form."
+			variant: h ? "danger" : "info",
+			children: h ? h.message || "We could not load the support settings." : "Loading the form."
 		})
 	})] });
 }
 //#endregion
 //#region src/components/NewTicketModal.jsx
-function ge({ open: e, onClose: t, onCreated: n, config: r, defaultCategory: a, appVersion: o }) {
-	let c = R(), l = `support-new-${i().replace(/[^a-zA-Z0-9-]/g, "")}`, [u, f] = s(!1);
+function me({ open: e, onClose: t, onCreated: n, config: r, defaultCategory: a, appVersion: o }) {
+	let c = H(), l = `support-new-${i().replace(/[^a-zA-Z0-9-]/g, "")}`, [u, f] = s(!1);
 	async function p(e) {
 		n(await c.createTicket({
 			...e,
@@ -508,7 +539,7 @@ function ge({ open: e, onClose: t, onCreated: n, config: r, defaultCategory: a,
 				children: "Send ticket"
 			})]
 		}),
-		children: e && /* @__PURE__ */ j(J, {
+		children: e && /* @__PURE__ */ j(se, {
 			id: l,
 			config: r,
 			defaultCategory: a,
@@ -519,23 +550,23 @@ function ge({ open: e, onClose: t, onCreated: n, config: r, defaultCategory: a,
 }
 //#endregion
 //#region src/lib/status.js
-var _e = {
+var he = {
 	Open: "warning",
 	InProgress: "info",
 	Resolved: "success",
 	Closed: "neutral"
 };
-function Y(e) {
-	return _e[e] ?? "neutral";
+function ge(e) {
+	return he[e] ?? "neutral";
 }
 //#endregion
 //#region src/components/AttachmentThumb.jsx
-var ve = {
+var _e = {
 	width: 140,
 	maxWidth: "100%"
-}, ye = { height: 84 };
-function be({ attachment: e }) {
-	let t = R(), n = (e.contentType || "").startsWith("image/"), [i, a] = s(null), [o, c] = s(!1);
+}, ve = { height: 84 };
+function ye({ attachment: e }) {
+	let t = H(), n = (e.contentType || "").startsWith("image/"), [i, a] = s(null), [o, c] = s(!1);
 	r(() => {
 		let n = !0, r = null;
 		return a(null), c(!1), t.fetchAttachment(e.id).then((e) => {
@@ -549,12 +580,12 @@ function be({ attachment: e }) {
 		children: [
 			e.fileName,
 			", ",
-			W(e.sizeBytes)
+			q(e.sizeBytes)
 		]
 	});
 	return o ? /* @__PURE__ */ M("span", {
 		className: "d-inline-flex flex-column border rounded overflow-hidden",
-		style: ve,
+		style: _e,
 		children: [/* @__PURE__ */ M("span", {
 			className: "d-flex align-items-center justify-content-center gap-1 p-2 wui-text-xs text-body-secondary",
 			children: [/* @__PURE__ */ j(g, {
@@ -564,7 +595,7 @@ function be({ attachment: e }) {
 		}), u]
 	}) : /* @__PURE__ */ M("a", {
 		className: "d-inline-flex flex-column border rounded overflow-hidden text-decoration-none",
-		style: ve,
+		style: _e,
 		href: i ?? void 0,
 		target: "_blank",
 		rel: "noopener noreferrer",
@@ -572,7 +603,7 @@ function be({ attachment: e }) {
 		"aria-busy": !i || void 0,
 		children: [/* @__PURE__ */ j("span", {
 			className: "d-flex align-items-center justify-content-center bg-body-tertiary",
-			style: ye,
+			style: ve,
 			children: i ? n ? /* @__PURE__ */ j("img", {
 				src: i,
 				alt: e.fileName,
@@ -589,11 +620,11 @@ function be({ attachment: e }) {
 }
 //#endregion
 //#region src/components/MessageThread.jsx
-var xe = {
+var be = {
 	whiteSpace: "pre-wrap",
 	overflowWrap: "anywhere"
 };
-function Se({ messages: e }) {
+function xe({ messages: e }) {
 	return /* @__PURE__ */ j("ol", {
 		className: "list-unstyled d-flex flex-column gap-3 mb-0",
 		"aria-label": "Conversation",
@@ -601,7 +632,7 @@ function Se({ messages: e }) {
 			let t = /* @__PURE__ */ j("time", {
 				dateTime: e.createdDateTimeUtc,
 				className: "wui-text-xs text-body-secondary text-nowrap",
-				children: U(e.createdDateTimeUtc)
+				children: K(e.createdDateTimeUtc)
 			});
 			if (e.authorKind === "System") return /* @__PURE__ */ M("li", {
 				className: "text-center wui-text-xs text-body-secondary",
@@ -637,12 +668,12 @@ function Se({ messages: e }) {
 						}),
 						/* @__PURE__ */ j("div", {
 							className: "wui-text-sm",
-							style: xe,
+							style: be,
 							children: e.body
 						}),
 						e.attachments?.length > 0 && /* @__PURE__ */ j("div", {
 							className: "d-flex flex-wrap gap-2 mt-2",
-							children: e.attachments.map((e) => /* @__PURE__ */ j(be, { attachment: e }, e.id))
+							children: e.attachments.map((e) => /* @__PURE__ */ j(ye, { attachment: e }, e.id))
 						})
 					]
 				})]
@@ -652,7 +683,7 @@ function Se({ messages: e }) {
 }
 //#endregion
 //#region src/components/RatingPanel.jsx
-function Ce({ satisfaction: e, comment: t, canRate: n = !1, commentMaxLength: r, onRate: a }) {
+function Se({ satisfaction: e, comment: t, canRate: n = !1, commentMaxLength: r, onRate: a }) {
 	let o = i(), [l, u] = s(""), [p, m] = s(null), [h, g] = s("");
 	if (e) return /* @__PURE__ */ M(c, {
 		variant: e === "Satisfied" ? "success" : "info",
@@ -720,11 +751,11 @@ function Ce({ satisfaction: e, comment: t, canRate: n = !1, commentMaxLength: r,
 }
 //#endregion
 //#region src/components/ReplyBox.jsx
-function we({ onSend: e, config: t, reopens: n = !1 }) {
+function Ce({ onSend: e, config: t, reopens: n = !1 }) {
 	let r = i(), [a, o] = s(""), [l, u] = s([]), [f, p] = s(""), [m, h] = s(""), [g, _] = s(!1), v = (e) => {
-		u(e), p(G(e, t) ?? "");
+		u(e), p(J(e, t) ?? "");
 	}, y = (e) => {
-		let t = K(e);
+		let t = Y(e);
 		t.length > 0 && v([...l, ...t]);
 	};
 	async function b(n) {
@@ -734,7 +765,7 @@ function we({ onSend: e, config: t, reopens: n = !1 }) {
 			h("Write a message before you send it.");
 			return;
 		}
-		let i = G(l, t);
+		let i = J(l, t);
 		if (i) {
 			p(i);
 			return;
@@ -773,7 +804,7 @@ function we({ onSend: e, config: t, reopens: n = !1 }) {
 				hint: n ? "Sending a reply reopens this ticket. You can paste an image into the message." : "You can paste an image into the message.",
 				required: !0
 			}),
-			/* @__PURE__ */ j(q, {
+			/* @__PURE__ */ j(X, {
 				id: `${r}-files`,
 				files: l,
 				onChange: v,
@@ -794,7 +825,7 @@ function we({ onSend: e, config: t, reopens: n = !1 }) {
 }
 //#endregion
 //#region src/components/TicketDetail.jsx
-function X({ label: e, children: t }) {
+function Z({ label: e, children: t }) {
 	return /* @__PURE__ */ M("div", {
 		className: "d-flex flex-column",
 		children: [/* @__PURE__ */ j("span", {
@@ -806,8 +837,8 @@ function X({ label: e, children: t }) {
 		})]
 	});
 }
-function Te({ ticketId: e, onBack: t, onChanged: n }) {
-	let { config: r } = B(), { ticket: i, loading: a, error: o, reload: l, reply: u, reopen: f, rate: p } = H(e), [m, h] = s(!1), [g, _] = s(""), v = async (e) => {
+function we({ ticketId: e, onBack: t, onChanged: n }) {
+	let { config: r } = W(), { ticket: i, loading: a, error: o, reload: l, reply: u, reopen: f, rate: p } = G(e), [m, h] = s(!1), [g, _] = s(""), v = async (e) => {
 		let t = await e();
 		return n?.(), t;
 	};
@@ -863,32 +894,32 @@ function Te({ ticketId: e, onBack: t, onChanged: n }) {
 							children: i.subject
 						}), i.statusLabel && /* @__PURE__ */ j(T, {
 							label: i.statusLabel,
-							tone: Y(i.status)
+							tone: ge(i.status)
 						})]
 					}),
 					/* @__PURE__ */ M("div", {
 						className: "row row-cols-2 row-cols-md-4 g-3",
 						children: [
-							/* @__PURE__ */ j(X, {
+							/* @__PURE__ */ j(Z, {
 								label: "Ticket",
 								children: i.number
 							}),
-							/* @__PURE__ */ j(X, {
+							/* @__PURE__ */ j(Z, {
 								label: "Category",
 								children: i.category || "-"
 							}),
-							/* @__PURE__ */ j(X, {
+							/* @__PURE__ */ j(Z, {
 								label: "Opened",
 								children: /* @__PURE__ */ j("time", {
 									dateTime: i.createdDateTimeUtc,
-									children: U(i.createdDateTimeUtc)
+									children: K(i.createdDateTimeUtc)
 								})
 							}),
-							/* @__PURE__ */ j(X, {
+							/* @__PURE__ */ j(Z, {
 								label: "Last update",
 								children: /* @__PURE__ */ j("time", {
 									dateTime: i.updatedDateTimeUtc,
-									children: U(i.updatedDateTimeUtc)
+									children: K(i.updatedDateTimeUtc)
 								})
 							})
 						]
@@ -916,15 +947,15 @@ function Te({ ticketId: e, onBack: t, onChanged: n }) {
 				className: "align-self-start",
 				children: "Reopen ticket"
 			}),
-			/* @__PURE__ */ j(Ce, {
+			/* @__PURE__ */ j(Se, {
 				satisfaction: i.satisfaction,
 				comment: i.satisfactionComment,
 				canRate: i.canRate,
 				commentMaxLength: r?.satisfactionCommentMaxLength,
 				onRate: (e) => v(() => p(e))
 			}),
-			/* @__PURE__ */ j(Se, { messages: i.messages ?? [] }),
-			/* @__PURE__ */ j(we, {
+			/* @__PURE__ */ j(xe, { messages: i.messages ?? [] }),
+			/* @__PURE__ */ j(Ce, {
 				config: r,
 				reopens: x,
 				onSend: (e) => v(() => u(e))
@@ -934,60 +965,50 @@ function Te({ ticketId: e, onBack: t, onChanged: n }) {
 }
 //#endregion
 //#region src/lib/url.js
-var Z = "ticket";
-function Ee() {
-	return typeof window > "u" ? null : new URLSearchParams(window.location.search).get(Z);
+var Q = "ticket";
+function Te() {
+	return typeof window > "u" ? null : new URLSearchParams(window.location.search).get(Q);
 }
-function De(e) {
-	if (typeof window > "u") return e ? `?${Z}=${encodeURIComponent(e)}` : "?";
+function Ee(e) {
+	if (typeof window > "u") return e ? `?${Q}=${encodeURIComponent(e)}` : "?";
 	let t = new URL(window.location.href);
-	return e ? t.searchParams.set(Z, e) : t.searchParams.delete(Z), `${t.pathname}${t.search}${t.hash}`;
+	return e ? t.searchParams.set(Q, e) : t.searchParams.delete(Q), `${t.pathname}${t.search}${t.hash}`;
 }
-function Oe(e) {
+function De(e) {
 	if (typeof window > "u") return;
-	let t = De(e);
+	let t = Ee(e);
 	t !== `${window.location.pathname}${window.location.search}${window.location.hash}` && window.history.replaceState(window.history.state, "", t);
 }
 //#endregion
 //#region src/components/TicketList.jsx
-var Q = [
+var Oe = [
 	{
-		key: "active",
-		label: "Active"
+		key: "all",
+		label: "All",
+		countKey: "total"
 	},
 	{
 		key: "Open",
-		label: "Open"
+		label: "Open",
+		countKey: "open"
 	},
 	{
 		key: "InProgress",
-		label: "In progress"
+		label: "In progress",
+		countKey: "inProgress"
 	},
 	{
 		key: "Resolved",
-		label: "Resolved"
+		label: "Resolved",
+		countKey: "resolved"
 	},
 	{
 		key: "Closed",
-		label: "Closed"
-	},
-	{
-		key: "all",
-		label: "All"
+		label: "Closed",
+		countKey: "closed"
 	}
 ];
-function ke(e, t) {
-	return t === "all" ? !0 : t === "active" ? e.status === "Open" || e.status === "InProgress" : e.status === t;
-}
-function Ae(e, t) {
-	return !t || [
-		e.number,
-		e.subject,
-		e.category
-	].some((e) => (e || "").toLowerCase().includes(t));
-}
-function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
-	let [o, l] = s("active"), [u, f] = s(""), p = u.trim().toLowerCase(), h = a(() => e.filter((e) => Ae(e, p)), [e, p]), g = a(() => Object.fromEntries(Q.map((e) => [e.key, h.filter((t) => ke(t, e.key)).length])), [h]), _ = k(a(() => h.filter((e) => ke(e, o)), [h, o]));
+function ke({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i, status: a, onStatusChange: o, counts: s, search: l, onSearchChange: u, pagination: f }) {
 	return /* @__PURE__ */ M("div", {
 		className: "d-flex flex-column gap-3",
 		children: [
@@ -1007,17 +1028,18 @@ function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
 			/* @__PURE__ */ M("div", {
 				className: "d-flex flex-column flex-md-row gap-2 align-items-md-center justify-content-between",
 				children: [/* @__PURE__ */ j(D, {
-					tabs: Q.map((e) => ({
-						...e,
-						count: g[e.key]
+					tabs: Oe.map(({ key: e, label: t, countKey: n }) => ({
+						key: e,
+						label: t,
+						count: s?.[n]
 					})),
-					value: o,
-					onChange: l,
+					value: a,
+					onChange: o,
 					ariaLabel: "Filter tickets by status",
 					className: "flex-grow-1"
 				}), /* @__PURE__ */ j(x, {
-					value: u,
-					onChange: f,
+					value: l,
+					onChange: u,
 					placeholder: "Search tickets",
 					ariaLabel: "Search tickets"
 				})]
@@ -1031,7 +1053,7 @@ function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
 							className: "d-flex flex-column",
 							style: { minWidth: 0 },
 							children: [/* @__PURE__ */ j(y, {
-								href: De(e.id),
+								href: Ee(e.id),
 								animation: "none",
 								className: "fw-semibold text-break",
 								onClick: (t) => {
@@ -1054,7 +1076,7 @@ function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
 						label: "Status",
 						render: (e) => e.statusLabel ? /* @__PURE__ */ j(T, {
 							label: e.statusLabel,
-							tone: Y(e.status)
+							tone: ge(e.status)
 						}) : "-"
 					},
 					{
@@ -1069,16 +1091,16 @@ function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
 						cellClassName: "wui-text-sm text-body-secondary text-nowrap",
 						render: (e) => /* @__PURE__ */ j("time", {
 							dateTime: e.updatedDateTimeUtc,
-							children: U(e.updatedDateTimeUtc)
+							children: K(e.updatedDateTimeUtc)
 						})
 					}
 				],
-				rows: _.pageRows,
+				rows: e,
 				loading: t,
 				skeletonRows: 4,
 				ariaLabel: "Support tickets",
-				sourceCount: e.length,
-				pagination: _,
+				sourceCount: s?.total ?? 0,
+				pagination: f,
 				empty: /* @__PURE__ */ j(E, {
 					icon: "message-square",
 					title: "No tickets yet",
@@ -1094,16 +1116,61 @@ function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
 	});
 }
 //#endregion
+//#region src/lib/useDebouncedValue.js
+function Ae(e, t) {
+	let [n, i] = s(e);
+	return r(() => {
+		let n = setTimeout(() => i(e), t);
+		return () => clearTimeout(n);
+	}, [e, t]), n;
+}
+//#endregion
 //#region src/SupportCenter.jsx
-function Me({ initialTicketId: e, defaultCategory: t, appVersion: n }) {
-	let { config: r, error: i, reload: a } = B(), { tickets: o, loading: l, error: u, reload: f } = V(), [p, m] = s(() => e || Ee()), [h, g] = s(!1), _ = (e) => {
-		m(e), Oe(e);
+var je = 300, Me = 10;
+function Ne({ initialTicketId: e, defaultCategory: t, appVersion: n }) {
+	let { config: i, error: a, reload: o } = W(), [l, u] = s("all"), [f, p] = s(""), m = Ae(f.trim(), je), [h, g] = s(Me), _ = `${l}|${m}|${h}`, [v, y] = s({
+		key: _,
+		page: 1
+	}), b = v.key === _ ? v.page : 1, x = (e) => y({
+		key: _,
+		page: e
+	}), S = te({
+		status: l === "all" ? void 0 : l,
+		search: m || void 0,
+		page: b,
+		pageSize: h
+	}), { counts: C, reload: w } = ne(), [T, E] = s(() => e || Te()), [D, O] = s(!1), k = S.totalPages;
+	r(() => {
+		k > 0 && b > k && y({
+			key: _,
+			page: k
+		});
+	}, [
+		k,
+		b,
+		_
+	]);
+	let A = () => {
+		S.reload(), w();
+	}, N = (e) => {
+		E(e), De(e);
 	};
-	return p ? /* @__PURE__ */ j(Te, {
-		ticketId: p,
-		onBack: () => _(null),
-		onChanged: f
-	}, p) : /* @__PURE__ */ M("section", {
+	if (T) return /* @__PURE__ */ j(we, {
+		ticketId: T,
+		onBack: () => N(null),
+		onChanged: A
+	}, T);
+	let P = S.totalCount === 0 ? 0 : (b - 1) * h + 1, F = {
+		page: b,
+		totalPages: Math.max(1, S.totalPages),
+		pageSize: h,
+		total: S.totalCount,
+		firstRow: P,
+		lastRow: Math.min(S.totalCount, P + S.tickets.length - 1),
+		setPage: x,
+		setPageSize: g
+	};
+	return /* @__PURE__ */ M("section", {
 		className: "d-flex flex-column gap-3",
 		"aria-labelledby": "support-center-title",
 		children: [
@@ -1115,39 +1182,45 @@ function Me({ initialTicketId: e, defaultCategory: t, appVersion: n }) {
 					children: "Your tickets"
 				}), /* @__PURE__ */ j(d, {
 					leftIcon: "plus",
-					onClick: () => g(!0),
-					disabled: !r,
+					onClick: () => O(!0),
+					disabled: !i,
 					children: "New ticket"
 				})]
 			}),
-			i && /* @__PURE__ */ M(c, {
+			a && /* @__PURE__ */ M(c, {
 				variant: "warning",
 				children: [
-					i.message || "We could not load the support settings.",
+					a.message || "We could not load the support settings.",
 					" ",
 					/* @__PURE__ */ j(d, {
 						variant: "ghost",
 						size: "sm",
-						onClick: a,
+						onClick: o,
 						children: "Try again"
 					})
 				]
 			}),
-			/* @__PURE__ */ j(je, {
-				tickets: o,
-				loading: l,
-				error: u,
-				onRetry: f,
-				onOpen: _
+			/* @__PURE__ */ j(ke, {
+				tickets: S.tickets,
+				loading: S.loading,
+				error: S.error,
+				onRetry: A,
+				onOpen: N,
+				status: l,
+				onStatusChange: u,
+				counts: C,
+				search: f,
+				onSearchChange: p,
+				pagination: F
 			}),
-			r && /* @__PURE__ */ j(ge, {
-				open: h,
-				onClose: () => g(!1),
-				config: r,
+			i && /* @__PURE__ */ j(me, {
+				open: D,
+				onClose: () => O(!1),
+				config: i,
 				defaultCategory: t,
 				appVersion: n,
 				onCreated: (e) => {
-					g(!1), f(), _(e.id);
+					O(!1), A(), N(e.id);
 				}
 			})
 		]
@@ -1156,8 +1229,8 @@ function Me({ initialTicketId: e, defaultCategory: t, appVersion: n }) {
 //#endregion
 //#region src/SupportContact.jsx
 var $ = (e) => typeof e == "string" && e.trim() !== "";
-function Ne({ className: e }) {
-	let { config: t } = B();
+function Pe({ className: e }) {
+	let { config: t } = W();
 	if (!t) return null;
 	let n = [];
 	return $(t.supportEmail) && n.push({
@@ -1199,7 +1272,7 @@ function Ne({ className: e }) {
 }
 //#endregion
 //#region src/SupportProvider.jsx
-function Pe({ client: e, children: n }) {
+function Fe({ client: e, children: n }) {
 	let r = o(null), i = t((t = !1) => {
 		let n = r.current;
 		if (t || !n || n.client !== e) {
@@ -1216,10 +1289,10 @@ function Pe({ client: e, children: n }) {
 		client: e,
 		loadConfig: i
 	}), [e, i]);
-	return /* @__PURE__ */ j(ie.Provider, {
+	return /* @__PURE__ */ j(B.Provider, {
 		value: s,
 		children: n
 	});
 }
 //#endregion
-export { he as ReportIssue, P as SupportApiError, Me as SupportCenter, Ne as SupportContact, Pe as SupportProvider, re as createSupportClient, R as useSupportClient, B as useSupportConfig, H as useSupportTicket, V as useSupportTickets };
+export { pe as ReportIssue, P as SupportApiError, Ne as SupportCenter, Pe as SupportContact, Fe as SupportProvider, ee as createSupportClient, H as useSupportClient, W as useSupportConfig, G as useSupportTicket, ne as useSupportTicketCounts, te as useSupportTickets };