@rapidmx/web-client 0.30.0 → 0.32.0

package/dist/apps/shared/components/calendar/EventDetails.js

@@ -34,11 +34,13 @@ function DetailRow({ icon, children }) {
  * An event this reader may only see as a busy block (`occurrence.redacted`: a private or confidential event on a shared calendar) is drawn as just that -
  * its time and that it is busy - with nothing to change, delete or answer.
  */
-export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, onClose, onModify, onSaved, onDeleted, }) {
+export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, canWrite = true, onClose, onModify, onSaved, onDeleted, }) {
     const client = useApiClient();
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
+    // An answer to one occurrence of a series waits here for the reader to confirm: the server records it for the entire series.
+    const [pendingResponse, setPendingResponse] = useState(null);
     const [requesting, setRequesting] = useState(false);
     // The organizer's own join link for the event's video meeting: `undefined` while it is fetched, `null` once known to be none.
     const [organizerJoinUrl, setOrganizerJoinUrl] = useState(undefined);
@@ -84,6 +86,7 @@ export default function EventDetails({ occurrence, isInvited, myResponse, isOwnA
     // `@rapidmx/restapi`'s `respond()` route has no occurrence-vs-series scope of its own (see `calendarApi.ts`'s `respondToEvent` doc
     // comment) - it always acts on `occurrence.uid` as a single event document.
     async function handleRespond(responseStatus) {
+        setPendingResponse(null);
         setError(null);
         setBusy(true);
         try {
@@ -133,8 +136,8 @@ export default function EventDetails({ occurrence, isInvited, myResponse, isOwnA
                         description: occurrence.description,
                         descriptionHtml: occurrence.descriptionHtml,
                         guestAddresses: occurrence.attendees.map((a) => a.address),
-                    }, canChange: canChange, canInvite: canInvite, onSent: () => setRequesting(false), onCancel: () => setRequesting(false) }) })), myResponse !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsx("div", { className: "flex gap-2", children: answers.map(({ response, label }) => {
+                    }, canChange: canChange, canInvite: canInvite, onSent: () => setRequesting(false), onCancel: () => setRequesting(false) }) })), myResponse !== undefined && canWrite && (_jsxs("div", { className: "flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsx("div", { className: "flex gap-2", children: answers.map(({ response, label }) => {
                                     const current = myResponse === response;
-                                    return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" "), "aria-pressed": current, disabled: busy, onClick: () => void handleRespond(response), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
-                                }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-4", children: [!isInvited && (_jsx(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: onModify, children: "Modify" })), (canChange || canInvite) && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: canChange ? "Request a change" : "Add guests" })), !occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete series" })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" })] })] }));
+                                    return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" "), "aria-pressed": current, disabled: busy, onClick: () => (occurrence.isRecurringOccurrence ? setPendingResponse(response) : void handleRespond(response)), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
+                                }) })] }), pendingResponse && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsxs("span", { className: "flex-1 min-w-0", children: [pendingResponse === "declined" ? "Declining" : "Your answer", " applies to every event in this series, not just this one", pendingResponse === "declined" ? ", and removes the series from your calendar" : "", "."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setPendingResponse(null), children: "Cancel" }), _jsxs(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: () => void handleRespond(pendingResponse), children: [answers.find((a) => a.response === pendingResponse).label, " the series"] })] })), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-4", children: [!isInvited && canWrite && (_jsx(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: onModify, children: "Modify" })), (canChange || canInvite) && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: canChange ? "Request a change" : "Add guests" })), !canWrite ? null : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => setConfirmingDelete(true), children: "Delete" })) : !occurrence.isRecurringOccurrence ? (_jsxs("div", { role: "alert", className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm", children: "Delete this event?" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Yes, delete" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setConfirmingDelete(false), children: "Keep" })] })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete series" })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" })] })] }));
 }

