Open
Description
Is your feature request related to a problem? Please describe.
The moveToNext and moveToPrevious functions stop when the active panel is the last one, and there's no additional panel to move the focus to.
Describe the solution you'd like
Add an option that enables looping—so when the focus is the last panel, it moves to the first panel, and vice versa.
api.moveToPrevious({ includePanel: true, loop: true });
api.moveToNext({ includePanel: true, loop: true });Describe alternatives you've considered
Here's an example of a shortcut implementation in React:
useEffect(() => {
if (!api) return;
const handleKeyDown = (e: KeyboardEvent) => {
const activePanel = api.activePanel;
if (!activePanel) return;
const [first, last] = [api.panels.at(0), api.panels.at(-1)];
if (e.ctrlKey && e.altKey && e.key === 'ArrowLeft') {
activePanel.id === first?.id ? last?.focus() : api.moveToPrevious({ includePanel: true });
}
if (e.ctrlKey && e.altKey && e.key === 'ArrowRight') {
activePanel.id === last?.id ? first?.focus() : api.moveToNext({ includePanel: true });
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [api]);Additional context
The concepts of loop and it's behavior can be found in floating-ui.
Metadata
Metadata
Assignees
Labels
No labels