@open-webapp/calendar 0.9.0 → 0.9.1

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/package.json

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