package/dist/apps/shared/components/calendar/EventEditor.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { format } from "date-fns";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
@@ -46,19 +46,25 @@ function wallTimeOfDayMs(instantMs, timezone) {
     const wall = toEventWallClock(instantMs, timezone, false);
     return ((wall % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;
 }
+/** The calendar date (`YYYY-MM-DD`) an instant falls on in the frame a series expands in: the UTC date for an all-day event, `timezone`'s wall clock otherwise. */
+function seriesDateKey(iso, allDay, timezone) {
+    return allDay ? allDayDateKey(iso) : new Date(toEventWallClock(new Date(iso).getTime(), timezone, false)).toISOString().slice(0, 10);
+}
+const WEEKDAY_ORDER = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 /**
  * Rewrites an edited occurrence's `startDate`/`endDate` for a save to the entire series. The modal only
  * ever shows (and edits) *this occurrence's* dates, but the series is stored as its master record starting
  * at the first occurrence - sending the occurrence's dates as-is would move the whole series' start to
- * this occurrence. So only the change in time-of-day (and the new duration) is applied to the master's own
- * start; the series keeps its original first date. Unchanged times aren't sent at all.
+ * this occurrence. So the change made to the occurrence (its date and its time of day) is applied to the
+ * master's own start, and the new duration is kept: moving a Tuesday occurrence to Thursday moves the series
+ * by two days, never silently dropping the change. Unchanged times aren't sent at all.
  *
- * Times of day are read on the event's own timezone wall clock (the series expands there), not the
- * browser's, and the change is the smallest signed difference modulo 24h - moving 23:00 to 01:00 is two
- * hours later (into the next day), never 22 hours earlier. The master's new start is converted back from
- * that wall clock, so a master on the other side of a DST change keeps the chosen local time.
+ * The change is measured on the event's own timezone wall clock (the series expands there), not the
+ * browser's. The master's new start is converted back from that wall clock, so a master on the other side of
+ * a DST change keeps the chosen local time. A weekly rule that the edit left untouched is rotated by the
+ * same number of days, so its weekdays move with the start (a rule the form already changed is left as it is).
  */
-async function toSeriesFields(occurrence, fields, client) {
+async function toSeriesFields(occurrence, fields, formZone, client) {
     const { startDate, endDate, ...rest } = fields;
     if (sameMinute(startDate, occurrence.startDate) && sameMinute(endDate, occurrence.endDate)) {
         // `saveEventSeries()` treats *any* `timezone`/`allDay` in the update as a possible reinterpretation of
@@ -71,25 +77,32 @@ async function toSeriesFields(occurrence, fields, client) {
     const timezone = fields.timezone;
     const newStart = new Date(startDate).getTime();
     const durationMs = new Date(endDate).getTime() - newStart;
+    // The days the date moved: on the event's own wall clock when both are timed, otherwise on the clock the form showed the timed side on.
+    const frame = fields.allDay || occurrence.allDay ? formZone : timezone;
+    const dayShift = Math.round((Date.parse(seriesDateKey(startDate, !!fields.allDay, frame)) - Date.parse(seriesDateKey(occurrence.startDate, occurrence.allDay, frame))) / MS_PER_DAY);
     let masterStart;
     if (fields.allDay) {
-        // Timed -> all-day keeps the master's own date on its wall clock.
+        // The master's own date (on its wall clock when it was timed), moved by the days the occurrence moved.
         const masterDateKey = master.allDay
             ? allDayDateKey(master.startDate)
             : new Date(toEventWallClock(new Date(master.startDate).getTime(), timezone, false)).toISOString().slice(0, 10);
-        masterStart = new Date(allDayInstant(masterDateKey)).getTime();
+        masterStart = new Date(allDayInstant(addDaysToKey(masterDateKey, dayShift))).getTime();
     }
     else if (master.allDay) {
-        // All-day -> timed: the master's own date at the newly chosen wall-clock time.
-        const masterDateWall = new Date(allDayInstant(allDayDateKey(master.startDate))).getTime();
+        // All-day -> timed: the master's own date (moved by the days the occurrence moved) at the newly chosen wall-clock time.
+        const masterDateWall = new Date(allDayInstant(addDaysToKey(allDayDateKey(master.startDate), dayShift))).getTime();
         masterStart = fromEventWallClock(masterDateWall + wallTimeOfDayMs(newStart, timezone), timezone, false);
     }
     else {
-        const rawDelta = wallTimeOfDayMs(newStart, timezone) - wallTimeOfDayMs(new Date(occurrence.startDate).getTime(), timezone);
-        const delta = ((((rawDelta + MS_PER_DAY / 2) % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY) - MS_PER_DAY / 2;
+        const delta = toEventWallClock(newStart, timezone, false) - toEventWallClock(new Date(occurrence.startDate).getTime(), timezone, false);
         const masterWall = toEventWallClock(new Date(master.startDate).getTime(), timezone, false);
         masterStart = fromEventWallClock(masterWall + delta, timezone, false);
     }
+    const rule = rest.recurrenceRule;
+    const original = occurrence.recurrenceRule?.byDay;
+    if (rule?.freq === "weekly" && rule.byDay && original && dayShift % 7 !== 0 && rule.byDay.join() === original.join()) {
+        rest.recurrenceRule = { ...rule, byDay: rule.byDay.map((day) => WEEKDAY_ORDER[(WEEKDAY_ORDER.indexOf(day) + (dayShift % 7) + 7) % 7]) };
+    }
     return {
         ...rest,
         startDate: new Date(masterStart).toISOString(),
@@ -150,6 +163,8 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             targetFolderUid: folderUid,
         };
     });
+    // What an existing event's form held when it opened, to tell whether anything was changed since.
+    const [pristine] = useState(() => JSON.stringify(values));
     const { attendees, location, videoEnabled } = values;
     function update(patch) {
         setValues((prev) => ({ ...prev, ...patch }));
@@ -172,6 +187,12 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     // 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(null);
+    // Whether that stored record is a series saved with `toSeriesFields()`: its master's dates are not the form's (the occurrence's), so a retry
+    // must not send them - the first save already applied any change of time.
+    const savedAsSeries = useRef(false);
+    // A meeting minted for this event whose link onto the event could not be saved. A retry reuses it rather than minting a second one,
+    // which would send the invitees a second set of join links and leave this one orphaned.
+    const mintedMeeting = useRef(null);
     const [editScope, setEditScope] = useState("occurrence");
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
@@ -201,7 +222,9 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     }, [occurrence?.videoMeetingUid, client]);
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
-    dirtyRef.current = !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
+    dirtyRef.current = occurrence
+        ? JSON.stringify(values) !== pristine
+        : !!(values.title.trim() || values.location.trim() || values.attendees.length > 0 || values.guestDraft.trim() || values.guestInvalid.length > 0 || hasDescriptionText(values.descriptionHtml));
     function updateAttendee(index, patch) {
         setValues((prev) => ({ ...prev, attendees: prev.attendees.map((a, i) => (i === index ? { ...a, ...patch } : a)) }));
     }
@@ -217,6 +240,11 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
             ],
         }));
     }
