@webority/support-react 0.13.1 → 0.13.4

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,9 @@
 /**
  * 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.
+ * A limit the config leaves open (no types listed, a size of 0) is passed as open, so the
+ * field accepts any file and its hint names only the limits that exist.
  *
  * @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/files.d.ts

@@ -1,12 +1,14 @@
 /**
- * The `accept` attribute for a file input, from the config's allowed content types.
+ * The `accept` attribute for a file input, from the config's allowed content types. An empty
+ * list means any type, so this returns "" rather than undefined: undefined would let the field
+ * fall back to its own images-only default.
  *
  * @param {{ allowedContentTypes?: string[] }|null|undefined} config
- * @returns {string|undefined}
+ * @returns {string}
  */
 export declare function acceptOf(config: {
     allowedContentTypes?: string[];
-} | null | undefined): string | undefined;
+} | null | undefined): string;
 /**
  * Checks files against the config before anything uploads. Returns the first problem as a
  * sentence for the person, or null when every file can go.

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.1",
+  "version": "0.13.4",
   "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.1"
+    "@webority/ui-react": "0.13.4"
   },
   "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.1"
+    "@webority/ui-react": "0.13.4"
   },
   "dependencies": {
     "html-to-image": "^1.11.13"