@comms-id/dfat-sanctions-consolidated-list-react

A React hook and a finished component for the Comms.ID Sanctions screening form: screening one individual, entity or vessel against the Australian Sanctions Consolidated List (DFAT). Accessible, with the data attribution always shown. React 18 or later; it depends on @comms-id/dfat-sanctions-consolidated-list and nothing else. Relay only: screening is never open to a browser that holds no credential.

import { createDfatSanctionsConsolidatedListBrowserClient } from "@comms-id/dfat-sanctions-consolidated-list/browser";
import { DfatSanctionsConsolidatedListScreen } from "@comms-id/dfat-sanctions-consolidated-list-react";

const client = createDfatSanctionsConsolidatedListBrowserClient({ relayUrl: "/api/comms-id/dfat-sanctions-consolidated-list" });

export const Review = () => (
  <DfatSanctionsConsolidatedListScreen client={client} onResult={(record, timing) => console.log(record.candidates.length, `${timing.ms} ms`)} />
);

relayUrl is your own server route, set up with @comms-id/relay: your server signs the call as your registered app, so the browser holds no credential.

What the form does

• A form, not a search box: name, kind (individual, entity or vessel), and an optional date of birth (YYYY-MM-DD) and place of birth. Nothing is sent while the user types: the screening is sent when the form is submitted. Changing a value drops the answer, so an answer is never shown beside values it is not for.
• An invalid value (no name, a date that is not a real calendar date) is refused in the browser; the field says why and nothing is sent.
• The answer lists every possible match with its evidence (name, kind, reference, dates and places of birth, and whether the name, date and place matched) and notes the list generation and when it was checked. "No possible match" is a statement about the exact names and aliases of one generation of the list, and the form says so: it is not a clearance.
• "Sanctions screening is unavailable" (the list is not available, or it is stale and the service refuses to screen against it) is never shown as "no possible match"; it offers "Try again".
• Relay only. Screening is never a public visitor operation: there is no pk mode, the element ships no exchange code, and the browser holds no credential.

Your own markup: useDfatSanctionsConsolidatedList

const screen = useDfatSanctionsConsolidatedList({ client, onResult });
return (
  <form {...screen.getFormProps()}>
    {fields.map((field) => <input key={field.name} {...screen.getFieldProps(field)} />)}
    <button type="submit">Screen</button>
    <p {...screen.getStatusProps()}>{screen.state.announcement}</p>
    <div {...screen.getResultProps("Result")}>{screen.state.result?.view.headline}</div>
  </form>
);

The prop getters carry the form's accessibility contract: ids, aria-invalid, aria-describedby (the hint and the message), aria-required, and a polite live region. Render the attribution yourself when you use the hook: it is screen.state.attribution.

The component

Props: client (required), legend (default "Sanctions screening"), submitLabel, onResult, values (starting values by field name), idPrefix, disabled, className, showTiming (true), renderItem.

Style it with the custom properties --comms-id-text, --comms-id-surface, --comms-id-border, --comms-id-active-strong, --comms-id-button-text, --comms-id-error, --comms-id-radius or the comms-id-dfat-sanctions-consolidated-list__* class names. It needs no stylesheet.

• The answer area has a reserved height. A failed screening says why and offers "Try again"; it is never shown as "no possible match".
• It renders on the server with the same structure, and works under StrictMode.

Data attribution

Source: Australian Sanctions Consolidated List, Department of Foreign Affairs and Trade (DFAT). The component always shows the attribution. Do not hide it.

LICENSE is the consumer client licence. src/ is generated by @comms-id/forge-transformers and is never edited by hand.