@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
51 lines • 1.57 kB
TypeScript
import { SingleTabStopNavigationAPI } from '@awsui/component-toolkit/internal';
import { GridNavigationProps } from './interfaces';
/**
* Makes table navigable with keyboard commands.
* See grid-navigation.md
*/
export declare function GridNavigationProvider({
keyboardNavigation,
pageSize,
getTable,
children
}: GridNavigationProps): JSX.Element;
/**
* This helper encapsulates the grid navigation behaviors which are:
* 1. Responding to keyboard commands and moving the focus accordingly;
* 2. Muting table interactive elements for only one to be user-focusable at a time;
* 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.
*/
export declare class GridNavigationProcessor {
private _pageSize;
private _table;
private _navigationAPI;
private focusedCell;
private focusInside;
private keepUserIndex;
constructor(navigationAPI: {
current: null | SingleTabStopNavigationAPI;
});
init(table: HTMLTableElement): void;
cleanup: () => void;
update({
pageSize
}: {
pageSize: number;
}): void;
refresh(): void;
onRegisterFocusable: (focusableElement: HTMLElement) => void;
onUnregisterActive: () => void;
getNextFocusTarget: () => HTMLElement | null;
isElementSuppressed: (element: null | Element) => boolean;
private get pageSize();
private get table();
private onFocusin;
private onFocusout;
private onKeydown;
private moveFocusBy;
private isRegistered;
private updateFocusedCell;
private getNextFocusable;
private getFocusablesFrom;
}