@open-webapp/calendar 0.8.2 → 0.9.1

package/README.md

@@ -205,7 +205,7 @@ Timed meeting headers keep the time left and `[Join] [RSVP glyph]` right, with a
 
 Both components follow the OS/browser `prefers-color-scheme` preference live in `'system'` mode; omitting `theme` preserves this default. Explicit `'light'` and `'dark'` ignore OS changes. Hosts can change the prop on a mounted component (including back to `'system'` or `undefined`) without remounting, closing an open dropdown, losing its search query, focus or keyboard-active option, changing selected calendars, or resetting the pane's current RSVP selection. Theme changes do not trigger selection callbacks or controller refreshes.
 
-Each pane forwards its requested mode to its unified grouped footer selector, including both account groups, account-local actions and the shared search. The single-trigger structure and cross-account keyboard navigation are preserved; the approved trigger geometry exception is described above. Standalone selectors choose their own mode: an omitted/system selector follows the OS even inside an explicitly dark or light pane. Adjacent and nested instances can use opposite modes independently; no document/body theme switch is applied.
+Each pane forwards its requested mode to its unified grouped footer selector, including both account groups, account-local actions and the shared search. The single-trigger structure and cross-account keyboard navigation are preserved; the approved trigger geometry and action-only styling exceptions are described here. Standalone selectors choose their own mode: an omitted/system selector follows the OS even inside an explicitly dark or light pane. Adjacent and nested instances can use opposite modes independently; no document/body theme switch is applied.
 
 The host owns theme-picker UI and preference persistence (for example, saving a choice and passing it back as `theme`). The package neither stores the choice nor adds it to the controller. Hosts also own styling of `emptyState`, `sourceNotice` and `renderEventAction` slot content; give custom content explicit styles where needed rather than relying on the built-in palette.
 
@@ -225,6 +225,12 @@ The Unaccepted count badge uses `.calendar-rsvp-chip-badge`, with light and dark
 
 The shared `.calendar-selector-trigger` uses border-box inline-flex, centered alignment, an 8px gap, 36px minimum height, 8px 12px padding, 6px radius, a 1px solid control border, inherited font and pointer cursor. `.calendar-selector-trigger-label` bounds long labels with ellipsis; `.calendar-selector-chevron` stays 12px and does not shrink or add a tab stop. Existing scoped surface/text/control-border tokens style the resting trigger, the hover token supplies its hover background, and the focus token supplies a 2px `:focus-visible` outline with 2px offset. This approved visual-only exception changes trigger geometry and its derived dropdown position, preserving surrounding layout and theme isolation. Import the shipped stylesheet for both footer and standalone use.
 
+Done, Select all and Clear use the approved action-only flat styling via `.calendar-selector-actions > button` in standalone and grouped footer dropdowns: transparent resting background, zero border, no shadow, inherited font, `--calendar-selector-text` color and pointer cursor. Hover uses `--calendar-hover`; pointer focus has no decorative outline, while keyboard `:focus-visible` uses a 2px solid `--calendar-focus` outline with 2px offset. Action padding, row flex layout and 8px gap/top/bottom margins, footer/dropdown geometry, trigger/search/option styling, other native controls and all selection, callback and focus-return contracts are preserved.
+
+## 0.9.0 (BREAKING pre-1.0 minor)
+
+- User-approved replacement of the frozen native dropdown-action appearance: Done, Select all and Clear are flat and themed with hover and keyboard-focus treatment as described above. Hosts relying on the former native action appearance must adapt. Other visual, interaction, public API and storage contracts are preserved; no data migration is required.
+
 ## 0.8.0 (BREAKING pre-1.0 minor)
 
 - Unaccepted independently toggles `needsAction`, replacing the exclusive shortcut and local restoration introduced in 0.3.0. Hosts relying on pending-only callbacks or restoration must adapt to callbacks reflecting current membership.

package/dist/react/CalendarPane.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, formatRibbonLabel, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
 import { GroupedCalendarSelector } from './CalendarSelector.js';
 function toggleRsvpStatus(selection, status) {
@@ -144,6 +144,8 @@ export function CalendarPane(props) {
     const chipsRef = useRef(null);
     const scrollRef = useRef(null);
     const popupRef = useRef(null);
+    const anchorSnapshotRef = useRef(null);
+    const didMountRsvpRef = useRef(false);
     const [now, setNow] = useState(() => new Date());
     const unacceptedCount = useMemo(() => events.filter((event) => event.selfResponseStatus === 'needsAction').length, [events]);
     const filteredEvents = useMemo(() => filterByRsvp(events, selectedRsvpStatuses), [events, selectedRsvpStatuses]);
@@ -167,6 +169,53 @@ export function CalendarPane(props) {
     const nextUpcomingEvent = findNextUpcomingEvent(filteredEvents, now);
     const selectedEventKey = currentEventKeys.values().next().value ??
         (nextUpcomingEvent ? getCalendarEventKey(nextUpcomingEvent) : undefined);
+    function captureAnchorSnapshot() {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const scrollRect = scrollEl.getBoundingClientRect();
+        const offsets = new Map();
+        let anchor;
+        for (const [dateKey, header] of dayHeaderRefs.current) {
+            const rect = header.getBoundingClientRect();
+            offsets.set(dateKey, rect.top - scrollRect.top);
+            if (rect.bottom > scrollRect.top && (anchor === undefined || dateKey < anchor))
+                anchor = dateKey;
+        }
+        anchorSnapshotRef.current = anchor === undefined ? null : { anchor, offsets };
+    }
+    // Keep the visible date stable when RSVP filtering adds/removes day groups above the viewport.
+    useEffect(() => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const onScroll = () => captureAnchorSnapshot();
+        scrollEl.addEventListener('scroll', onScroll, { passive: true });
+        return () => scrollEl.removeEventListener('scroll', onScroll);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useLayoutEffect(() => {
+        if (!didMountRsvpRef.current) {
+            didMountRsvpRef.current = true;
+            return;
+        }
+        const scrollEl = scrollRef.current;
+        const snap = anchorSnapshotRef.current;
+        if (!scrollEl || !snap)
+            return;
+        const keys = Array.from(dayHeaderRefs.current.keys()).sort();
+        const target = (dayHeaderRefs.current.has(snap.anchor) ? snap.anchor : undefined) ??
+            keys.find((k) => k > snap.anchor && snap.offsets.has(k)) ??
+            keys.reverse().find((k) => k < snap.anchor && snap.offsets.has(k));
+        const header = target ? dayHeaderRefs.current.get(target) : undefined;
+        if (target && header) {
+            const delta = header.getBoundingClientRect().top - scrollEl.getBoundingClientRect().top - snap.offsets.get(target);
+            if (delta !== 0)
+                scrollEl.scrollTop += delta;
+        }
+        captureAnchorSnapshot();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRsvpStatuses]);
     function handleToggle(status) {
         props.onRsvpStatusesChange(toggleRsvpStatus(selectedRsvpStatuses, status));
     }

package/dist/styles.css

@@ -729,6 +729,28 @@
   color: var(--calendar-control-text);
 }
 
+.calendar-selector-actions > button {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--calendar-selector-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.calendar-selector-actions > button:hover {
+  background: var(--calendar-hover);
+}
+
+.calendar-selector-actions > button:focus {
+  outline: none;
+}
+
+.calendar-selector-actions > button:focus-visible {
+  outline: 2px solid var(--calendar-focus);
+  outline-offset: 2px;
+}
+
 .calendar-selector-checkbox {
   flex: none;
   margin: 0;

package/package.json

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