combobox.resetSelectedOption(),
+ onDropdownClose: () => {
+ combobox.resetSelectedOption();
+ // Reset sticky header state when dropdown closes
+ setStickyPage(null);
+ groupOffsetsRef.current = [];
+ const viewport = viewportRef.current;
+ if (viewport) viewport.scrollTop = 0;
+ },
+ onDropdownOpen: () => {
+ // Ensure we start at the top and initialize sticky to first page
+ const viewport = viewportRef.current;
+ if (viewport) viewport.scrollTop = 0;
+ requestAnimationFrame(() => {
+ const headers = Array.from((viewportRef.current?.querySelectorAll('.compare-dropdown-group') ?? [])) as HTMLElement[];
+ // Rebuild offsets so scrolling after reopen updates correctly
+ groupOffsetsRef.current = headers.map((el) => {
+ const text = el.textContent || '';
+ const page = parseInt(text.replace(/[^0-9]/g, ''), 10) || 0;
+ return { top: el.offsetTop, page };
+ });
+ if (groupOffsetsRef.current.length > 0) {
+ setStickyPage(groupOffsetsRef.current[0].page);
+ } else {
+ setStickyPage(null);
+ }
+ });
+ },
});
const sanitize = (s: string) => {
@@ -51,6 +77,11 @@ const CompareNavigationDropdown = ({
};
const [query, setQuery] = useState('');
+ const viewportRef = useRef
(null);
+ const searchRef = useRef(null);
+ const [stickyPage, setStickyPage] = useState(null);
+ const [searchHeight, setSearchHeight] = useState(0);
+ const groupOffsetsRef = useRef>([]);
const normalizedChanges = useMemo(() => {
// Helper to strip localized new-line marker occurrences from labels
@@ -69,6 +100,49 @@ const CompareNavigationDropdown = ({
return cleaned.filter((c) => c.label.toLowerCase().includes(q));
}, [changes, query, newLineLabel]);
+ useEffect(() => {
+ // Measure search height for sticky offset
+ setSearchHeight(searchRef.current?.offsetHeight ?? 0);
+ }, []);
+
+ useEffect(() => {
+ // Build offsets for group headers whenever list changes
+ const viewport = viewportRef.current;
+ if (!viewport) return;
+ const headers = Array.from(viewport.querySelectorAll('.compare-dropdown-group')) as HTMLElement[];
+ groupOffsetsRef.current = headers.map((el) => {
+ const text = el.textContent || '';
+ const page = parseInt(text.replace(/[^0-9]/g, ''), 10) || 0;
+ return { top: el.offsetTop, page };
+ });
+ // Initialize sticky label
+ if (groupOffsetsRef.current.length > 0) {
+ setStickyPage(groupOffsetsRef.current[0].page);
+ } else {
+ setStickyPage(null);
+ }
+ }, [normalizedChanges]);
+
+ const handleScrollPos = ({ y }: { x: number; y: number }) => {
+ const offsets = groupOffsetsRef.current;
+ if (offsets.length === 0) return;
+ // Find the last header whose top is <= scroll, so the next header replaces it
+ let low = 0;
+ let high = offsets.length - 1;
+ let idx = 0;
+ while (low <= high) {
+ const mid = (low + high) >> 1;
+ if (offsets[mid].top <= y + 1) { // +1 to avoid jitter at exact boundary
+ idx = mid;
+ low = mid + 1;
+ } else {
+ high = mid - 1;
+ }
+ }
+ const page = offsets[idx]?.page ?? offsets[0].page;
+ if (page !== stickyPage) setStickyPage(page);
+ };
+
return (
-
- setQuery(e.currentTarget.value)} />
-
+
+
+
+ setQuery(e.currentTarget.value)} />
+
+ {stickyPage != null && (
+ {`Page ${stickyPage}`}
+ )}
+
{normalizedChanges.length > 0 ? (
- normalizedChanges.map((item) => (
- {
- onNavigate(item.value, item.pageNumber);
- combobox.closeDropdown();
- }}
- >
- {item.label}
-
- ))
+ (() => {
+ const nodes: React.ReactNode[] = [];
+ let lastPage: number | null = null;
+ for (const item of normalizedChanges) {
+ if (item.pageNumber && item.pageNumber !== lastPage) {
+ lastPage = item.pageNumber;
+ nodes.push(
+
+ {`Page ${lastPage}`}
+
+ );
+ }
+ nodes.push(
+ {
+ onNavigate(item.value, item.pageNumber);
+ combobox.closeDropdown();
+ }}
+ >
+
+ {item.label}
+
+
+ );
+ }
+ return nodes;
+ })()
) : (
No changes found
)}
-
-
+
+
+