+    // The weekday the form's start falls on, in the frame the series expands in (`undefined` while the start is not a valid date).
+    function startWeekdayOf(v) {
+        const ms = v.allDay ? Number.NaN : wallStringToMs(v.start, v.formZone, deviceZone);
+        return startWeekdayCode(v.allDay ? v.start : Number.isNaN(ms) ? "" : new Date(ms).toISOString(), v.allDay, v.timezone);
+    }
     // Moving the start moves the end with it, so the event keeps its length (a Google Calendar habit, and the way to
     // reschedule without touching two fields).
     function setStart(next) {
@@ -231,7 +259,13 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     ? `${new Date(endMs + shift).toISOString().slice(0, 10)}T00:00`
                     : msToWallString(endMs + shift, prev.formZone, deviceZone);
             }
-            return { ...prev, start: next, end: nextEnd };
+            // A weekly rule on just the start's weekday ("Weekly on Wednesday") follows the start to its new weekday - left alone it
+            // would not include the event's own first day, and the series would begin on the next of the old weekday instead.
+            const oldDay = startWeekdayOf(prev);
+            const nextDay = startWeekdayOf({ ...prev, start: next });
+            const rule = prev.recurrenceRule;
+            const followsStart = oldDay && nextDay && rule?.freq === "weekly" && rule.byDay?.length === 1 && rule.byDay[0] === oldDay;
+            return { ...prev, start: next, end: nextEnd, recurrenceRule: followsStart ? { ...rule, byDay: [nextDay] } : rule };
         });
     }
     // The recurrence end date is stored in the frame the series expands in (UTC for all-day, local otherwise),
@@ -331,23 +365,28 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                     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,
-                }, client);
+                if (!mintedMeeting.current) {
+                    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,
+                    }, client);
+                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: result.organizerJoinUrl ?? null };
+                }
+                const meeting = mintedMeeting.current;
                 const patched = await updateCalendarEvent({
                     uid: saved.uid,
                     version: saved.version,
                     location: VIDEO_LOCATION_PLACEHOLDER,
-                    videoMeetingUid: result.meeting.uid,
+                    videoMeetingUid: meeting.uid,
                 }, client);
-                setVideoMeetingUid(result.meeting.uid);
-                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
+                mintedMeeting.current = null;
+                setVideoMeetingUid(meeting.uid);
+                setOrganizerJoinUrl(meeting.organizerJoinUrl);
                 update({ location: VIDEO_LOCATION_PLACEHOLDER });
                 return { event: patched, failed: false };
             }
@@ -455,8 +494,17 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                 // 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 }, client);
+                // nothing left to shift. For a series the form's dates are those of the edited occurrence, not
+                // the master's: sending them would move the whole series to that occurrence, so they (and the
+                // zone and all-day flag they go with) stay as the first attempt left them.
+                const retryFields = { ...fields };
+                if (savedAsSeries.current) {
+                    delete retryFields.startDate;
+                    delete retryFields.endDate;
+                    delete retryFields.timezone;
+                    delete retryFields.allDay;
+                }
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...retryFields }, client);
             }
             else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
