@open-webapp/calendar 0.3.0 → 0.4.0

package/README.md

@@ -174,10 +174,16 @@ Built-in copy (overridable only through the slots above):
 - Loading: "Loading calendar…".
 - Empty: "No matching events in the next 30 days".
 
+#### Footer calendar selection
+
+One footer combobox opens a shared searchable dropdown, with calendars grouped under account headings in multi-source use. Each account has its own Clear (primary, else first calendar) and filtered Select all, which adds matching calendars while retaining existing selections. Actions affect only their account; its last selected calendar cannot be deselected, including a non-primary selection.
+
 ### CalendarSelector props
 
 `calendars: CalendarInfo[]`, `selectedIds: string[]`, `onChange(ids)`, `heading?: string` (account heading in multi-source use). It has no slot props or `popupName`. At least one calendar stays selected (deselecting the last one is ignored). "Clear" resets to the primary calendar. Built-in copy: "Search calendars", "Select all", "Clear", "Done", "No calendars found", "No calendars available".
 
+The exported standalone selector keeps its single-list props and behavior; Select all adds only search matches while retaining existing selections.
+
 ### Host CSS
 
 `styles.css` is self-contained (plain colors, dark mode via `prefers-color-scheme`). It requires no host CSS variables. Variables it reads, all with defaults:
@@ -188,6 +194,10 @@ Built-in copy (overridable only through the slots above):
 
 The Unaccepted count badge uses `.calendar-rsvp-chip-badge`, with light and dark styling included in `styles.css`.
 
+## 0.4.0 (BREAKING pre-1.0 minor)
+
+- CalendarPane replaces per-account footer triggers with one shared dropdown grouped by account. Hosts relying on multiple footer triggers must adapt. Account-local selection rules and the exported standalone CalendarSelector remain compatible.
+
 ## 0.3.0 (minor, additive)
 
 - Adds the Unaccepted exclusive shortcut after Accepted, Maybe, and Declined, with local selection restoration and default fallback as described above.

package/dist/react/CalendarPane.js

@@ -1,7 +1,7 @@
 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';
+import { GroupedCalendarSelector } from './CalendarSelector.js';
 function toggleRsvpStatus(selection, status) {
     const next = new Set(selection);
     if (next.has(status)) {
@@ -343,7 +343,13 @@ export function CalendarPane(props) {
                                                                     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))) }))] }));
+                                    })] }, 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: _jsx(GroupedCalendarSelector, { groups: calendarSources.map((s) => ({
+                        id: s.id,
+                        calendars: controller.getCalendars(s.id),
+                        selectedIds: controller.getSelectedIds(s.id),
+                        onChange: (ids) => {
+                            void controller.setSelectedIds(s.id, ids);
+                        },
+                        heading: multi ? s.email : undefined,
+                    })) }) }))] }));
 }

package/dist/react/CalendarSelector.d.ts

@@ -7,4 +7,10 @@ interface CalendarSelectorProps {
     heading?: string;
 }
 export declare function CalendarSelector({ calendars, selectedIds, onChange, heading }: CalendarSelectorProps): import("react").JSX.Element;
+/** Internal pane renderer; intentionally not re-exported from the package barrel. */
+export declare function GroupedCalendarSelector({ groups }: {
+    groups: (CalendarSelectorProps & {
+        id: string;
+    })[];
+}): import("react").JSX.Element;
 export {};

