@rapidmx/web-client 0.11.0 → 0.13.0

package/apps/shared/components/admin/settings/MailboxCreateForm.tsx

@@ -5,10 +5,11 @@
 import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
-import { createMailbox, listMailboxDomains, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { createMailbox, listMailboxDomains, Mailbox, resolveMailboxOwner, ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import PrincipalResolver, { describePerson } from "../../sharing/PrincipalResolver.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -33,7 +34,8 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [domains, setDomains] = useState<string[]>([]);
     const [domain, setDomain] = useState("");
     const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
-    const [ownerUserUid, setOwnerUserUid] = useState(defaults?.ownerUserUid ?? "");
+    const [ownerMode, setOwnerMode] = useState<"shared" | "owned">(defaults?.ownerUserUid ? "owned" : "shared");
+    const [resolvedOwner, setResolvedOwner] = useState<ResolvedPrincipal | null>(null);
     const [timezone, setTimezone] = useState("UTC");
     const [quotaGb, setQuotaGb] = useState(5);
     // Only replaced by the mailbox policy's default if the admin hasn't typed a quota of their own yet.
@@ -90,16 +92,19 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             setError("A display name can't contain \"@\" (or a look-alike) or line breaks.");
             return;
         }
+        if (ownerMode === "owned" && !resolvedOwner) {
+            setError("Look up and confirm the mailbox's owner, or choose a shared mailbox instead.");
+            return;
+        }
 
         setSaving(true);
         try {
-            // ownerUserUid left blank creates a true ownerless shared mailbox (e.g. support@example.com);
-            // delegates are then granted access from the mailbox's detail page. A resource mailbox is
-            // ownerless the same way — leave "Owner user uid" blank for one too.
+            // "Shared mailbox" creates a true ownerless mailbox (e.g. support@example.com); delegates are then
+            // granted access from the mailbox's detail page. A resource mailbox is ownerless the same way.
             const mailbox = await createMailbox({
                 primarySmtpAddress: address,
                 displayName: displayName.trim(),
-                ownerUserUid: ownerUserUid.trim() || undefined,
+                ownerUserUid: ownerMode === "owned" ? resolvedOwner!.userUid : undefined,
                 timezone,
                 quotaBytes: Math.round(quotaGb * 1_000_000_000),
                 ...(isResource && {
@@ -175,16 +180,60 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
                     />
                 </FormField>
 
-                <FormField label="Owner user uid (optional)" htmlFor="ownerUserUid">
-                    <input
-                        id="ownerUserUid"
-                        type="text"
-                        className={INPUT_CLASS}
-                        value={ownerUserUid}
-                        onChange={(e) => setOwnerUserUid(e.target.value)}
-                        placeholder="Leave blank for a shared mailbox"
-                    />
-                </FormField>
+                <div className="mb-4">
+                    <span className="block text-sm font-semibold mb-1.5 text-text">Owner</span>
+                    <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="radio"
+                                name="ownerMode"
+                                checked={ownerMode === "shared"}
+                                onChange={() => {
+                                    setOwnerMode("shared");
+                                    setResolvedOwner(null);
+                                }}
+                            />
+                            Shared mailbox (no single owner)
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="radio"
+                                name="ownerMode"
+                                checked={ownerMode === "owned"}
+                                onChange={() => setOwnerMode("owned")}
+                            />
+                            Owned by a specific person
+                        </label>
+                        {ownerMode === "owned" &&
+                            (resolvedOwner ? (
+                                <div className="flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm">
+                                    <span>
+                                        Owner: <strong className="break-all">{describePerson(resolvedOwner)}</strong>
+                                    </span>
+                                    <Button type="button" variant="text" className="!w-auto" onClick={() => setResolvedOwner(null)}>
+                                        Change
+                                    </Button>
+                                </div>
+                            ) : (
+                                <PrincipalResolver
+                                    resolve={resolveMailboxOwner}
+                                    onResolved={(person) => {
+                                        setResolvedOwner(person);
+                                    }}
+                                    initialPrincipal={defaults?.ownerUserUid}
+                                    placeholder="Email address, username or user id"
+                                    ariaLabel="Mailbox owner"
+                                    confirmLabel="Use this owner"
+                                    confirmErrorMessage="Could not confirm this person."
+                                    describeConfirm={(person) => (
+                                        <>
+                                            Make <strong className="break-all">{describePerson(person)}</strong> the owner?
+                                        </>
+                                    )}
+                                />
+                            ))}
+                    </div>
+                </div>
 
                 <FormField label="Timezone" htmlFor="timezone">
                     <input

package/apps/shared/components/calendar/EventModal.tsx

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useRef, useState } from "react";
+import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attendee,
@@ -10,6 +10,7 @@ import {
     AttendeeResponseStatus,
     AttendeeRole,
     BusyStatus,
+    CalendarEvent,
     CalendarEventInput,
     RecurrenceRule,
     createCalendarEvent,
@@ -17,6 +18,12 @@ import {
     respondToEvent,
     updateCalendarEvent,
 } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import {
+    VideoMeetingInvitee,
+    createVideoMeeting,
+    getVideoMeeting,
+    updateVideoMeeting,
+} from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
 import { deleteEventOccurrence, deleteEventSeries, detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -44,6 +51,21 @@ const RESPONSE_STATUS_LABEL: Record<AttendeeResponseStatus, string> = {
     tentative: "Tentative",
 };
 
+/**
+ * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
+ * clear again when video conferencing is turned back off (see `applyVideoConferencing()`).
+ *
+ * Deliberately generic and identical for everyone: each attendee's own personal join link is substituted into
+ * their own copy of the invitation server-side (`@rapidmx/restapi`'s `MeetingSchedulingJob`), so no link -
+ * personal or otherwise - may be stored on the shared event itself, where every attendee would read the same
+ * one.
+ */
+export const VIDEO_LOCATION_PLACEHOLDER = "Video call — link in this invitation";
+
+/** The plugin's own title bound (`BaseVideoMeetingRoute`'s `MAX_TITLE_LENGTH`) - a longer title is a 400, so
+ * an over-long event title is trimmed to fit rather than failing the whole meeting. */
+const MAX_MEETING_TITLE_LENGTH = 200;
+
 export interface EventModalProps {
     open: boolean;
     onClose: () => void;
@@ -211,6 +233,17 @@ export default function EventModal({
     const [autoReplyEnabled, setAutoReplyEnabled] = useState(occurrence?.autoReplyEnabled ?? false);
     const [autoReplyMessage, setAutoReplyMessage] = useState(occurrence?.autoReplyMessage ?? "");
     const [editScope, setEditScope] = useState<EditScope>("occurrence");
+    // Video conferencing: the toggle, the meeting this event is linked to (if any), the organizer's own join
+    // link for it, and whatever went wrong with the last attempt to mint/cancel one.
+    const [videoEnabled, setVideoEnabled] = useState(!!occurrence?.videoMeetingUid);
+    const [videoMeetingUid, setVideoMeetingUid] = useState<string | undefined>(occurrence?.videoMeetingUid);
+    // `undefined` while the link is still being fetched, `null` once it is known there is none to open.
+    const [organizerJoinUrl, setOrganizerJoinUrl] = useState<string | null | undefined>(undefined);
+    const [videoError, setVideoError] = useState<string | null>(null);
+    // The event as this modal last persisted it. Set only when a save got the event stored but could not
+    // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
+    // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
+    const [savedEvent, setSavedEvent] = useState<CalendarEvent | null>(null);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -220,6 +253,31 @@ export default function EventModal({
     const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
     const addResourceButtonRef = useRef<HTMLButtonElement>(null);
 
+    // An event that already carried a meeting when it was opened (e.g. after a page reload) knows only that
+    // meeting's uid - the organizer's own join link lives on the meeting, so it is fetched once here. A
+    // meeting minted in this session already has its link from the create call (see
+    // `applyVideoConferencing()`), which is why this deliberately reads the *prop*, not the state: it must
+    // not re-fetch what was just handed to us. A failure and a meeting with no link at all are the same
+    // thing to this UI - there is nothing to open either way - so both settle on `null`.
+    useEffect(() => {
+        const uid = occurrence?.videoMeetingUid;
+        if (!uid) {
+            return;
+        }
+        let cancelled = false;
+        void getVideoMeeting(uid)
+            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .catch(() => null)
+            .then((url) => {
+                if (!cancelled) {
+                    setOrganizerJoinUrl(url);
+                }
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [occurrence?.videoMeetingUid]);
+
     // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize —
     // `organizerAddress` (plus the aliases) are this mailbox's own addresses (see `EventModalProps`), so
     // finding one among `attendees` (and not as that attendee's own organizer flag) identifies exactly
@@ -245,9 +303,86 @@ export default function EventModal({
         setResourcePickerOpen(false);
     }
 
+    /**
+     * Brings the event's video meeting in line with the toggle, once the event itself is saved (so the
+     * attendee list a new meeting's invitees are built from is the one that was just stored).
+     *
+     * Turning it **on** mints a meeting for the saved event's attendees - every one of them except the
+     * organizer, who reaches their own meeting through ownership (`organizerJoinUrl`), not as a guest - and
+     * then patches the event with the meeting's uid and the generic `VIDEO_LOCATION_PLACEHOLDER` location.
+     * No join link is written onto the event: each attendee's own link is substituted into their own copy of
+     * the invitation server-side.
+     *
+     * Turning it **off** cancels the meeting and clears the link, restoring Location to `""` only when it
+     * still holds exactly the placeholder this modal wrote - anything the user has typed there since is
+     * theirs and is preserved.
+     *
+     * **Known, deliberate limitation:** an event that already has a meeting is left completely alone, even
+     * when its attendee list has just changed. `@rapidmx/videoconf-plugin`'s `PUT /mail/video-meetings/:id`
+     * is deliberately minimal (title and cancellation only) and cannot add or remove invitees, and a private
+     * meeting's personal join links are minted once at creation - so there is no way to reconcile an invitee
+     * list, and silently pretending otherwise would leave a new attendee with no link and a removed one with
+     * a working one. The helper text under the checkbox says so, and turning the toggle off and on again
+     * reissues links for the current attendee list.
+     *
+     * Never throws: the event is already stored by the time this runs, so a failure here is reported inline
+     * next to the checkbox and left retryable, with `videoMeetingUid` still whatever it was before.
+     */
+    async function applyVideoConferencing(saved: CalendarEvent): Promise<{ event: CalendarEvent; failed: boolean }> {
+        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way.
+        if (videoEnabled === !!videoMeetingUid) {
+            return { event: saved, failed: false };
+        }
+        try {
+            if (videoEnabled) {
+                const organizerAddressLower = saved.organizer.address.toLowerCase();
+                const invitees: VideoMeetingInvitee[] = attendees
+                    .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
+                    .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+                if (invitees.length === 0) {
+                    setVideoError("Add at least one attendee other than yourself to add video conferencing.");
+                    return { event: saved, failed: true };
+                }
+                const result = await createVideoMeeting({
+                    mailboxUid: saved.mailboxUid,
+                    title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                    visibility: "private",
+                    calendarEventUid: saved.uid,
+                    startTime: saved.startDate,
+                    endTime: saved.endDate,
+                    invitees,
+                });
+                const patched = await updateCalendarEvent({
+                    uid: saved.uid,
+                    version: saved.version,
+                    location: VIDEO_LOCATION_PLACEHOLDER,
+                    videoMeetingUid: result.meeting.uid,
+                });
+                setVideoMeetingUid(result.meeting.uid);
+                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
+                setLocation(VIDEO_LOCATION_PLACEHOLDER);
+                return { event: patched, failed: false };
+            }
+            await updateVideoMeeting(videoMeetingUid!, { status: "cancelled" });
+            const restoredLocation = location.trim() === VIDEO_LOCATION_PLACEHOLDER ? "" : location.trim();
+            // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
+            // leave the placeholder (and the link to the now-cancelled meeting) in place.
+            const patch: EventFields = { location: restoredLocation || null, videoMeetingUid: null };
+            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) });
+            setVideoMeetingUid(undefined);
+            setOrganizerJoinUrl(undefined);
+            setLocation(restoredLocation);
+            return { event: patched, failed: false };
+        } catch (err) {
+            setVideoError(err instanceof ApiRequestError ? err.message : "Could not update this event's video conferencing.");
+            return { event: saved, failed: true };
+        }
+    }
+
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
         setError(null);
+        setVideoError(null);
 
         if (!title.trim()) {
             setError("A title is required.");
@@ -294,25 +429,42 @@ export default function EventModal({
 
         setSaving(true);
         try {
-            if (!occurrence) {
+            let saved: CalendarEvent;
+            let detachedSyncFailed = false;
+            if (savedEvent) {
+                // A retry after the event was stored but its video meeting couldn't be (see `savedEvent`):
+                // update exactly the record the first attempt left behind, whichever branch below created it.
+                // A series' own exception/detached-occurrence re-pointing already ran on that attempt and has
+                // nothing left to shift - the dates being sent again are the ones it moved everything to.
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(fields as Partial<CalendarEventInput>) });
+            } else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
-                await createCalendarEvent({
+                saved = await createCalendarEvent({
                     mailboxUid: targetMailboxUid,
                     folderUid: targetFolderUid,
                     ...fields,
                     organizer: { address: effectiveOrganizerAddress, type: "to" },
                 } as CalendarEventInput);
             } else if (editingSingleOccurrence) {
-                await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
+                saved = await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
             } else if (occurrence.isRecurringOccurrence) {
-                const saved = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
-                if (saved.detachedOccurrenceSyncFailed) {
-                    // The series itself was saved - say so, and leave closing to the user once they've read it.
-                    setSyncWarning(true);
-                    return;
-                }
+                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
+                saved = series;
+                detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             } else {
-                await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+            }
+            const video = await applyVideoConferencing(saved);
+            if (video.failed) {
+                // The event itself is saved - keep the modal open on the inline error so the video meeting
+                // can be retried (or the toggle put back) rather than closing over it.
+                setSavedEvent(video.event);
+                return;
+            }
+            if (detachedSyncFailed) {
+                // The series itself was saved - say so, and leave closing to the user once they've read it.
+                setSyncWarning(true);
+                return;
             }
             onSaved();
         } catch (err) {
@@ -433,6 +585,28 @@ export default function EventModal({
                     </p>
                 )}
 
+                {/* Outside the `disabled` fieldset below: joining a call is not editing the event, so it stays
+                    available on an invitation's read-only copy too (where the link, like the meeting itself,
+                    is only reachable by whoever holds access to its mailbox). */}
+                {videoMeetingUid && (
+                    <div className="flex items-center gap-3 mb-3">
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            disabled={!organizerJoinUrl}
+                            onClick={() => window.open(organizerJoinUrl!, "_blank", "noopener,noreferrer")}
+                        >
+                            Join video call
+                        </Button>
+                        {!organizerJoinUrl && (
+                            <span className="text-xs text-text-muted">
+                                {organizerJoinUrl === null ? "This meeting’s join link isn’t available." : "Loading the join link…"}
+                            </span>
+                        )}
+                    </div>
+                )}
+
                 <fieldset disabled={isInvited} className="flex flex-col gap-1 min-w-0">
 
                 {!occurrence && mailboxOptions && mailboxOptions.length > 1 && (
@@ -478,6 +652,24 @@ export default function EventModal({
                     <input id="event-location" type="text" className={INPUT_CLASS} value={location} onChange={(e) => setLocation(e.target.value)} />
                 </FormField>
 
+                <div className="mb-3">
+                    <label className="flex items-center gap-2 text-sm font-medium">
+                        <input type="checkbox" checked={videoEnabled} onChange={(e) => setVideoEnabled(e.target.checked)} />
+                        Add video conferencing
+                    </label>
+                    {videoEnabled && (
+                        <p className="text-xs text-text-muted mt-1">
+                            Changing attendees after enabling video conferencing won&rsquo;t update meeting invitees &mdash;
+                            turn this off and back on to reissue links to the current attendee list.
+                        </p>
+                    )}
+                    {videoError && (
+                        <p role="alert" className="text-xs text-danger mt-1">
+                            {videoError}
+                        </p>
+                    )}
+                </div>
+
                 <label className="flex items-center gap-2 text-sm font-medium mb-3">
                     <input type="checkbox" checked={allDay} onChange={(e) => handleAllDayChange(e.target.checked)} />
                     All day

package/apps/shared/components/layout/AppShell.tsx

@@ -48,6 +48,7 @@ import NotificationHistoryDialog from "../../notifications/NotificationHistoryDi
 import { notifySessionExpired, setSignInUrl } from "../../notifications/apiErrors.js";
 import { useUnseenErrorCount } from "../../notifications/useNotifications.js";
 import { useSigningEnrollmentWatcher } from "../../signing/useSigningEnrollmentWatcher.js";
+import { useCalendarReminders } from "../../calendar/useCalendarReminders.js";
 
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export const LOGOUT_TIMEOUT_MS = 3_000;
@@ -200,6 +201,8 @@ export function AppChrome({
     const mail = useMailConnection({ userUid, enabled: inFrame, open: navigate });
     // A signing certificate the user asked for is announced when it is issued (or fails), on whichever page they are - see the hook.
     useSigningEnrollmentWatcher({ userUid, mailboxes: mail.mailboxes, enabled: inFrame });
+    // A meeting reminder pops up on whichever page they are - see the hook.
+    useCalendarReminders({ userUid, enabled: inFrame });
 
     useRedirectIfUnauthenticated(userUid, authServerUrl);
     // Any request this app makes that the server answers with a 401 - the session ended - raises one "Your session expired" pop-up with a

package/apps/shared/components/sharing/PrincipalListField.tsx

@@ -0,0 +1,82 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.js";
+
+export interface PrincipalListFieldProps {
+    label: string;
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** Exact-match resolve call for what's typed - see `PrincipalResolver`. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    placeholder?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+}
+
+/**
+ * A list-of-user-uids editor - the same visual list/per-item-remove shape `StringListField` established, but a
+ * uid can only be ADDED by looking it up and confirming who it is first (`PrincipalResolver`), never typed
+ * directly. Unlike `StringListField`'s free-text values (a distribution list's member addresses, a legal hold's
+ * custodian MAILBOX uids - values nobody needs to be "looked up" as a person for), every value here is a PERSON's
+ * user uid, granted a real role purely by what gets typed here - the exact "raw uid text field with no way to see
+ * whose it is" gap this app closes everywhere else a person is assigned by identifier.
+ *
+ * An already-added uid is still shown as plain text (same as `StringListField`, and as `ShareAccessCard`'s own
+ * member list) - it was already resolved and confirmed when it was added, so there is nothing left to look up.
+ */
+export default function PrincipalListField({ label, values, onChange, resolve, placeholder, emptyMessage = "None added yet.", disabled }: PrincipalListFieldProps) {
+    function handleRemove(uid: string) {
+        onChange(values.filter((v) => v !== uid));
+    }
+
+    return (
+        <div className="mb-4">
+            <span className="block text-sm font-semibold mb-1.5 text-text">{label}</span>
+
+            <ul className="flex flex-col gap-2 mb-2">
+                {values.length === 0 && (
+                    <li key="empty" className="text-sm text-text-muted">
+                        {emptyMessage}
+                    </li>
+                )}
+                {values.map((uid) => (
+                    <li key={uid} className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm">
+                        <span className="text-sm font-medium break-all">{uid}</span>
+                        <button
+                            type="button"
+                            onClick={() => handleRemove(uid)}
+                            disabled={disabled}
+                            className="text-sm text-danger hover:underline disabled:opacity-55 shrink-0"
+                        >
+                            Remove
+                        </button>
+                    </li>
+                ))}
+            </ul>
+
+            {!disabled && (
+                <PrincipalResolver
+                    resolve={resolve}
+                    onResolved={(person) => {
+                        if (!values.includes(person.userUid)) {
+                            onChange([...values, person.userUid]);
+                        }
+                    }}
+                    placeholder={placeholder ?? "Email address, username or user id"}
+                    ariaLabel={label}
+                    confirmLabel="Add"
+                    confirmErrorMessage="Could not add this person."
+                    describeConfirm={(person) => (
+                        <>
+                            Add <strong className="break-all">{describePerson(person)}</strong>?
+                        </>
+                    )}
+                />
+            )}
+        </div>
+    );
+}