@@ -471,8 +519,9 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
                 saved = await detachOccurrence(occurrence, fields, client);
             }
             else if (occurrence.isRecurringOccurrence) {
-                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields, client)), client);
+                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields, values.formZone, client)), client);
                 saved = series;
+                savedAsSeries.current = true;
                 detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             }
             else {
@@ -507,7 +556,6 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
     // stays disabled either way, and the two are told apart below purely from `organizerJoinUrl` itself.
     const joinUrl = joinMeetingUrl(organizerJoinUrl);
     const timeZones = useMemo(() => timeZoneOptions(values.formZone, values.timezone, deviceZone), [values.formZone, values.timezone, deviceZone]);
-    const startMs = values.allDay ? Number.NaN : wallStringToMs(values.start, values.formZone, deviceZone);
     const calendarFolderUid = occurrence ? occurrence.folderUid : values.targetFolderUid;
     const controller = {
         occurrence,
@@ -520,7 +568,7 @@ export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyn
         timeZones,
         organizerAddress: effectiveOrganizerAddress,
         deviceZone,
-        startWeekday: startWeekdayCode(values.allDay ? values.start : Number.isNaN(startMs) ? "" : new Date(startMs).toISOString(), values.allDay, values.timezone),
+        startWeekday: startWeekdayOf(values),
         editingSingleOccurrence,
         updateAttendee,
         removeAttendee,

package/dist/apps/shared/components/calendar/EventFormParts.d.ts

@@ -38,11 +38,13 @@ export declare function ReminderRow({ value, onChange }: {
  * "Does not repeat" and the plain repeats as a menu, with "Custom…" opening `RecurrenceEditor`'s full set (an interval, weekdays, an end).
  * Choosing one of the plain repeats keeps the rule's skipped dates; the menu shows "Custom…" for any rule it has no plain entry for.
  */
-export declare function RecurrenceSelect({ value, onChange, allDay, startWeekday, }: {
+export declare function RecurrenceSelect({ value, onChange, allDay, startWeekday, startDateKey, }: {
     value: RecurrenceRule | null;
     onChange: (rule: RecurrenceRule | null) => void;
     allDay: boolean;
     startWeekday: WeekdayCode | undefined;
+    /** The event's start date (`yyyy-MM-dd`), for a custom rule's default end date. */
+    startDateKey?: string;
 }): React.JSX.Element;
 /** [start date] [start time] to [end time] [end date], then the "Time zone" link (and its menu), "All day" and how the event repeats. */
 export declare function DateTimeControls({ c }: {

package/dist/apps/shared/components/calendar/EventFormParts.js

@@ -124,7 +124,7 @@ function presetOf(rule, startWeekday) {
  * "Does not repeat" and the plain repeats as a menu, with "Custom…" opening `RecurrenceEditor`'s full set (an interval, weekdays, an end).
  * Choosing one of the plain repeats keeps the rule's skipped dates; the menu shows "Custom…" for any rule it has no plain entry for.
  */
-export function RecurrenceSelect({ value, onChange, allDay, startWeekday, }) {
+export function RecurrenceSelect({ value, onChange, allDay, startWeekday, startDateKey, }) {
     // Picking "Custom…" for a rule that is also a plain repeat still opens the editor.
     const [customRequested, setCustomRequested] = useState(false);
     const selected = customRequested && value ? "custom" : presetOf(value, startWeekday);
@@ -140,7 +140,7 @@ export function RecurrenceSelect({ value, onChange, allDay, startWeekday, }) {
             onChange({ ...presetRule(key, startWeekday), exceptions: value?.exceptions ?? [] });
         }
     }
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("select", { id: "event-recurrence", "aria-label": "Recurrence", className: SELECT_CLASS, value: selected, onChange: (e) => choose(e.target.value), children: [_jsx("option", { value: "none", children: "Does not repeat" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: startWeekday ? `Weekly on ${WEEKDAY_NAME[startWeekday]}` : "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Annually" }), _jsx("option", { value: "weekdays", children: "Every weekday (Monday to Friday)" }), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), selected === "custom" && _jsx(RecurrenceEditor, { value: value, onChange: onChange, allDay: allDay, startWeekday: startWeekday, hideToggle: true })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("select", { id: "event-recurrence", "aria-label": "Recurrence", className: SELECT_CLASS, value: selected, onChange: (e) => choose(e.target.value), children: [_jsx("option", { value: "none", children: "Does not repeat" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: startWeekday ? `Weekly on ${WEEKDAY_NAME[startWeekday]}` : "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Annually" }), _jsx("option", { value: "weekdays", children: "Every weekday (Monday to Friday)" }), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), selected === "custom" && _jsx(RecurrenceEditor, { value: value, onChange: onChange, allDay: allDay, startWeekday: startWeekday, startDateKey: startDateKey, hideToggle: true })] }));
 }
 const START_TIME_OPTIONS = dayTimes().map((time) => ({ value: time, label: formatTimeOfDay(time) }));
 /** [start date] [start time] to [end time] [end date], then the "Time zone" link (and its menu), "All day" and how the event repeats. */
@@ -149,7 +149,7 @@ export function DateTimeControls({ c }) {
     const [zoneOpen, setZoneOpen] = useState(false);
     return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx("input", { type: "date", "aria-label": "Event start date", className: `${SELECT_CLASS} min-w-0`, value: values.start.slice(0, 10), onChange: (e) => c.setStart(`${e.target.value}${values.start.slice(10)}`) }), !values.allDay && (_jsx(TimeComboBox, { "aria-label": "Event start time", className: `${SELECT_CLASS} w-28`, display: formatTimeOfDay(values.start.slice(11, 16)), current: values.start.slice(11, 16), options: START_TIME_OPTIONS, 
                         // Moving the start moves the end with it, so the event keeps its length: whatever the start is set to.
-                        onSelect: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`), onType: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`) })), _jsx("span", { className: "text-text-muted", children: "to" }), !values.allDay && (_jsx(TimeComboBox, { "aria-label": "Event end time", className: `${SELECT_CLASS} w-28`, display: formatTimeOfDay(values.end.slice(11, 16)), current: values.end, options: endTimeOptions(values.start).map((option) => ({ value: option.value, label: option.label, hint: option.hint })), onSelect: c.setEnd, onType: (time) => c.setEnd(`${values.end.slice(0, 11)}${time}`) })), _jsx("input", { type: "date", "aria-label": "Event end date", className: `${SELECT_CLASS} min-w-0`, value: values.end.slice(0, 10), onChange: (e) => c.setEnd(`${e.target.value}${values.end.slice(10)}`) })] }), _jsx("button", { type: "button", "aria-expanded": zoneOpen, className: "self-start text-sm text-primary-dark hover:underline", onClick: () => setZoneOpen((open) => !open), children: "Time zone" }), zoneOpen && (_jsx(TimeZonePicker, { "aria-label": "Event time zone", className: `${SELECT_CLASS} max-w-full`, value: values.formZone, zones: c.timeZones, at: zoneDate(values.start), onChange: c.onTimeZoneChange })), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: values.allDay, onChange: (e) => c.onAllDayChange(e.target.checked) }), "All day"] }), !c.editingSingleOccurrence && (_jsx(RecurrenceSelect, { value: values.recurrenceRule, onChange: (rule) => c.update({ recurrenceRule: rule }), allDay: values.allDay, startWeekday: c.startWeekday }))] }));
+                        onSelect: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`), onType: (time) => c.setStart(`${values.start.slice(0, 11)}${time}`) })), _jsx("span", { className: "text-text-muted", children: "to" }), !values.allDay && (_jsx(TimeComboBox, { "aria-label": "Event end time", className: `${SELECT_CLASS} w-28`, display: formatTimeOfDay(values.end.slice(11, 16)), current: values.end, options: endTimeOptions(values.start).map((option) => ({ value: option.value, label: option.label, hint: option.hint })), onSelect: c.setEnd, onType: (time) => c.setEnd(`${values.end.slice(0, 11)}${time}`) })), _jsx("input", { type: "date", "aria-label": "Event end date", className: `${SELECT_CLASS} min-w-0`, value: values.end.slice(0, 10), onChange: (e) => c.setEnd(`${e.target.value}${values.end.slice(10)}`) })] }), _jsx("button", { type: "button", "aria-expanded": zoneOpen, className: "self-start text-sm text-primary-dark hover:underline", onClick: () => setZoneOpen((open) => !open), children: "Time zone" }), zoneOpen && (_jsx(TimeZonePicker, { "aria-label": "Event time zone", className: `${SELECT_CLASS} max-w-full`, value: values.formZone, zones: c.timeZones, at: zoneDate(values.start), onChange: c.onTimeZoneChange })), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: values.allDay, onChange: (e) => c.onAllDayChange(e.target.checked) }), "All day"] }), !c.editingSingleOccurrence && (_jsx(RecurrenceSelect, { value: values.recurrenceRule, onChange: (rule) => c.update({ recurrenceRule: rule }), allDay: values.allDay, startWeekday: c.startWeekday, startDateKey: values.start.slice(0, 10) }))] }));
 }
 /** The calendar this event is in: its colour and name, a choice between calendars (and mailboxes) when an event is being created. */
 export function CalendarField({ c }) {

package/dist/apps/shared/components/calendar/EventMatchNav.d.ts

@@ -12,6 +12,6 @@ export interface EventMatchNavProps {
  * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
  * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
  * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
- * a field is taking them.
+ * a field or a widget (a select, a menu, a slider, ...) is taking them.
  */
 export default function EventMatchNav({ onPrevious, onNext, canPrevious, canNext, noun }: EventMatchNavProps): React.JSX.Element;

package/dist/apps/shared/components/calendar/EventMatchNav.js

@@ -6,16 +6,26 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect } from "react";
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from "react-icons/hi2";
 import { isTextEntry } from "../../keyboard/targets.js";
+/** Widgets that take the arrow keys themselves (a menu's items, a radio group, a slider, a list's options, a tab list, ...) and an open popup's trigger. */
+const ARROW_WIDGET_SELECTOR = [
+    ...["menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "radiogroup", "radio", "listbox", "option"].map((role) => `[role="${role}"]`),
+    ...["slider", "spinbutton", "tablist", "tab", "tree", "grid", "combobox"].map((role) => `[role="${role}"]`),
+    '[aria-haspopup][aria-expanded="true"]',
+].join(",");
+/** Whether the arrow keys pressed at `target` belong to what is there: a field or select, or a widget with arrows of its own. */
+function takesArrowKeys(target) {
+    return isTextEntry(target) || (target instanceof Element && target.closest(ARROW_WIDGET_SELECTOR) !== null);
+}
 /**
  * The Previous / Next match buttons beside an event's card while a search is running: the card moves on to the neighbouring result. They sit
  * inside the dialog (so Tab reaches them and the dialog's focus trap holds) but are positioned against the window - either side of the
  * centered card on a desktop, the bottom corners on a phone, where the card fills the width. The left and right arrow keys do the same unless
- * a field is taking them.
+ * a field or a widget (a select, a menu, a slider, ...) is taking them.
  */
 export default function EventMatchNav({ onPrevious, onNext, canPrevious = true, canNext = true, noun = "match" }) {
     useEffect(() => {
         function handleKeyDown(event) {
-            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || isTextEntry(event.target)) {
+            if ((event.key !== "ArrowLeft" && event.key !== "ArrowRight") || event.defaultPrevented || takesArrowKeys(event.target)) {
                 return;
             }
             if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {

package/dist/apps/shared/components/calendar/EventModal.js

@@ -7,6 +7,7 @@ import { useRef, useState } from "react";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import useIsMobile from "../../../../lib/util/useIsMobile.js";
+import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import EventDetails from "./EventDetails.js";
 import EventEditor from "./EventEditor.js";
 import EventMatchNav from "./EventMatchNav.js";
@@ -43,6 +44,10 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     const [syncWarning, setSyncWarning] = useState(false);
     // Whether the form holds anything a click on the backdrop would throw away (kept up to date by the editor).
     const dirtyRef = useRef(false);
+    // Escape or the close button on a form that holds something asks before throwing it away.
+    const [confirmingDiscard, setConfirmingDiscard] = useState(false);
+    // An event on a calendar shared with the reader view-only cannot be changed, deleted or answered.
+    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === occurrence?.mailboxUid)?.mailbox);
     if (!open) {
         return null;
     }
@@ -65,7 +70,7 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
     const width = !isForm ? DETAILS_WIDTH : layout === "expanded" ? (tab === "event" || occurrence ? FORM_WIDTH : TASK_FORM_WIDTH) : QUICK_WIDTH;
     // Leaving the form: an existing event goes back to its details, a new one is done.
     const leaveForm = occurrence ? () => setEditing(false) : onClose;
-    return (_jsxs(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? leaveForm : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: [isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
+    return (_jsxs(EventShell, { variant: variant, label: !occurrence ? "New event" : editing ? "Edit event" : "Event details", focusKey: isForm ? layout : "details", anchor: anchor, width: width, onClose: isForm ? () => (dirtyRef.current ? setConfirmingDiscard(true) : leaveForm()) : onClose, onBackdropPress: isForm ? () => !dirtyRef.current && leaveForm() : undefined, children: [isForm ? (_jsx(EventEditor, { layout: layout, onExpand: () => setExpanded(true), onCancel: leaveForm, onSaved: onSaved, onSyncWarning: () => setSyncWarning(true), dirtyRef: dirtyRef, mailboxUid: mailboxUid, folderUid: folderUid, calendars: calendars, mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: organizerAddress, occurrence: occurrence, initialStart: initialStart, initialEnd: initialEnd, initialAllDay: initialAllDay, quickCreate: occurrence
                     ? undefined
                     : {
                         tab,
@@ -74,5 +79,8 @@ export default function EventModal({ open, onClose, mailboxUid, folderUid, calen
                             setExpanded(false);
                         },
                         bookingHref,
-                    } })) : (_jsx(SlideIn, { from: matchNav?.slide?.occurrenceKey === occurrence.occurrenceKey ? matchNav.slide.from : undefined, children: _jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted }) }, occurrence.occurrenceKey)), !isForm && matchNav && _jsx(EventMatchNav, { onPrevious: matchNav.onPrevious, onNext: matchNav.onNext, canPrevious: matchNav.canPrevious, canNext: matchNav.canNext, noun: matchNav.noun })] }));
+                    } })) : (_jsx(SlideIn, { from: matchNav?.slide?.occurrenceKey === occurrence.occurrenceKey ? matchNav.slide.from : undefined, children: _jsx(EventDetails, { occurrence: occurrence, isInvited: isInvited, myResponse: canRespond ? myAttendee.responseStatus : undefined, isOwnAddress: isOwnAddress, calendarName: calendars?.find((cal) => cal.uid === occurrence.folderUid)?.name, calendarColor: folderColors?.[occurrence.folderUid], canWrite: canWrite, onClose: onClose, onModify: () => setEditing(true), onSaved: onSaved, onDeleted: onDeleted }) }, occurrence.occurrenceKey)), !isForm && matchNav && _jsx(EventMatchNav, { onPrevious: matchNav.onPrevious, onNext: matchNav.onNext, canPrevious: matchNav.canPrevious, canNext: matchNav.canNext, noun: matchNav.noun }), _jsxs(Modal, { open: confirmingDiscard, onClose: () => setConfirmingDiscard(false), title: "Discard changes?", children: [_jsx("p", { className: "text-sm mb-5", children: "What you entered in this event has not been saved." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDiscard(false), children: "Keep editing" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => {
+                                    setConfirmingDiscard(false);
+                                    leaveForm();
+                                }, children: "Discard" })] })] })] }));
 }

package/dist/apps/shared/components/calendar/FindATime.js

@@ -69,7 +69,7 @@ export default function FindATime({ c }) {
         }
     }, [startDay]);
     // You, then each guest once (case-insensitively), at most as many as one look-up may ask about.
-    const rows = useMemo(() => {
+    const { rows, skipped } = useMemo(() => {
         const seen = new Set([organizerAddress.toLowerCase()]);
         const guests = [];
         for (const attendee of values.attendees) {
@@ -79,7 +79,8 @@ export default function FindATime({ c }) {
                 guests.push({ address: attendee.address, name: attendee.displayName || attendee.address, you: false });
             }
         }
-        return [{ address: organizerAddress, name: "You", you: true }, ...guests].slice(0, FREE_BUSY_MAX_ADDRESSES);
+        const everyone = [{ address: organizerAddress, name: "You", you: true }, ...guests];
+        return { rows: everyone.slice(0, FREE_BUSY_MAX_ADDRESSES), skipped: Math.max(0, everyone.length - FREE_BUSY_MAX_ADDRESSES) };
     }, [values.attendees, organizerAddress]);
     const guestCount = rows.length - 1;
     const addresses = rows.map((row) => row.address);
@@ -168,7 +169,7 @@ export default function FindATime({ c }) {
                 .map((block) => `${block.tentative ? "Tentatively busy" : "Busy"} ${clockLabel(block.startMs, formZone, deviceZone)} to ${clockLabel(block.endMs, formZone, deviceZone)}`)
                 .join(", ");
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3 min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: () => setDayKey((key) => addDaysToKey(key, -1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u2039" }), _jsx("span", { className: "text-sm font-medium min-w-[9rem] text-center", children: dayLabel }), _jsx("button", { type: "button", "aria-label": "Next day", onClick: () => setDayKey((key) => addDaysToKey(key, 1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u203A" }), _jsx("span", { className: "text-xs text-text-muted", children: describeTimeZone(formZone, zoneDate(dayKey)) })] }), lookUp.status === "error" && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-3 text-sm text-danger", children: [_jsx("span", { children: lookUp.message }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRetry((count) => count + 1), children: "Try again" })] })), _jsx("div", { ref: scroller, role: "group", "aria-label": "Guests' availability", "aria-busy": lookUp.status === "loading", className: "overflow-x-auto border border-border rounded-md", children: _jsxs("div", { className: "relative", style: { width: NAME_WIDTH + TIMELINE_WIDTH }, children: [_jsxs("div", { className: "flex bg-surface border-b border-border", style: { height: HEADER_HEIGHT }, children: [_jsx("div", { className: "sticky left-0 z-20 shrink-0 bg-surface border-r border-border", style: { width: NAME_WIDTH } }), HOURS.map((hour) => (_jsx("button", { type: "button", "aria-label": `Start at ${hourLabel(hour)}`, title: `Start at ${hourLabel(hour)}`, onClick: () => startAt(hour * 60), className: "shrink-0 text-[10px] text-text-muted hover:bg-surface-alt hover:text-text text-left pl-1", style: { width: HOUR_WIDTH }, children: hourLabel(hour) }, hour)))] }), rows.map((row) => {
+    return (_jsxs("div", { className: "flex flex-col gap-3 min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: () => setDayKey((key) => addDaysToKey(key, -1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u2039" }), _jsx("span", { className: "text-sm font-medium min-w-[9rem] text-center", children: dayLabel }), _jsx("button", { type: "button", "aria-label": "Next day", onClick: () => setDayKey((key) => addDaysToKey(key, 1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u203A" }), _jsx("span", { className: "text-xs text-text-muted", children: describeTimeZone(formZone, zoneDate(dayKey)) })] }), skipped > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: [skipped, " ", skipped === 1 ? "guest" : "guests", " beyond the first ", FREE_BUSY_MAX_ADDRESSES - 1, " ", skipped === 1 ? "isn’t" : "aren’t", " checked, and ", skipped === 1 ? "is" : "are", " not counted in who is free."] })), lookUp.status === "error" && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-3 text-sm text-danger", children: [_jsx("span", { children: lookUp.message }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRetry((count) => count + 1), children: "Try again" })] })), _jsx("div", { ref: scroller, role: "group", "aria-label": "Guests' availability", "aria-busy": lookUp.status === "loading", className: "overflow-x-auto border border-border rounded-md", children: _jsxs("div", { className: "relative", style: { width: NAME_WIDTH + TIMELINE_WIDTH }, children: [_jsxs("div", { className: "flex bg-surface border-b border-border", style: { height: HEADER_HEIGHT }, children: [_jsx("div", { className: "sticky left-0 z-20 shrink-0 bg-surface border-r border-border", style: { width: NAME_WIDTH } }), HOURS.map((hour) => (_jsx("button", { type: "button", "aria-label": `Start at ${hourLabel(hour)}`, title: `Start at ${hourLabel(hour)}`, onClick: () => startAt(hour * 60), className: "shrink-0 text-[10px] text-text-muted hover:bg-surface-alt hover:text-text text-left pl-1", style: { width: HOUR_WIDTH }, children: hourLabel(hour) }, hour)))] }), rows.map((row) => {
                             const person = byAddress.get(row.address.toLowerCase());
                             const state = person && timeIsValid && covered ? availabilityDuring(person, eventStart, eventEnd) : undefined;
                             const hidden = person && person.status !== "available" ? person : undefined;

package/dist/apps/shared/components/calendar/ListView.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
 import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
-/** The most days one event is listed on, so an event that runs for years does not become thousands of rows. */
+/** The most days one event is listed on (counted from today), so an event that runs for years does not become thousands of rows. */
 export declare const LIST_MAX_DAYS_PER_EVENT = 366;
+/** The days (that have events) rendered at first, and how many more each time the end of the list is reached. */
+export declare const LIST_INITIAL_DAYS = 60;
+export declare const LIST_DAYS_PER_PAGE = 60;
 /** A step through the list's months: `nonce` makes a second press in the same direction a new step. */
 export interface ListStep {
     direction: 1 | -1;
@@ -24,7 +27,10 @@ export interface ListViewProps {
  * nothing at all says so). A multi-day event is listed on every day it covers, as the month grid shows it. Each row is a full-width button that
  * opens the event's card, with the time, title, place (or organizer) and its calendar's colour.
  *
- * Every day is rendered (an event is a cheap row, and a series is bounded to 500 occurrences - see `eventSearch.ts`); the days are grouped once per
- * change of `occurrences`, not per render. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
+ * The days are grouped once per change of `occurrences` (or of the day), not per render, but only the first `LIST_INITIAL_DAYS` of them are rendered:
+ * more follow as the end of the list is scrolled to (a daily series alone is thousands of rows). A jump, a step or a search match that lies beyond
+ * the rendered days renders up to it first. The list scrolls itself to `focusDate` and, on a `step`, to the neighbouring month.
  */
-export default function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps): React.JSX.Element;
+declare function ListView({ occurrences, folderColors, onSelectEvent, focusDate, jumpNonce, step }: ListViewProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ListView>;
+export default _default;