package/dist/react/CalendarSelector.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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 }) {
+    return _jsx(GroupedCalendarSelector, { groups: [{ id: '', calendars, selectedIds, onChange, heading }] });
+}
+/** Internal pane renderer; intentionally not re-exported from the package barrel. */
+export function GroupedCalendarSelector({ groups }) {
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
     const [activeIndex, setActiveIndex] = useState(0);
@@ -9,8 +13,9 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
     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;
+    const visibleGroups = groups.map((group) => ({ ...group, visible: filterCalendarsByName(group.calendars, query) }));
+    const visibleCalendars = visibleGroups.flatMap((group) => group.visible.map((calendar) => ({ calendar, group })));
+    const optionId = (sourceId, calendarId) => `${listboxId}-${encodeURIComponent(JSON.stringify([sourceId, calendarId]))}`;
     useEffect(() => {
         if (open)
             searchRef.current?.focus();
@@ -37,7 +42,8 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
         setOpen(false);
         buttonRef.current?.focus();
     }
-    function toggle(id) {
+    function toggle(group, id) {
+        const { selectedIds, onChange } = group;
         if (selectedIds.includes(id)) {
             if (selectedIds.length === 1)
                 return;
@@ -46,11 +52,13 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
         }
         onChange([...selectedIds, id]);
     }
-    function selectAll() {
-        const visibleIds = visibleCalendars.map((calendar) => calendar.id);
+    function selectAll(group) {
+        const { selectedIds, onChange } = group;
+        const visibleIds = group.visible.map((calendar) => calendar.id);
         onChange([...selectedIds, ...visibleIds.filter((id) => !selectedIds.includes(id))]);
     }
-    function clear() {
+    function clear({ calendars, onChange }) {
+        const primaryId = calendars.find((calendar) => calendar.primary)?.id ?? calendars[0]?.id;
         onChange(primaryId ? [primaryId] : []);
     }
     function handleListboxKeyDown(event) {
@@ -75,16 +83,19 @@ export function CalendarSelector({ calendars, selectedIds, onChange, heading })
             event.preventDefault();
             const activeCalendar = visibleCalendars[activeIndex];
             if (activeCalendar)
-                toggle(activeCalendar.id);
+                toggle(activeCalendar.group, activeCalendar.calendar.id);
         }
     }
-    const label = summarizeCalendarSelection(selectedIds, calendars);
+    const label = groups.length === 1
+        ? summarizeCalendarSelection(groups[0].selectedIds, groups[0].calendars)
+        : `${groups.reduce((count, group) => count + group.selectedIds.length, 0)} calendars selected`;
+    const activeCalendar = visibleCalendars[activeIndex];
     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) => {
+                }, children: label }), open && (_jsxs("div", { className: "calendar-selector-dropdown calendar-selector-dropdown--upward", onKeyDown: handleListboxKeyDown, children: [groups.length === 1 && groups[0].heading && (_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: groups[0].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)))) })] }))] }));
+                        } }), _jsxs("div", { className: "calendar-selector-actions", children: [groups.length === 1 && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => selectAll(visibleGroups[0]), children: "Select all" }), _jsx("button", { type: "button", onClick: () => clear(groups[0]), children: "Clear" })] }), _jsx("button", { type: "button", onClick: close, children: "Done" })] }), _jsx("div", { id: listboxId, role: "listbox", "aria-multiselectable": "true", "aria-activedescendant": activeCalendar ? optionId(activeCalendar.group.id, activeCalendar.calendar.id) : undefined, tabIndex: -1, children: visibleGroups.map((group) => (_jsxs("div", { role: groups.length > 1 ? 'group' : undefined, "aria-label": group.heading, children: [groups.length > 1 && _jsxs(_Fragment, { children: [_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: group.heading }), _jsxs("div", { className: "calendar-selector-actions", children: [_jsx("button", { type: "button", onClick: () => selectAll(group), children: "Select all" }), _jsx("button", { type: "button", onClick: () => clear(group), children: "Clear" })] })] }), group.calendars.length === 0 ? (_jsx("p", { children: "No calendars available" })) : group.visible.length === 0 ? (_jsx("p", { children: "No calendars found" })) : (group.visible.map((calendar) => (_jsxs("button", { type: "button", id: optionId(group.id, calendar.id), role: "option", title: calendar.summary, "aria-selected": group.selectedIds.includes(calendar.id), "data-active": (activeCalendar?.group.id === group.id && activeCalendar.calendar.id === calendar.id) || undefined, onClick: () => toggle(group, calendar.id), children: [_jsx("input", { type: "checkbox", className: "calendar-selector-checkbox", checked: group.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 })] }, optionId(group.id, calendar.id)))))] }, group.id))) })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-webapp/calendar",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "repository": {
     "type": "git",