1 | import * as React from 'react';
|
2 | export interface KeyboardHandlerProps {
|
3 | /** Reference of the container to apply keyboard interaction */
|
4 | containerRef: React.RefObject<any>;
|
5 | /** Callback returning an array of navigable elements to be traversable via vertical arrow keys. This array should not include non-navigable elements such as disabled elements. */
|
6 | createNavigableElements: () => Element[];
|
7 | /** Callback to determine if a given event is from the container. By default the function conducts a basic check to see if the containerRef contains the event target */
|
8 | isEventFromContainer?: (event: KeyboardEvent) => boolean;
|
9 | /** Additional key handling outside of the included arrow keys, enter, and space handling */
|
10 | additionalKeyHandler?: (event: KeyboardEvent) => void;
|
11 | /** Callback to determine if a given element from the navigable elements array is the active element of the page */
|
12 | isActiveElement?: (navigableElement: Element) => boolean;
|
13 | /** Callback returning the focusable element of a given element from the navigable elements array */
|
14 | getFocusableElement?: (navigableElement: Element) => Element;
|
15 | /** Valid sibling tags that horizontal arrow handling will focus */
|
16 | validSiblingTags?: string[];
|
17 | /** Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex */
|
18 | updateTabIndex?: boolean;
|
19 | /** Flag indicating that next focusable element of a horizontal movement will be this element's sibling */
|
20 | onlyTraverseSiblings?: boolean;
|
21 | /** Flag indicating that the included vertical arrow key handling should be ignored */
|
22 | noVerticalArrowHandling?: boolean;
|
23 | /** Flag indicating that the included horizontal arrow key handling should be ignored */
|
24 | noHorizontalArrowHandling?: boolean;
|
25 | /** Flag indicating that the included enter key handling should be ignored */
|
26 | noEnterHandling?: boolean;
|
27 | /** Flag indicating that the included space key handling should be ignored */
|
28 | noSpaceHandling?: boolean;
|
29 | }
|
30 | /**
|
31 | * This function is a helper for handling basic arrow keyboard interactions. If a component already has its own key handler and event start up/tear down, this function may be easier to integrate in over the full component.
|
32 | *
|
33 | * @param {event} event Event triggered by the keyboard
|
34 | * @param {element[]} navigableElements Valid traversable elements of the container
|
35 | * @param {function} isActiveElement Callback to determine if a given element from the navigable elements array is the active element of the page
|
36 | * @param {function} getFocusableElement Callback returning the focusable element of a given element from the navigable elements array
|
37 | * @param {string[]} validSiblingTags Valid sibling tags that horizontal arrow handling will focus
|
38 | * @param {boolean} noVerticalArrowHandling Flag indicating that the included vertical arrow key handling should be ignored
|
39 | * @param {boolean} noHorizontalArrowHandling Flag indicating that the included horizontal arrow key handling should be ignored
|
40 | * @param {boolean} updateTabIndex Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex
|
41 | * @param {boolean} onlyTraverseSiblings Flag indicating that next focusable element of a horizontal movement will be this element's sibling
|
42 | */
|
43 | export declare const handleArrows: (event: KeyboardEvent, navigableElements: Element[], isActiveElement?: (element: Element) => boolean, getFocusableElement?: (element: Element) => Element, validSiblingTags?: string[], noVerticalArrowHandling?: boolean, noHorizontalArrowHandling?: boolean, updateTabIndex?: boolean, onlyTraverseSiblings?: boolean) => void;
|
44 | /**
|
45 | * This function is a helper for setting the initial tabIndexes in a roving tabIndex
|
46 | *
|
47 | * @param {HTMLElement[]} options Array of elements which should have a tabIndex of -1, except for the first element which will have a tabIndex of 0
|
48 | */
|
49 | export declare const setTabIndex: (options: HTMLElement[]) => void;
|
50 | export declare class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
|
51 | static displayName: string;
|
52 | static defaultProps: KeyboardHandlerProps;
|
53 | componentDidMount(): void;
|
54 | componentWillUnmount(): void;
|
55 | keyHandler: (event: KeyboardEvent) => void;
|
56 | _isEventFromContainer: (event: KeyboardEvent) => any;
|
57 | render(): React.ReactNode;
|
58 | }
|
59 | //# sourceMappingURL=KeyboardHandler.d.ts.map |
\ | No newline at end of file |