@open-webapp/calendar 0.0.0-stage → 0.2.0

package/dist/react/CalendarPane.js

@@ -0,0 +1,328 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
+import { CalendarSelector } from './CalendarSelector.js';
+function useWindowWidth() {
+    const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    useEffect(() => {
+        const handler = () => setWidth(window.innerWidth);
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, []);
+    return width;
+}
+const SOURCE_COLORS = ['#4285f4', '#ea4335', '#34a853', '#fbbc04', '#a142f4', '#00acc1', '#ff7043', '#8d6e63'];
+const RSVP_CHIPS = [
+    {
+        status: 'accepted',
+        label: 'Accepted',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3 7.7L6 10.7L12 4.3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+    },
+    {
+        status: 'tentative',
+        label: 'Maybe',
+        icon: (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("path", { d: "M5.2 5.6C5.2 4.2 6.2 3.2 7.5 3.2C8.8 3.2 9.8 4.2 9.8 5.4C9.8 6.8 7.6 6.9 7.6 8.8", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "7.6", cy: "11.2", r: "0.9", fill: "currentColor" })] })),
+    },
+    {
+        status: 'needsAction',
+        label: 'Unaccepted',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("circle", { cx: "7.5", cy: "7.5", r: "4.3", stroke: "currentColor", strokeWidth: "1.4" }) })),
+    },
+    {
+        status: 'declined',
+        label: 'Declined',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M4 4L11 11M11 4L4 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })),
+    },
+];
+const DEFAULT_POPUP_NAME = 'notesdiary-cal-event';
+const POPUP_W = 560;
+const POPUP_H = 760;
+function openEventPopup(url, popupRef, popupName) {
+    const existingPopup = popupRef.current;
+    if (existingPopup && !existingPopup.closed) {
+        try {
+            existingPopup.location = url;
+            existingPopup.focus();
+            return;
+        }
+        catch {
+            popupRef.current = null;
+        }
+    }
+    const left = Math.max(0, Math.round((window.screenX ?? 0) + (window.outerWidth - POPUP_W) / 2));
+    const top = Math.max(0, Math.round((window.screenY ?? 0) + (window.outerHeight - POPUP_H) / 2));
+    const popup = window.open(url, popupName, `popup,width=${POPUP_W},height=${POPUP_H},left=${left},top=${top}`);
+    if (!popup) {
+        window.open(url, '_blank');
+        return;
+    }
+    popupRef.current = popup;
+    try {
+        popup.opener = null;
+    }
+    catch {
+        // ignore
+    }
+    popup.focus();
+}
+function toIsoDate(d) {
+    return d.toISOString().slice(0, 10);
+}
+function formatTimeOfDay(dateTime) {
+    const d = new Date(dateTime);
+    return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+}
+function formatTimeRange(event) {
+    const startDateTime = event.start.dateTime;
+    const endDateTime = event.end.dateTime;
+    if (!startDateTime)
+        return '';
+    const start = formatTimeOfDay(startDateTime);
+    if (!endDateTime)
+        return start;
+    return `${start} – ${formatTimeOfDay(endDateTime)}`;
+}
+function usableUrl(url) {
+    if (typeof url !== 'string')
+        return null;
+    const trimmed = url.trim();
+    return trimmed === '' ? null : trimmed;
+}
+export function CalendarPane(props) {
+    const isDesktop = useWindowWidth() >= 960;
+    const { sources, controller, selectedRsvpStatuses } = props;
+    const popupName = props.popupName ?? DEFAULT_POPUP_NAME;
+    const [version, setVersion] = useState(0);
+    useEffect(() => {
+        const unsubscribe = controller.subscribe(() => setVersion((v) => v + 1));
+        setVersion((v) => v + 1);
+        return unsubscribe;
+    }, [controller]);
+    useEffect(() => {
+        if (typeof controller.hydrate === 'function')
+            void Promise.resolve(controller.hydrate()).catch(() => { });
+    }, [controller]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const events = useMemo(() => controller.getEvents(), [controller, version]);
+    const statuses = controller.getSourceStatus();
+    const connected = props.connected ?? sources.length > 0;
+    const ctrlState = controller.getState();
+    const multi = sources.length >= 2;
+    const needsScopeSources = sources.filter((s) => statuses[s.id] === 'needs-scope');
+    const needsReauth = connected && (props.needsReauth ?? (sources.length > 0 && needsScopeSources.length === sources.length));
+    const sourceColor = (id) => SOURCE_COLORS[Math.max(0, sources.findIndex((s) => s.id === id)) % SOURCE_COLORS.length];
+    const sourceEmail = (id) => sources.find((s) => s.id === id)?.email ?? '';
+    const todayIso = toIsoDate(new Date());
+    const dayHeaderRefs = useRef(new Map());
+    const timedEventRefs = useRef(new Map());
+    const hasScrolledForEventsRef = useRef(false);
+    const paneRef = useRef(null);
+    const chipsRef = useRef(null);
+    const popupRef = useRef(null);
+    const [now, setNow] = useState(() => new Date());
+    const filteredEvents = useMemo(() => filterByRsvp(events, selectedRsvpStatuses), [events, selectedRsvpStatuses]);
+    const calendarsByKey = useMemo(() => {
+        const map = new Map();
+        for (const s of sources)
+            for (const c of controller.getCalendars(s.id))
+                map.set(`${s.id}\u0000${c.id}`, c);
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sources, controller, version]);
+    const currentEventKeys = useMemo(() => {
+        const ids = new Set();
+        for (const event of filteredEvents) {
+            if (isEventCurrent(event, now)) {
+                ids.add(getCalendarEventKey(event));
+            }
+        }
+        return ids;
+    }, [filteredEvents, now]);
+    const nextUpcomingEvent = findNextUpcomingEvent(filteredEvents, now);
+    const selectedEventKey = currentEventKeys.values().next().value ??
+        (nextUpcomingEvent ? getCalendarEventKey(nextUpcomingEvent) : undefined);
+    function handleToggle(status) {
+        const next = new Set(selectedRsvpStatuses);
+        if (next.has(status)) {
+            next.delete(status);
+            if (next.size === 0) {
+                props.onRsvpStatusesChange(new Set(DEFAULT_RSVP_STATUSES));
+                return;
+            }
+        }
+        else {
+            next.add(status);
+        }
+        props.onRsvpStatusesChange(next);
+    }
+    const dayGroups = groupByDay(filteredEvents, todayIso);
+    function scrollToToday(behavior = 'auto') {
+        const todayEl = dayHeaderRefs.current.get(todayIso);
+        if (todayEl && typeof todayEl.scrollIntoView === 'function') {
+            todayEl.scrollIntoView({ behavior, block: 'start' });
+        }
+    }
+    function recenter(behavior) {
+        const el = selectedEventKey ? timedEventRefs.current.get(selectedEventKey) : undefined;
+        if (el && typeof el.scrollIntoView === 'function') {
+            el.scrollIntoView({ behavior, block: 'center' });
+            return;
+        }
+        scrollToToday(behavior);
+    }
+    const recenterRef = useRef(recenter);
+    recenterRef.current = recenter;
+    const idleRecenteredRef = useRef(false);
+    useEffect(() => {
+        let idleTimeoutId;
+        function fireIdle() {
+            recenterRef.current('smooth');
+            idleRecenteredRef.current = true;
+        }
+        function onActivity() {
+            if (idleRecenteredRef.current) {
+                idleRecenteredRef.current = false;
+            }
+            clearTimeout(idleTimeoutId);
+            idleTimeoutId = setTimeout(fireIdle, 30000);
+        }
+        window.addEventListener('mousemove', onActivity);
+        window.addEventListener('keydown', onActivity);
+        window.addEventListener('click', onActivity);
+        window.addEventListener('scroll', onActivity, { passive: true });
+        window.addEventListener('touchstart', onActivity, { passive: true });
+        onActivity();
+        return () => {
+            window.removeEventListener('mousemove', onActivity);
+            window.removeEventListener('keydown', onActivity);
+            window.removeEventListener('click', onActivity);
+            window.removeEventListener('scroll', onActivity);
+            window.removeEventListener('touchstart', onActivity);
+            clearTimeout(idleTimeoutId);
+        };
+    }, []);
+    useEffect(() => {
+        if (events.length === 0) {
+            hasScrolledForEventsRef.current = false;
+            return;
+        }
+        if (hasScrolledForEventsRef.current)
+            return;
+        recenterRef.current('auto');
+        hasScrolledForEventsRef.current = true;
+    }, [events, todayIso]);
+    useEffect(() => {
+        let timeoutId;
+        function scheduleNext() {
+            const nowMs = Date.now();
+            let nextBoundaryMs = Infinity;
+            for (const event of filteredEvents) {
+                if (event.isAllDay)
+                    continue;
+                const startMs = event.start.dateTime ? new Date(event.start.dateTime).getTime() : NaN;
+                const endMs = event.end.dateTime ? new Date(event.end.dateTime).getTime() : NaN;
+                if (!Number.isNaN(startMs) && startMs > nowMs && startMs < nextBoundaryMs) {
+                    nextBoundaryMs = startMs;
+                }
+                if (!Number.isNaN(endMs) && endMs > nowMs && endMs < nextBoundaryMs) {
+                    nextBoundaryMs = endMs;
+                }
+            }
+            if (nextBoundaryMs !== Infinity) {
+                timeoutId = setTimeout(() => {
+                    setNow(new Date());
+                    setTimeout(() => {
+                        if (idleRecenteredRef.current) {
+                            recenterRef.current('smooth');
+                        }
+                    }, 0);
+                    scheduleNext();
+                }, nextBoundaryMs - nowMs);
+            }
+        }
+        setNow(new Date());
+        scheduleNext();
+        return () => {
+            if (timeoutId !== undefined)
+                clearTimeout(timeoutId);
+        };
+    }, [filteredEvents]);
+    useEffect(() => {
+        const chipsEl = chipsRef.current;
+        const paneEl = paneRef.current;
+        if (!chipsEl || !paneEl)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            // contentRect excludes padding; the sticky day-header offset needs the
+            // chip row's full border-box height (chips have vertical padding).
+            const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+            paneEl.style.setProperty('--chip-row-height', `${height}px`);
+        });
+        observer.observe(chipsEl);
+        return () => observer.disconnect();
+    }, [connected, needsReauth]);
+    if (!connected) {
+        return (_jsx("div", { className: "calendar-pane", children: _jsx("div", { className: "calendar-pane-prompt", children: props.emptyState ?? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Not connected to Google Calendar." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onConnect, children: "Connect Google Calendar" })] })) }) }));
+    }
+    if (needsReauth) {
+        return (_jsx("div", { className: "calendar-pane", children: _jsx("div", { className: "calendar-pane-prompt", children: props.sourceNotice && needsScopeSources.length > 0 ? (needsScopeSources.map((s) => _jsx("div", { children: props.sourceNotice?.(s) }, s.id))) : (_jsxs(_Fragment, { children: [_jsx("p", { children: "Calendar connection needs reauthorization." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onReconnect, children: "Reconnect to restore sync" })] })) }) }));
+    }
+    const sourcesWithEvents = new Set(filteredEvents.map((e) => e.sourceId));
+    const hasErrorWithoutEvents = sources.some((s) => statuses[s.id] === 'error' && !sourcesWithEvents.has(s.id));
+    const calendarSources = sources.filter((s) => controller.getCalendars(s.id).length > 0);
+    const error = hasErrorWithoutEvents || (ctrlState.error && filteredEvents.length === 0);
+    const loading = ctrlState.loading && filteredEvents.length === 0;
+    const emptyStateText = 'No matching events in the next 30 days';
+    const showCalendarSelector = calendarSources.length > 0;
+    return (_jsxs("div", { className: "calendar-pane", ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", children: [_jsxs("div", { className: "calendar-rsvp-chips", ref: chipsRef, children: [_jsx("button", { type: "button", className: "calendar-rsvp-chip calendar-scroll-today-btn", "aria-label": "Scroll to today", title: "Scroll to today", onClick: () => recenter('smooth'), children: _jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("rect", { x: "2", y: "3", width: "11", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M2 6H13", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M5 2V4M10 2V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("circle", { cx: "7.5", cy: "9.5", r: "1.3", fill: "currentColor" })] }) }), RSVP_CHIPS.map((chip) => (_jsx("button", { type: "button", className: `calendar-rsvp-chip${selectedRsvpStatuses.has(chip.status) ? ' selected' : ''}`, "aria-pressed": selectedRsvpStatuses.has(chip.status), "aria-label": chip.label, title: chip.label, onClick: () => handleToggle(chip.status), children: chip.icon }, chip.status)))] }), needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))), error && (_jsx("div", { className: "empty-state calendar-empty-state", role: "alert", children: _jsx("p", { children: "Couldn't load calendar events. Try again shortly." }) })), !(error && filteredEvents.length === 0) && (_jsxs("div", { className: "calendar-day-groups", children: [dayGroups.map((group) => (_jsxs("div", { className: "calendar-day-group", children: [_jsx("div", { className: "calendar-day-header", ref: (el) => {
+                                            if (el) {
+                                                dayHeaderRefs.current.set(group.dateKey, el);
+                                            }
+                                            else {
+                                                dayHeaderRefs.current.delete(group.dateKey);
+                                            }
+                                        }, children: formatDayHeader(group.dateKey, todayIso) }), group.events.map((event) => {
+                                        const eventKey = getCalendarEventKey(event);
+                                        const calendar = calendarsByKey.get(`${event.sourceId}\u0000${event.calendarId}`);
+                                        const showCalendarLabel = calendar && !calendar.primary;
+                                        const organizerLabel = getOrganizerLabel(event);
+                                        const showOrganizerLabel = multi
+                                            ? true
+                                            : organizerLabel && (!showCalendarLabel || organizerLabel !== calendar.summary);
+                                        const organizerText = multi
+                                            ? organizerLabel
+                                                ? `${organizerLabel} · ${sourceEmail(event.sourceId)}`
+                                                : sourceEmail(event.sourceId)
+                                            : organizerLabel;
+                                        const rsvpStatus = RSVP_CHIPS.some((chip) => chip.status === event.selfResponseStatus)
+                                            ? event.selfResponseStatus
+                                            : 'needsAction';
+                                        if (event.isAllDay) {
+                                            return (_jsxs("div", { className: `calendar-event-allday calendar-event-row--rsvp-${rsvpStatus}`, children: [_jsxs("span", { className: "calendar-event-title-wrap", children: [_jsx("span", { className: "calendar-event-title", children: event.summary }), props.renderEventAction?.(event)] }), showCalendarLabel && (_jsxs("span", { className: "calendar-event-calendar", children: [_jsx("span", { className: "calendar-event-calendar-dot", style: { backgroundColor: calendar.backgroundColor } }), calendar.summary] })), showOrganizerLabel && (_jsxs("span", { className: "calendar-event-organizer", children: [multi && (_jsx("span", { className: "calendar-event-source-dot", style: { backgroundColor: sourceColor(event.sourceId) } })), organizerText] }))] }, eventKey));
+                                        }
+                                        const hasLink = usableUrl(event.htmlLink) !== null;
+                                        return (_jsxs("div", { className: `calendar-event-row${currentEventKeys.has(eventKey) ? ' calendar-event-row--current' : ''}${selectedEventKey === eventKey ? ' calendar-event-row--selected' : ''} calendar-event-row--rsvp-${rsvpStatus}`, ref: (el) => {
+                                                if (el) {
+                                                    timedEventRefs.current.set(eventKey, el);
+                                                }
+                                                else {
+                                                    timedEventRefs.current.delete(eventKey);
+                                                }
+                                            }, children: [_jsxs("div", { className: "calendar-event-header", children: [_jsx("span", { className: "calendar-event-time", children: formatTimeRange(event) }), event.joinUrl && (_jsx("a", { className: "calendar-event-join", href: event.joinUrl, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), children: "Join" }))] }), _jsxs("div", { className: "calendar-event-title-wrap", children: [hasLink ? (_jsx("a", { className: "calendar-event-title-link", href: event.htmlLink, target: "_blank", rel: "noopener noreferrer", onClick: (e) => {
+                                                                if (isDesktop &&
+                                                                    e.button === 0 &&
+                                                                    !e.ctrlKey &&
+                                                                    !e.metaKey &&
+                                                                    !e.shiftKey &&
+                                                                    !e.altKey) {
+                                                                    e.preventDefault();
+                                                                    openEventPopup(event.htmlLink, popupRef, popupName);
+                                                                }
+                                                            }, children: _jsx("span", { className: "calendar-event-title", children: event.summary }) })) : (_jsx("span", { className: "calendar-event-title", children: event.summary })), props.renderEventAction?.(event)] }), showCalendarLabel && (_jsxs("span", { className: "calendar-event-calendar", children: [_jsx("span", { className: "calendar-event-calendar-dot", style: { backgroundColor: calendar.backgroundColor } }), calendar.summary] })), showOrganizerLabel && (_jsxs("span", { className: "calendar-event-organizer", children: [multi && (_jsx("span", { className: "calendar-event-source-dot", style: { backgroundColor: sourceColor(event.sourceId) } })), organizerText] }))] }, eventKey));
+                                    })] }, group.dateKey))), loading && _jsx("p", { className: "calendar-empty-state-text", children: "Loading calendar\u2026" }), filteredEvents.length === 0 && !loading && !error && needsScopeSources.length === 0 && _jsx("p", { className: "calendar-empty-state-text", children: emptyStateText })] }))] }), showCalendarSelector && (_jsx("footer", { className: "calendar-pane-footer", children: calendarSources.map((s) => (_jsx(CalendarSelector, { calendars: controller.getCalendars(s.id), selectedIds: controller.getSelectedIds(s.id), onChange: (ids) => {
+                        void controller.setSelectedIds(s.id, ids);
+                    }, heading: multi ? s.email : undefined }, s.id))) }))] }));
+}

