import type { NVL, Node, Relationship } from '@neo4j-nvl/base'; import { BaseInteraction } from './base'; /** * Options for the keyboard interaction handler. * Allows configuring which keys trigger specific navigation actions. * Each key combo is an array of strings: the last element is the primary key (`event.key`), * and any preceding elements are modifier keys (`'Shift'`, `'Ctrl'`, `'Alt'`, `'Meta'`). * * @example * ```ts * import { KeyboardInteractionOptions } from '@neo4j-nvl/interaction-handlers' * * const options: KeyboardInteractionOptions = { * navigateForwardKey: ['Tab'], * contextMenuKey: ['Shift', 'F10'] * } * ``` */ export type KeyboardInteractionOptions = { /** Key combo for entering the graph and focusing the first element. Default: `['Enter']` */ enterGraphKey?: string[]; /** Key combo for navigating focus to the next element. Default: `['Tab']` */ navigateForwardKey?: string[]; /** Key combo for navigating focus to the previous element. Default: `['Shift', 'Tab']` */ navigateBackwardKey?: string[]; /** Key combo for exiting the graph (blur focused element and container). Default: `['Escape']` */ exitGraphKey?: string[]; /** Key combo for opening the context menu on the focused element. Default: `['Shift', 'F10']` */ contextMenuKey?: string[]; /** The color of the outline shown when the canvas receives keyboard focus. Default: `'#30839D'` */ canvasOutlineColor?: string; }; /** * Callbacks for the keyboard interaction handler. */ export type KeyboardInteractionCallbacks = { /** * Called when a key is pressed while the NVL container is focused. * Fires for all key events, including those handled by the built-in navigation. * @param event - The original keyboard event. * @param focusedElement - The currently focused node or relationship, if any. */ onKeyDown?: ((event: KeyboardEvent, focusedElement?: Node | Relationship) => void) | boolean; /** * Called when a key is released while the NVL container is focused * @param event - The original keyboard event. * @param focusedElement - The currently focused node or relationship, if any. */ onKeyUp?: ((event: KeyboardEvent, focusedElement?: Node | Relationship) => void) | boolean; /** * Called when a node receives focus (via keyboard navigation) * @param node - The node that received focus. * @param event - The original keyboard event that triggered the focus change. */ onNodeFocus?: ((node: Node, event: KeyboardEvent) => void) | boolean; /** * Called when a node loses focus (via keyboard navigation) * @param node - The node that lost focus. * @param event - The original keyboard event that triggered the focus change. */ onNodeBlur?: ((node: Node, event: KeyboardEvent) => void) | boolean; /** * Called when a relationship receives focus (via keyboard navigation) * @param relationship - The relationship that received focus. * @param event - The original keyboard event that triggered the focus change. */ onRelationshipFocus?: ((relationship: Relationship, event: KeyboardEvent) => void) | boolean; /** * Called when a relationship loses focus (via keyboard navigation) * @param relationship - The relationship that lost focus. * @param event - The original keyboard event that triggered the focus change. */ onRelationshipBlur?: ((relationship: Relationship, event: KeyboardEvent) => void) | boolean; /** * Called when the NVL canvas container receives DOM focus * @param event - The original focus event. */ onCanvasFocus?: ((event: FocusEvent) => void) | boolean; /** * Called when the NVL canvas container loses DOM focus * @param event - The original focus event. */ onCanvasBlur?: ((event: FocusEvent) => void) | boolean; /** * Called when the context menu key is pressed while the NVL container is focused. * @param element - The focused node or relationship, or undefined if the canvas itself is focused. * @param event - The original keyboard event. */ onContextMenu?: ((element: Node | Relationship | undefined, event: KeyboardEvent) => void) | boolean; }; /** * Opinionated interaction handler for keyboard-driven focus navigation * through graph elements (nodes and relationships). * * By default, Tab / Shift+Tab cycle focus through elements, Escape exits the * graph, and Shift+F10 call the `onContextMenu` callback with the focused element. * All keys can be reconfigured via {@link KeyboardInteractionOptions}. * * Callbacks are fired for focus/blur transitions and context-menu activation, * following the same one-way data-flow pattern as the other interaction handlers. */ export declare class KeyboardInteraction extends BaseInteraction { private focusedElementId; private focusedElementIsNode; private focusableElements; private addedTabindex; private resolvedOptions; /** * Creates a new keyboard interaction handler. * @param nvl - The NVL instance to attach the interaction handler to. * @param options - Options for the keyboard interaction handler. */ constructor(nvl: NVL, options?: KeyboardInteractionOptions); private buildFocusableElements; /** * Returns the currently focused element, if any. */ getFocused(): Node | Relationship | undefined; private setCanvasOutline; private clearCanvasOutline; private handleFocusIn; private handleFocusOut; private handleKeyDown; private handleKeyUp; private navigateFocus; private setFocus; private clearFocus; /** * Removes all related event listeners from the container. */ destroy(): void; }