@webority/support-react 0.13.0 → 0.13.3

package/README.md

@@ -42,10 +42,18 @@ export function App() {
 rejects with a `SupportApiError` carrying `code`, `status` and a `message` written for the
 person, which the components show as-is.
 
+`listTickets` returns one page, most recently updated first, in the shape
+`{ items, page, pageSize, totalCount, totalPages }`. Every query part is optional: `status` is one
+of `Open`, `InProgress`, `Resolved` or `Closed`, `search` matches the subject or the ticket
+number, `page` starts at 1, and the API caps `pageSize` at 100. `getTicketCounts` returns
+`{ open, inProgress, resolved, closed, total }`. A ticket's `accountId` and `realm` are `null` on
+the customer side, and its `version` is for support staff only; the components use none of them.
+
 | Method | Request |
 |---|---|
-| `getConfig()` | `GET {base}/config` |
-| `listTickets()` | `GET {base}/tickets` |
+| `getConfig()` | `GET {base}/settings` |
+| `listTickets({ status, search, page, pageSize })` | `GET {base}/tickets?status=&search=&page=&pageSize=`, one page |
+| `getTicketCounts()` | `GET {base}/tickets/counts` |
 | `getTicket(id)` | `GET {base}/tickets/{id}` |
 | `createTicket({ category, subject, body, pageUrl, userAgent, appVersion, files, screenshots })` | `POST {base}/tickets`, multipart |
 | `reply(id, { body, files, screenshots })` | `POST {base}/tickets/{id}/replies`, multipart |
@@ -58,7 +66,10 @@ person, which the components show as-is.
 ### `<SupportCenter />`
 
 The support page: the customer's tickets with status tabs and a search box, one ticket's
-conversation, and a New ticket dialog.
+conversation, and a New ticket dialog. The server filters, searches and pages the list, so it
+stays quick however many tickets a customer has. The tabs are All, Open, In progress, Resolved
+and Closed, each labelled with its count from `getTicketCounts`. All is chosen first. The search
+asks the server once typing pauses, and a new tab or search starts again at page 1.
 
 ```jsx
 <SupportCenter appVersion={import.meta.env.VITE_APP_VERSION} defaultCategory="Question" />
@@ -74,7 +85,8 @@ Support emails link to the support page with `?ticket=<id>`. The centre opens th
 keeps the parameter in step as tickets open and close, so a refresh stays on the same ticket.
 In a ticket the customer can reply with files (pasting an image into the message attaches it),
 reopen a settled ticket, and say whether it solved their problem. Files are checked against the
-config's type, size and count limits before anything uploads.
+config's type, size and count limits before anything uploads, and a file that breaks a limit gets
+one message, in the package's words.
 
 ### `<ReportIssue />`
 
@@ -95,6 +107,17 @@ pasting them. The ticket records the page address, the browser and the product v
 | `getTicketHref(id)` | Shows a View ticket link to the new ticket. |
 | `onOpenTicket(ticket)` | Called by the View ticket button when there is no href. |
 | `onCreated(ticket)` | Called once the ticket is raised. |
+| `className` | Added to the button's wrapper, floating or inline, to place it. |
+| `style` | Merged over the wrapper's own style. |
+
+Place the button with `className` or `style`. Both land on the wrapper that holds the button,
+which is the element that floats. With `floating`, an inset moves it clear of other fixed controls
+such as a chat launcher:
+
+```jsx
+<ReportIssue floating style={{ bottom: "5rem" }} />
+<ReportIssue className="ms-auto" />
+```
 
 The screenshot is taken before the dialog opens, and the button itself is left out of it.
 Anything else the page marks with `data-support-capture="exclude"` is left out too.
@@ -110,8 +133,11 @@ support config. A field the product has not set is left out, and nothing renders
 
 ## Hooks
 
-`useSupportConfig()`, `useSupportTickets()` and `useSupportTicket(id)` return the data with
-`loading`, `error` and `reload`. `useSupportTicket` also returns `reply`, `reopen` and `rate`,
+`useSupportConfig()`, `useSupportTickets(query)`, `useSupportTicketCounts()` and
+`useSupportTicket(id)` return the data with `loading`, `error` and `reload`.
+`useSupportTickets` takes the same query as `listTickets` and returns `tickets` (the page's items),
+`totalCount` and `totalPages`; it asks again whenever the query changes. `useSupportTicketCounts`
+returns `counts`. `useSupportTicket` also returns `reply`, `reopen` and `rate`,
 each resolving to the updated ticket. `useSupportClient()` returns the client itself.
 
 ## Display rules

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}/config`)),
-		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,11 @@ function W(e) {
 }
 //#endregion
 //#region src/lib/files.js
