import type { Virtualizer } from "@tanstack/react-virtual"; import { useCallback } from "react"; import { useKey } from "react-use"; interface UseEventViewerKeyboardProps { totalCount: number; activeIndex: number | null; setActiveIndex: (index: number | null) => void; virtualizer?: Virtualizer | null; isContainerFocused: () => boolean; enabled?: boolean; closePanel?: () => void; openPanel?: () => void; } export function useEventViewerKeyboard({ totalCount, activeIndex, setActiveIndex, virtualizer, isContainerFocused, enabled = true, closePanel, openPanel, }: UseEventViewerKeyboardProps) { const selectPrev = useCallback(() => { if (totalCount === 0) return; const newIndex = activeIndex == null ? 0 : Math.max(0, activeIndex - 1); setActiveIndex(newIndex); virtualizer?.scrollToIndex(newIndex, { align: "auto" }); }, [activeIndex, setActiveIndex, totalCount, virtualizer]); const selectNext = useCallback(() => { if (totalCount === 0) return; const newIndex = activeIndex == null ? 0 : Math.min(totalCount - 1, activeIndex + 1); setActiveIndex(newIndex); virtualizer?.scrollToIndex(newIndex, { align: "auto" }); }, [activeIndex, setActiveIndex, totalCount, virtualizer]); useKey( (e) => e.key === "ArrowUp" || e.key === "k", (e) => { if (!enabled || !isContainerFocused()) return; e.preventDefault(); selectPrev(); }, undefined, [enabled, isContainerFocused, selectPrev], ); useKey( (e) => e.key === "ArrowDown" || e.key === "j", (e) => { if (!enabled || !isContainerFocused()) return; e.preventDefault(); selectNext(); }, undefined, [enabled, isContainerFocused, selectNext], ); useKey( (e) => e.key === "Escape", (e) => { if (!enabled || !isContainerFocused()) return; e.preventDefault(); closePanel?.(); }, undefined, [enabled, isContainerFocused, closePanel], ); useKey( (e) => e.key === "Enter" || e.key === " ", (e) => { if (!enabled || !isContainerFocused() || activeIndex == null) return; e.preventDefault(); openPanel?.(); }, undefined, [enabled, isContainerFocused, activeIndex, openPanel], ); }