package/dist/react/CalendarSelector.d.ts

@@ -0,0 +1,10 @@
+import type { CalendarInfo } from '../core/types.js';
+interface CalendarSelectorProps {
+    calendars: CalendarInfo[];
+    selectedIds: string[];
+    onChange: (selectedIds: string[]) => void;
+    /** Optional account heading (used when several sources are shown). */
+    heading?: string;
+}
+export declare function CalendarSelector({ calendars, selectedIds, onChange, heading }: CalendarSelectorProps): import("react").JSX.Element;
+export {};

package/dist/react/CalendarSelector.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { filterCalendarsByName, summarizeCalendarSelection } from '../core/events.js';
+export function CalendarSelector({ calendars, selectedIds, onChange, heading }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(0);
+    const buttonRef = useRef(null);
+    const searchRef = useRef(null);
+    const rootRef = useRef(null);
+    const listboxId = useId();
+    const visibleCalendars = filterCalendarsByName(calendars, query);
+    const primaryId = calendars.find((calendar) => calendar.primary)?.id ?? calendars[0]?.id;
+    useEffect(() => {
+        if (open)
+            searchRef.current?.focus();
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        function onMouseDown(event) {
+            if (rootRef.current && !rootRef.current.contains(event.target))
+                setOpen(false);
+        }
+        function onKeyDown(event) {
+            if (event.key === 'Escape')
+                setOpen(false);
+        }
+        document.addEventListener('mousedown', onMouseDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open]);
+    function close() {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }
+    function toggle(id) {
+        if (selectedIds.includes(id)) {
+            if (selectedIds.length === 1)
+                return;
+            onChange(selectedIds.filter((selectedId) => selectedId !== id));
+            return;
+        }
+        onChange([...selectedIds, id]);
+    }
+    function selectAll() {
+        const visibleIds = visibleCalendars.map((calendar) => calendar.id);
+        onChange([...selectedIds, ...visibleIds.filter((id) => !selectedIds.includes(id))]);
+    }
+    function clear() {
+        onChange(primaryId ? [primaryId] : []);
+    }
+    function handleListboxKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+            return;
+        }
+        if (visibleCalendars.length === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveIndex((index) => (index + 1) % visibleCalendars.length);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveIndex((index) => (index - 1 + visibleCalendars.length) % visibleCalendars.length);
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            const activeCalendar = visibleCalendars[activeIndex];
+            if (activeCalendar)
+                toggle(activeCalendar.id);
+        }
+    }
+    const label = summarizeCalendarSelection(selectedIds, calendars);
+    return (_jsxs("div", { className: "calendar-selector", ref: rootRef, children: [_jsx("button", { ref: buttonRef, type: "button", role: "combobox", "aria-label": label, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", onClick: () => {
+                    setOpen((isOpen) => !isOpen);
+                    setQuery('');
+                    setActiveIndex(0);
+                }, children: label }), open && (_jsxs("div", { className: "calendar-selector-dropdown calendar-selector-dropdown--upward", onKeyDown: handleListboxKeyDown, children: [heading && (_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: heading })), _jsx("input", { ref: searchRef, type: "search", role: "searchbox", "aria-label": "Search calendars", value: query, onChange: (event) => {
+                            setQuery(event.target.value);
+                            setActiveIndex(0);
+                        } }), _jsxs("div", { className: "calendar-selector-actions", children: [_jsx("button", { type: "button", onClick: selectAll, children: "Select all" }), _jsx("button", { type: "button", onClick: clear, children: "Clear" }), _jsx("button", { type: "button", onClick: close, children: "Done" })] }), _jsx("div", { id: listboxId, role: "listbox", "aria-multiselectable": "true", "aria-activedescendant": visibleCalendars[activeIndex] ? `${listboxId}-${visibleCalendars[activeIndex].id}` : undefined, tabIndex: -1, children: calendars.length === 0 ? (_jsx("p", { children: "No calendars available" })) : visibleCalendars.length === 0 ? (_jsx("p", { children: "No calendars found" })) : (visibleCalendars.map((calendar, index) => (_jsxs("button", { type: "button", id: `${listboxId}-${calendar.id}`, role: "option", title: calendar.summary, "aria-selected": selectedIds.includes(calendar.id), "data-active": index === activeIndex || undefined, onClick: () => toggle(calendar.id), children: [_jsx("input", { type: "checkbox", className: "calendar-selector-checkbox", checked: selectedIds.includes(calendar.id), readOnly: true, tabIndex: -1, "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true", className: "calendar-selector-dot", "data-testid": `calendar-color-${calendar.id}`, style: { backgroundColor: calendar.backgroundColor } }), _jsx("span", { className: "calendar-selector-name", title: calendar.summary, children: calendar.summary })] }, calendar.id)))) })] }))] }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export { CalendarPane } from './CalendarPane.js';
+export type { CalendarPaneProps, RsvpSelection } from './CalendarPane.js';
+export { CalendarSelector } from './CalendarSelector.js';

package/dist/react/index.js

@@ -0,0 +1,2 @@
+export { CalendarPane } from './CalendarPane.js';
+export { CalendarSelector } from './CalendarSelector.js';