-function se(e) {
+function ie(e) {
 	let t = e?.allowedContentTypes ?? [];
 	return t.length > 0 ? t.join(",") : void 0;
 }
-function ce(e, t) {
+function ae(e, t) {
 	if (t.length === 0) return !0;
 	let n = (e || "").toLowerCase();
 	return t.some((e) => {
@@ -207,17 +235,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,7 +254,7 @@ function K(e) {
 }
 //#endregion
 //#region src/components/AttachmentField.jsx
-function q({ id: e, label: t = "Attachments", files: n, onChange: r, config: i, error: a }) {
+function X({ 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;
 	return /* @__PURE__ */ j(h, {
 		id: e,
@@ -235,30 +263,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 +354,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 +366,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 +403,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 +540,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 +551,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 +581,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 +596,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 +604,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 +621,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 +633,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 +669,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 +684,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 +752,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 +766,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 +805,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 +826,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 +838,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 +895,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 +948,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 +966,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 +1029,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 +1054,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 +1077,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 +1092,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 +1117,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 +1183,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 +1230,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 +1273,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 +1290,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 };

package/dist/types/ReportIssue.d.ts

@@ -11,8 +11,11 @@
  * @param {(id: string) => string} [props.getTicketHref] Where the new ticket can be opened; shows a View ticket link.
  * @param {(ticket: any) => void} [props.onOpenTicket] Called by the View ticket button when there is no href.
  * @param {(ticket: any) => void} [props.onCreated] Called once the ticket is raised.
+ * @param {string} [props.className] Added to the button's wrapper, both floating and inline, to place it.
+ * @param {import('react').CSSProperties} [props.style] Merged over the wrapper's own style. With
+ *   `floating`, an inset such as `{ bottom: "5rem" }` moves the button clear of other fixed controls.
  */
-export default function ReportIssue({ label, floating, defaultCategory, appVersion, getTicketHref, onOpenTicket, onCreated, }: {
+export default function ReportIssue({ label, floating, defaultCategory, appVersion, getTicketHref, onOpenTicket, onCreated, className, style, }: {
     label?: string;
     floating?: boolean;
     defaultCategory?: string;
@@ -20,4 +23,6 @@ export default function ReportIssue({ label, floating, defaultCategory, appVersi
     getTicketHref?: (id: string) => string;
     onOpenTicket?: (ticket: any) => void;
     onCreated?: (ticket: any) => void;
+    className?: string;
+    style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

package/dist/types/SupportCenter.d.ts

@@ -2,6 +2,7 @@
  * The customer's support page: their tickets, one ticket's conversation, and a New ticket
  * dialog. Opens the ticket named by `?ticket=<id>` in the address (support emails link there),
  * or `initialTicketId` when given, and keeps that parameter in step as tickets open and close.
+ * The list is filtered, searched and paged on the server; the status tabs show the server's counts.
  *
  * @param {object} props
  * @param {string} [props.initialTicketId] Open this ticket first. Wins over the address.

package/dist/types/client.d.ts

@@ -44,9 +44,43 @@ export type RatingInput = {
     satisfaction: "Satisfied" | "Unsatisfied";
     comment?: string;
 };
+export type TicketStatus = "Open" | "InProgress" | "Resolved" | "Closed";
+export type TicketListQuery = {
+    /**
+     * Only tickets in this status; every status when left out.
+     */
+    status?: TicketStatus;
+    /**
+     * Matches the subject or the ticket number.
+     */
+    search?: string;
+    /**
+     * 1-based. The API defaults to 1.
+     */
+    page?: number;
+    /**
+     * The API defaults to 20 and allows up to 100.
+     */
+    pageSize?: number;
+};
+export type TicketPage = {
+    items: any[];
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    totalPages: number;
+};
+export type TicketCounts = {
+    open: number;
+    inProgress: number;
+    resolved: number;
+    closed: number;
+    total: number;
+};
 export type SupportClient = {
     getConfig: () => Promise<any>;
-    listTickets: () => Promise<any[]>;
+    listTickets: (query?: TicketListQuery) => Promise<TicketPage>;
+    getTicketCounts: () => Promise<TicketCounts>;
     getTicket: (id: string) => Promise<any>;
     createTicket: (input: NewTicketInput) => Promise<any>;
     reply: (id: string, input: ReplyInput) => Promise<any>;
@@ -81,10 +115,37 @@ export type SupportClient = {
  * @property {"Satisfied"|"Unsatisfied"} satisfaction
  * @property {string} [comment]
  */
+/**
+ * @typedef {"Open"|"InProgress"|"Resolved"|"Closed"} TicketStatus
+ */
+/**
+ * @typedef {object} TicketListQuery
+ * @property {TicketStatus} [status] Only tickets in this status; every status when left out.
+ * @property {string} [search] Matches the subject or the ticket number.
+ * @property {number} [page] 1-based. The API defaults to 1.
+ * @property {number} [pageSize] The API defaults to 20 and allows up to 100.
+ */
+/**
+ * @typedef {object} TicketPage One page of the customer's tickets, most recently updated first.
+ * @property {any[]} items
+ * @property {number} page
+ * @property {number} pageSize
+ * @property {number} totalCount
+ * @property {number} totalPages
+ */
+/**
+ * @typedef {object} TicketCounts How many of the customer's tickets are in each status.
+ * @property {number} open
+ * @property {number} inProgress
+ * @property {number} resolved
+ * @property {number} closed
+ * @property {number} total
+ */
 /**
  * @typedef {object} SupportClient
  * @property {() => Promise<any>} getConfig
- * @property {() => Promise<any[]>} listTickets
+ * @property {(query?: TicketListQuery) => Promise<TicketPage>} listTickets
+ * @property {() => Promise<TicketCounts>} getTicketCounts
  * @property {(id: string) => Promise<any>} getTicket
  * @property {(input: NewTicketInput) => Promise<any>} createTicket
  * @property {(id: string, input: ReplyInput) => Promise<any>} reply

package/dist/types/components/AttachmentField.d.ts

@@ -1,5 +1,7 @@
 /**
  * Picked, dropped or pasted files for a message, limited to what the support config allows.
+ * The caller checks every file against the config and passes the one message through `error`,
+ * so the field's own check stays off and a rejected pick never shows two messages.
  *
  * @param {object} props
  * @param {string} [props.id]

package/dist/types/components/TicketList.d.ts

@@ -1,17 +1,39 @@
 /**
- * The customer's tickets with status tabs and a search box.
+ * One page of the customer's tickets with status tabs and a search box. Filtering, search and
+ * paging all happen on the server; this only shows what it is given.
  *
  * @param {object} props
- * @param {any[]} props.tickets
+ * @param {any[]} props.tickets The current page.
  * @param {boolean} props.loading
  * @param {any} [props.error]
  * @param {() => void} props.onRetry
  * @param {(id: string) => void} props.onOpen
+ * @param {string} props.status A `STATUS_FILTERS` key.
+ * @param {(status: string) => void} props.onStatusChange
+ * @param {import('../client.js').TicketCounts|null} [props.counts] Labels the tabs once loaded.
+ * @param {string} props.search What is in the search box.
+ * @param {(search: string) => void} props.onSearchChange
+ * @param {{ page: number, totalPages: number, pageSize: number, total: number, firstRow: number, lastRow: number, setPage: (page: number) => void, setPageSize: (size: number) => void }} props.pagination
  */
-export default function TicketList({ tickets, loading, error, onRetry, onOpen }: {
+export default function TicketList({ tickets, loading, error, onRetry, onOpen, status, onStatusChange, counts, search, onSearchChange, pagination, }: {
     tickets: any[];
     loading: boolean;
     error?: any;
     onRetry: () => void;
     onOpen: (id: string) => void;
+    status: string;
+    onStatusChange: (status: string) => void;
+    counts?: import('../client.js').TicketCounts | null;
+    search: string;
+    onSearchChange: (search: string) => void;
+    pagination: {
+        page: number;
+        totalPages: number;
+        pageSize: number;
+        total: number;
+        firstRow: number;
+        lastRow: number;
+        setPage: (page: number) => void;
+        setPageSize: (size: number) => void;
+    };
 }): import("react").JSX.Element;

package/dist/types/context.d.ts

@@ -21,12 +21,27 @@ export declare function useSupportConfig(): {
     reload: () => void;
 };
 /**
- * The signed-in customer's tickets.
+ * One page of the signed-in customer's tickets, filtered and searched on the server. Loads again
+ * whenever any part of the query changes; an answer for a query that has since moved on is dropped.
  *
- * @returns {{ tickets: any[], loading: boolean, error: any, reload: () => void }}
+ * @param {import('./client.js').TicketListQuery} [query]
+ * @returns {{ tickets: any[], totalCount: number, totalPages: number, loading: boolean, error: any, reload: () => void }}
  */
-export declare function useSupportTickets(): {
+export declare function useSupportTickets(query?: import('./client.js').TicketListQuery): {
     tickets: any[];
+    totalCount: number;
+    totalPages: number;
+    loading: boolean;
+    error: any;
+    reload: () => void;
+};
+/**
+ * How many of the signed-in customer's tickets are in each status, for labelling status tabs.
+ *
+ * @returns {{ counts: import('./client.js').TicketCounts|null, loading: boolean, error: any, reload: () => void }}
+ */
+export declare function useSupportTicketCounts(): {
+    counts: import('./client.js').TicketCounts | null;
     loading: boolean;
     error: any;
     reload: () => void;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { createSupportClient, SupportApiError } from "./client.js";
-export { useSupportClient, useSupportConfig, useSupportTicket, useSupportTickets } from "./context.js";
+export { useSupportClient, useSupportConfig, useSupportTicket, useSupportTicketCounts, useSupportTickets } from "./context.js";
 export { default as ReportIssue } from "./ReportIssue.jsx";
 export { default as SupportCenter } from "./SupportCenter.jsx";
 export { default as SupportContact } from "./SupportContact.jsx";

package/dist/types/lib/useDebouncedValue.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `value`, once it has stopped changing for `delayMs`. Lets a search box ask the server once
+ * per pause in typing instead of once per key.
+ *
+ * @template T
+ * @param {T} value
+ * @param {number} delayMs
+ * @returns {T}
+ */
+export declare function useDebouncedValue<T>(value: T, delayMs: number): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/support-react",
-  "version": "0.13.0",
+  "version": "0.13.3",
   "description": "Webority customer support for React portals: ticket centre, report-an-issue with a page screenshot, and support contact details, built on @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -32,7 +32,7 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^19.0.0",
-    "@webority/ui-react": "0.13.0"
+    "@webority/ui-react": "0.13.3"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.2",
@@ -50,7 +50,7 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/ui-react": "0.13.0"
+    "@webority/ui-react": "0.13.3"
   },
   "dependencies": {
     "html-to-image": "^1.11.13"