1548 lines
52 KiB
TypeScript
1548 lines
52 KiB
TypeScript
|
import { dispatchGroupperMoveFocusEvent } from 'tabster';
|
|||
|
import { dispatchMoverMoveFocusEvent } from 'tabster';
|
|||
|
import { EventsTypes } from 'tabster';
|
|||
|
import type { GriffelStyle } from '@griffel/react';
|
|||
|
import { GroupperMoveFocusActions } from 'tabster';
|
|||
|
import { GroupperMoveFocusEvent } from 'tabster';
|
|||
|
import { GroupperMoveFocusEventName } from 'tabster';
|
|||
|
import { KEYBORG_FOCUSIN } from 'keyborg';
|
|||
|
import { KeyborgFocusInEvent } from 'keyborg';
|
|||
|
import { makeResetStyles } from '@griffel/react';
|
|||
|
import { MoverKeys } from 'tabster';
|
|||
|
import { MoverMemorizedElementEvent } from 'tabster';
|
|||
|
import { MoverMemorizedElementEventName } from 'tabster';
|
|||
|
import { MoverMoveFocusEvent } from 'tabster';
|
|||
|
import { MoverMoveFocusEventName } from 'tabster';
|
|||
|
import * as React_2 from 'react';
|
|||
|
import type { RefObject } from 'react';
|
|||
|
import { TabsterMoveFocusEvent } from 'tabster';
|
|||
|
import { TabsterMoveFocusEventName } from 'tabster';
|
|||
|
import { Types } from 'tabster';
|
|||
|
|
|||
|
/**
|
|||
|
* @internal
|
|||
|
* @param scope - Applies the ponyfill to all DOM children
|
|||
|
* @param targetWindow - window
|
|||
|
*/
|
|||
|
export declare function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void;
|
|||
|
|
|||
|
/**
|
|||
|
* Creates a style for @see makeStyles that includes the necessary selectors for focus.
|
|||
|
* Should be used only when @see createFocusOutlineStyle does not fit requirements
|
|||
|
*
|
|||
|
* If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`
|
|||
|
* keep in mind that the default outline style is not going to be removed
|
|||
|
* (as it is in `createFocusOutlineStyle`),
|
|||
|
* and is your responsibility to manually remove it from your styles.
|
|||
|
*
|
|||
|
* @example
|
|||
|
* ```ts
|
|||
|
* // Link styles
|
|||
|
* const useStyles = makeStyles({
|
|||
|
focusIndicator: createCustomFocusIndicatorStyle({
|
|||
|
textDecorationColor: tokens.colorStrokeFocus2,
|
|||
|
textDecorationLine: 'underline',
|
|||
|
textDecorationStyle: 'double',
|
|||
|
outlineStyle: 'none',
|
|||
|
}),
|
|||
|
// Common styles.
|
|||
|
root: {
|
|||
|
// ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE
|
|||
|
':focus-visible': {
|
|||
|
outlineStyle: 'none',
|
|||
|
},
|
|||
|
* ```
|
|||
|
*
|
|||
|
* @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
|
|||
|
* @param options - Configure the style of the focus outline
|
|||
|
*/
|
|||
|
export declare function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector: selectorType, customizeSelector, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
|
|||
|
|
|||
|
export declare interface CreateCustomFocusIndicatorStyleOptions {
|
|||
|
/**
|
|||
|
* Control if the indicator appears when the corresponding element is focused,
|
|||
|
* or any child is focused within the corresponding element.
|
|||
|
* @default 'focus'
|
|||
|
* @alias selectorType
|
|||
|
*/
|
|||
|
selector?: 'focus' | 'focus-within';
|
|||
|
/**
|
|||
|
* Customizes the selector provided based on the selector type.
|
|||
|
*/
|
|||
|
customizeSelector?: (selector: string) => string;
|
|||
|
/**
|
|||
|
* Enables the browser default outline style
|
|||
|
* @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden
|
|||
|
* in the default focus indicator function, `createFocusOutlineStyle`.
|
|||
|
*/
|
|||
|
enableOutline?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* NOTE: The element with the focus outline needs to have `position: relative` so that the
|
|||
|
* pseudo element can be properly positioned.
|
|||
|
*
|
|||
|
* @param options - Configure the style of the focus outline
|
|||
|
* @returns focus outline styles object for @see makeStyles
|
|||
|
*/
|
|||
|
export declare const createFocusOutlineStyle: ({ enableOutline, selector, customizeSelector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
|
|||
|
|
|||
|
export declare interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {
|
|||
|
style?: Partial<FocusOutlineStyleOptions>;
|
|||
|
/**
|
|||
|
* Enables the browser default outline style
|
|||
|
*/
|
|||
|
enableOutline?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginAPI {
|
|||
|
focusedElement: CrossOriginFocusedElementState;
|
|||
|
observedElement: CrossOriginObservedElementState;
|
|||
|
setup(sendUp?: CrossOriginTransactionSend | null): (msg: CrossOriginMessage) => void;
|
|||
|
isSetUp(): boolean;
|
|||
|
dispose(): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginElement {
|
|||
|
readonly uid: string;
|
|||
|
readonly ownerId: string;
|
|||
|
readonly id?: string;
|
|||
|
readonly rootId?: string;
|
|||
|
readonly observedName?: string;
|
|||
|
readonly observedDetails?: string;
|
|||
|
focus(noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise<boolean>;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginFocusedElementState extends Subscribable<CrossOriginElement | undefined, FocusedElementDetails>, Disposable {
|
|||
|
focus(element: CrossOriginElement, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise<boolean>;
|
|||
|
focusById(elementId: string, rootId?: string, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise<boolean>;
|
|||
|
focusByObservedName(observedName: string, timeout?: number, rootId?: string, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise<boolean>;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginMessage {
|
|||
|
data: CrossOriginTransactionData<any, any>;
|
|||
|
send: CrossOriginTransactionSend;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginObservedElementState extends Subscribable<CrossOriginElement, ObservedElementProps>, Disposable {
|
|||
|
getElement(observedName: string, accessibility?: ObservedElementAccesibility): Promise<CrossOriginElement | null>;
|
|||
|
waitElement(observedName: string, timeout: number, accessibility?: ObservedElementAccesibility): Promise<CrossOriginElement | null>;
|
|||
|
requestFocus(observedName: string, timeout: number): Promise<boolean>;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginSentTo {
|
|||
|
[id: string]: true;
|
|||
|
}
|
|||
|
|
|||
|
declare interface CrossOriginTransactionData<I, O> {
|
|||
|
transaction: string;
|
|||
|
type: CrossOriginTransactionType;
|
|||
|
isResponse: boolean;
|
|||
|
timestamp: number;
|
|||
|
owner: string;
|
|||
|
sentto: CrossOriginSentTo;
|
|||
|
timeout?: number;
|
|||
|
target?: string;
|
|||
|
beginData?: I;
|
|||
|
endData?: O;
|
|||
|
}
|
|||
|
|
|||
|
declare type CrossOriginTransactionSend = (data: CrossOriginTransactionData<any, any>) => void;
|
|||
|
|
|||
|
declare type CrossOriginTransactionType = CrossOriginTransactionTypes[keyof CrossOriginTransactionTypes];
|
|||
|
|
|||
|
declare interface CrossOriginTransactionTypes {
|
|||
|
Bootstrap: 1;
|
|||
|
FocusElement: 2;
|
|||
|
State: 3;
|
|||
|
GetElement: 4;
|
|||
|
RestoreFocusInDeloser: 5;
|
|||
|
Ping: 6;
|
|||
|
}
|
|||
|
|
|||
|
declare interface Deloser extends TabsterPart<DeloserProps> {
|
|||
|
readonly uid: string;
|
|||
|
dispose(): void;
|
|||
|
isActive(): boolean;
|
|||
|
setActive(active: boolean): void;
|
|||
|
getActions(): DeloserElementActions;
|
|||
|
setSnapshot(index: number): void;
|
|||
|
focusFirst(): boolean;
|
|||
|
unshift(element: HTMLElement): void;
|
|||
|
focusDefault(): boolean;
|
|||
|
resetFocus(): boolean;
|
|||
|
findAvailable(): HTMLElement | null;
|
|||
|
clearHistory(preserveExisting?: boolean): void;
|
|||
|
customFocusLostHandler(element: HTMLElement): boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface DeloserAPI extends DeloserInterfaceInternal, Disposable {
|
|||
|
getActions(element: HTMLElement): DeloserElementActions | undefined;
|
|||
|
pause(): void;
|
|||
|
resume(restore?: boolean): void;
|
|||
|
}
|
|||
|
|
|||
|
declare type DeloserConstructor = (element: HTMLElement, props: DeloserProps) => Deloser;
|
|||
|
|
|||
|
declare interface DeloserElementActions {
|
|||
|
focusDefault: () => boolean;
|
|||
|
focusFirst: () => boolean;
|
|||
|
resetFocus: () => boolean;
|
|||
|
clearHistory: (preserveExisting?: boolean) => void;
|
|||
|
setSnapshot: (index: number) => void;
|
|||
|
isActive: () => boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare const DeloserEventName = "tabster:deloser";
|
|||
|
|
|||
|
declare interface DeloserInterfaceInternal {
|
|||
|
/** @internal */
|
|||
|
createDeloser(element: HTMLElement, props: DeloserProps): Deloser;
|
|||
|
}
|
|||
|
|
|||
|
declare interface DeloserOnElement {
|
|||
|
deloser: Deloser;
|
|||
|
}
|
|||
|
|
|||
|
declare interface DeloserProps {
|
|||
|
restoreFocusOrder?: RestoreFocusOrder;
|
|||
|
noSelectorCheck?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
export { dispatchGroupperMoveFocusEvent }
|
|||
|
|
|||
|
export { dispatchMoverMoveFocusEvent }
|
|||
|
|
|||
|
declare interface Disposable {
|
|||
|
/** @internal */
|
|||
|
dispose(): void;
|
|||
|
}
|
|||
|
|
|||
|
declare type DisposeFunc = () => void;
|
|||
|
|
|||
|
declare interface DOMAPI {
|
|||
|
createMutationObserver: (callback: MutationCallback) => MutationObserver;
|
|||
|
createTreeWalker(doc: Document, root: Node, whatToShow?: number, filter?: NodeFilter | null): TreeWalker;
|
|||
|
getParentNode(node: Node | null | undefined): ParentNode | null;
|
|||
|
getParentElement(element: HTMLElement | null | undefined): HTMLElement | null;
|
|||
|
nodeContains(parent: Node | null | undefined, child: Node | null | undefined): boolean;
|
|||
|
getActiveElement(doc: Document): Element | null;
|
|||
|
querySelector(element: ParentNode, selector: string): Element | null;
|
|||
|
querySelectorAll(element: ParentNode, selector: string): Element[];
|
|||
|
getElementById(doc: Document, id: string): HTMLElement | null;
|
|||
|
getFirstChild(node: Node | null | undefined): ChildNode | null;
|
|||
|
getLastChild(node: Node | null | undefined): ChildNode | null;
|
|||
|
getNextSibling(node: Node | null | undefined): ChildNode | null;
|
|||
|
getPreviousSibling(node: Node | null | undefined): ChildNode | null;
|
|||
|
getFirstElementChild(element: Element | null | undefined): Element | null;
|
|||
|
getLastElementChild(element: Element | null | undefined): Element | null;
|
|||
|
getNextElementSibling(element: Element | null | undefined): Element | null;
|
|||
|
getPreviousElementSibling(element: Element | null | undefined): Element | null;
|
|||
|
appendChild(parent: Node, child: Node): Node;
|
|||
|
insertBefore(parent: Node, child: Node, referenceChild: Node | null): Node;
|
|||
|
getSelection(ref: Node): Selection | null;
|
|||
|
}
|
|||
|
|
|||
|
declare interface DummyInputManager {
|
|||
|
moveOut: (backwards: boolean) => void;
|
|||
|
moveOutWithDefaultAction: (backwards: boolean, relatedEvent: KeyboardEvent) => void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface DummyInputObserver {
|
|||
|
add(dummy: HTMLElement, callback: () => void): void;
|
|||
|
remove(dummy: HTMLElement): void;
|
|||
|
dispose(): void;
|
|||
|
domChanged?(parent: HTMLElement): void;
|
|||
|
updatePositions(compute: (scrollTopLeftCache: Map<HTMLElement, {
|
|||
|
scrollTop: number;
|
|||
|
scrollLeft: number;
|
|||
|
} | null>) => () => void): void;
|
|||
|
}
|
|||
|
|
|||
|
declare type FindAllProps = Pick<FindFocusableProps, 'container' | 'modalizerId' | 'currentElement' | 'isBackward' | 'includeProgrammaticallyFocusable' | 'useActiveModalizer' | 'acceptCondition' | 'ignoreAccessibility' | 'onElement'>;
|
|||
|
|
|||
|
declare type FindDefaultProps = Pick<FindFocusableProps, 'container' | 'modalizerId' | 'includeProgrammaticallyFocusable' | 'useActiveModalizer' | 'ignoreAccessibility'>;
|
|||
|
|
|||
|
/**
|
|||
|
* A callback that is called for every found element during search. Returning false stops search.
|
|||
|
*/
|
|||
|
declare type FindElementCallback = (element: HTMLElement) => boolean;
|
|||
|
|
|||
|
declare type FindFirstProps = Pick<FindFocusableProps, 'container' | 'modalizerId' | 'includeProgrammaticallyFocusable' | 'useActiveModalizer' | 'ignoreAccessibility'>;
|
|||
|
|
|||
|
declare interface FindFocusableOutputProps {
|
|||
|
/**
|
|||
|
* An output parameter. Will be true after the findNext/findPrev() call if some focusable
|
|||
|
* elements were skipped during the search and the result element not immediately next
|
|||
|
* focusable after the currentElement.
|
|||
|
*/
|
|||
|
outOfDOMOrder?: boolean;
|
|||
|
/**
|
|||
|
* An output parameter. Will be true if the found element is uncontrolled.
|
|||
|
*/
|
|||
|
uncontrolled?: HTMLElement | null;
|
|||
|
}
|
|||
|
|
|||
|
declare interface FindFocusableProps {
|
|||
|
/**
|
|||
|
* The container used for the search.
|
|||
|
*/
|
|||
|
container: HTMLElement;
|
|||
|
/**
|
|||
|
* The elemet to start from.
|
|||
|
*/
|
|||
|
currentElement?: HTMLElement;
|
|||
|
/**
|
|||
|
* See `referenceElement` of GetTabsterContextOptions for description.
|
|||
|
*/
|
|||
|
referenceElement?: HTMLElement;
|
|||
|
/**
|
|||
|
* Includes elements that can be focused programmatically.
|
|||
|
*/
|
|||
|
includeProgrammaticallyFocusable?: boolean;
|
|||
|
/**
|
|||
|
* Ignore accessibility check.
|
|||
|
*/
|
|||
|
ignoreAccessibility?: boolean;
|
|||
|
/**
|
|||
|
* Take active modalizer into account when searching for elements
|
|||
|
* (the elements out of active modalizer will not be returned).
|
|||
|
*/
|
|||
|
useActiveModalizer?: boolean;
|
|||
|
/**
|
|||
|
* Search withing the specified modality, null for everything outside of modalizers, string within
|
|||
|
* a specific id, undefined for search within the current application state.
|
|||
|
*/
|
|||
|
modalizerId?: string | null;
|
|||
|
/**
|
|||
|
* If true, find previous element instead of the next one.
|
|||
|
*/
|
|||
|
isBackward?: boolean;
|
|||
|
/**
|
|||
|
* @param el - element visited.
|
|||
|
* @returns if an element should be accepted.
|
|||
|
*/
|
|||
|
acceptCondition?(el: HTMLElement): boolean;
|
|||
|
/**
|
|||
|
* A callback that will be called for every focusable element found during findAll().
|
|||
|
* If false is returned from this callback, the search will stop.
|
|||
|
*/
|
|||
|
onElement?: FindElementCallback;
|
|||
|
}
|
|||
|
|
|||
|
declare type FindNextProps = Pick<FindFocusableProps, 'currentElement' | 'referenceElement' | 'container' | 'modalizerId' | 'includeProgrammaticallyFocusable' | 'useActiveModalizer' | 'ignoreAccessibility'>;
|
|||
|
|
|||
|
declare interface FocusableAcceptElementState {
|
|||
|
container: HTMLElement;
|
|||
|
modalizerUserId?: string;
|
|||
|
currentCtx?: TabsterContext;
|
|||
|
from: HTMLElement;
|
|||
|
fromCtx?: TabsterContext;
|
|||
|
isBackward?: boolean;
|
|||
|
found?: boolean;
|
|||
|
foundElement?: HTMLElement;
|
|||
|
foundBackward?: HTMLElement;
|
|||
|
rejectElementsFrom?: HTMLElement;
|
|||
|
uncontrolled?: HTMLElement;
|
|||
|
acceptCondition: (el: HTMLElement) => boolean;
|
|||
|
hasCustomCondition?: boolean;
|
|||
|
includeProgrammaticallyFocusable?: boolean;
|
|||
|
ignoreAccessibility?: boolean;
|
|||
|
cachedGrouppers: {
|
|||
|
[id: string]: {
|
|||
|
isActive: boolean | undefined;
|
|||
|
first?: HTMLElement | null;
|
|||
|
};
|
|||
|
};
|
|||
|
isFindAll?: boolean;
|
|||
|
/**
|
|||
|
* A flag that indicates that some focusable elements were skipped
|
|||
|
* during the search and the found element is not the one the browser
|
|||
|
* would normally focus if the user pressed Tab.
|
|||
|
*/
|
|||
|
skippedFocusable?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface FocusableAPI extends Disposable {
|
|||
|
getProps(element: HTMLElement): FocusableProps;
|
|||
|
isFocusable(element: HTMLElement, includeProgrammaticallyFocusable?: boolean, noVisibleCheck?: boolean, noAccessibleCheck?: boolean): boolean;
|
|||
|
isVisible(element: HTMLElement): boolean;
|
|||
|
isAccessible(element: HTMLElement): boolean;
|
|||
|
findFirst(options: FindFirstProps, out?: FindFocusableOutputProps): HTMLElement | null | undefined;
|
|||
|
findLast(options: FindFirstProps, out?: FindFocusableOutputProps): HTMLElement | null | undefined;
|
|||
|
findNext(options: FindNextProps, out?: FindFocusableOutputProps): HTMLElement | null | undefined;
|
|||
|
findPrev(options: FindNextProps, out?: FindFocusableOutputProps): HTMLElement | null | undefined;
|
|||
|
findDefault(options: FindDefaultProps, out?: FindFocusableOutputProps): HTMLElement | null;
|
|||
|
/**
|
|||
|
* @returns All focusables in a given context that satisfy an given condition
|
|||
|
*/
|
|||
|
findAll(options: FindAllProps): HTMLElement[];
|
|||
|
findElement(options: FindFocusableProps, out?: FindFocusableOutputProps): HTMLElement | null | undefined;
|
|||
|
}
|
|||
|
|
|||
|
declare interface FocusableOnElement {
|
|||
|
focusable: FocusableProps;
|
|||
|
}
|
|||
|
|
|||
|
declare interface FocusableProps {
|
|||
|
isDefault?: boolean;
|
|||
|
isIgnored?: boolean;
|
|||
|
/**
|
|||
|
* Do not determine an element's focusability based on aria-disabled.
|
|||
|
*/
|
|||
|
ignoreAriaDisabled?: boolean;
|
|||
|
/**
|
|||
|
* Exclude element (and all subelements) from Mover navigation.
|
|||
|
*/
|
|||
|
excludeFromMover?: boolean;
|
|||
|
/**
|
|||
|
* Prevents tabster from handling the keydown event
|
|||
|
*/
|
|||
|
ignoreKeydown?: {
|
|||
|
Tab?: boolean;
|
|||
|
Escape?: boolean;
|
|||
|
Enter?: boolean;
|
|||
|
ArrowUp?: boolean;
|
|||
|
ArrowDown?: boolean;
|
|||
|
ArrowLeft?: boolean;
|
|||
|
ArrowRight?: boolean;
|
|||
|
PageUp?: boolean;
|
|||
|
PageDown?: boolean;
|
|||
|
Home?: boolean;
|
|||
|
End?: boolean;
|
|||
|
};
|
|||
|
}
|
|||
|
|
|||
|
declare const FocusableSelector: string;
|
|||
|
|
|||
|
declare interface FocusedElementDetails {
|
|||
|
relatedTarget?: HTMLElement;
|
|||
|
isFocusedProgrammatically?: boolean;
|
|||
|
modalizerId?: string;
|
|||
|
}
|
|||
|
|
|||
|
declare interface FocusedElementState extends Subscribable<HTMLElement | undefined, FocusedElementDetails>, Disposable {
|
|||
|
getFocusedElement(): HTMLElement | undefined;
|
|||
|
getLastFocusedElement(): HTMLElement | undefined;
|
|||
|
focus(element: HTMLElement, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): boolean;
|
|||
|
focusDefault(container: HTMLElement): boolean;
|
|||
|
/** @internal */
|
|||
|
getFirstOrLastTabbable(isFirst: boolean, props: Pick<FindFocusableProps, 'container' | 'ignoreAccessibility'>): HTMLElement | undefined;
|
|||
|
focusFirst(props: FindFirstProps): boolean;
|
|||
|
focusLast(props: FindFirstProps): boolean;
|
|||
|
resetFocus(container: HTMLElement): boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare const FocusInEventName = "tabster:focusin";
|
|||
|
|
|||
|
declare const FocusOutEventName = "tabster:focusout";
|
|||
|
|
|||
|
export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
|
|||
|
|
|||
|
export declare type FocusOutlineStyleOptions = {
|
|||
|
/**
|
|||
|
* Only property not supported by the native CSS `outline`, if this is no longer needed
|
|||
|
* we can just go native instead
|
|||
|
*/
|
|||
|
outlineRadius: string;
|
|||
|
outlineColor: string;
|
|||
|
outlineWidth: string;
|
|||
|
outlineOffset?: string | FocusOutlineOffset;
|
|||
|
};
|
|||
|
|
|||
|
declare type GetTabster = () => TabsterCore;
|
|||
|
|
|||
|
declare interface GetTabsterContextOptions {
|
|||
|
/**
|
|||
|
* Should visit **all** element ancestors to verify if `dir='rtl'` is set
|
|||
|
*/
|
|||
|
checkRtl?: boolean;
|
|||
|
/**
|
|||
|
* The element to start computing the context from. Useful when dealing
|
|||
|
* with nested structures. For example, if we have an element inside a groupper
|
|||
|
* inside another groupper, the `groupper` prop in this element's contexts will
|
|||
|
* be the inner groupper, but when we pass the inner groupper's parent element
|
|||
|
* as `referenceElement`, the context groupper will be the outer one. Having
|
|||
|
* this option simplifies searching for the next tabbable element in the
|
|||
|
* environment of nested movers and grouppers.
|
|||
|
*/
|
|||
|
referenceElement?: HTMLElement;
|
|||
|
}
|
|||
|
|
|||
|
declare type GetWindow = () => Window;
|
|||
|
|
|||
|
declare type GriffelResetStyle = Parameters<typeof makeResetStyles>[0];
|
|||
|
|
|||
|
declare interface Groupper extends TabsterPart<GroupperProps>, TabsterPartWithFindNextTabbable, TabsterPartWithAcceptElement {
|
|||
|
readonly id: string;
|
|||
|
readonly dummyManager: DummyInputManager | undefined;
|
|||
|
dispose(): void;
|
|||
|
makeTabbable(isUnlimited: boolean): void;
|
|||
|
isActive(noIfFirstIsFocused?: boolean): boolean | undefined;
|
|||
|
setFirst(element: HTMLElement | undefined): void;
|
|||
|
getFirst(orContainer: boolean): HTMLElement | undefined;
|
|||
|
}
|
|||
|
|
|||
|
declare interface GroupperAPI extends GroupperAPIInternal, Disposable {
|
|||
|
/** @internal (will likely be exposed once the API is fully stable) */
|
|||
|
moveFocus(element: HTMLElement, action: GroupperMoveFocusAction): HTMLElement | null;
|
|||
|
}
|
|||
|
|
|||
|
declare interface GroupperAPIInternal {
|
|||
|
/** @internal */
|
|||
|
createGroupper(element: HTMLElement, props: GroupperProps, sys: SysProps | undefined): Groupper;
|
|||
|
/** @internal */
|
|||
|
handleKeyPress(element: HTMLElement, event: KeyboardEvent, fromModalizer?: boolean): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface GroupperAPIInternal {
|
|||
|
forgetCurrentGrouppers(): void;
|
|||
|
}
|
|||
|
|
|||
|
declare type GroupperConstructor = (tabster: TabsterCore, element: HTMLElement, props: GroupperProps) => Groupper;
|
|||
|
|
|||
|
declare type GroupperMoveFocusAction = GroupperMoveFocusActions_2[keyof GroupperMoveFocusActions_2];
|
|||
|
|
|||
|
export { GroupperMoveFocusActions }
|
|||
|
|
|||
|
declare interface GroupperMoveFocusActions_2 {
|
|||
|
Enter: 1;
|
|||
|
Escape: 2;
|
|||
|
}
|
|||
|
|
|||
|
declare const GroupperMoveFocusActions_2: GroupperMoveFocusActions_2;
|
|||
|
|
|||
|
export { GroupperMoveFocusEvent }
|
|||
|
|
|||
|
declare type GroupperMoveFocusEvent_2 = CustomEvent<{
|
|||
|
action: GroupperMoveFocusAction;
|
|||
|
} | undefined>;
|
|||
|
|
|||
|
export declare type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;
|
|||
|
|
|||
|
export { GroupperMoveFocusEventName }
|
|||
|
|
|||
|
declare const GroupperMoveFocusEventName_2 = "tabster:groupper:movefocus";
|
|||
|
|
|||
|
declare interface GroupperOnElement {
|
|||
|
groupper: Groupper;
|
|||
|
}
|
|||
|
|
|||
|
declare interface GroupperProps {
|
|||
|
tabbability?: GroupperTabbability;
|
|||
|
delegated?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface GroupperTabbabilities {
|
|||
|
Unlimited: 0;
|
|||
|
Limited: 1;
|
|||
|
LimitedTrapFocus: 2;
|
|||
|
}
|
|||
|
|
|||
|
declare const GroupperTabbabilities: GroupperTabbabilities;
|
|||
|
|
|||
|
declare type GroupperTabbability = GroupperTabbabilities[keyof GroupperTabbabilities];
|
|||
|
|
|||
|
declare interface InternalAPI {
|
|||
|
stopObserver(): void;
|
|||
|
resumeObserver(syncState: boolean): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface KeyboardNavigationState extends Subscribable<boolean>, Disposable {
|
|||
|
isNavigatingWithKeyboard(): boolean;
|
|||
|
setNavigatingWithKeyboard(isNavigatingWithKeyboard: boolean): void;
|
|||
|
}
|
|||
|
|
|||
|
export { KEYBORG_FOCUSIN }
|
|||
|
|
|||
|
export { KeyborgFocusInEvent }
|
|||
|
|
|||
|
declare interface Modalizer extends TabsterPart<ModalizerProps>, TabsterPartWithFindNextTabbable {
|
|||
|
readonly userId: string;
|
|||
|
readonly dummyManager: DummyInputManager | undefined;
|
|||
|
/**
|
|||
|
* @returns - Whether the element is inside the modalizer
|
|||
|
*/
|
|||
|
contains(element: HTMLElement): boolean;
|
|||
|
dispose(): void;
|
|||
|
isActive(): boolean;
|
|||
|
makeActive(isActive: boolean): void;
|
|||
|
focused(noIncrement?: boolean): number;
|
|||
|
triggerFocusEvent(eventName: ModalizerEventName, allElements: boolean): boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare const ModalizerActiveEventName = "tabster:modalizer:active";
|
|||
|
|
|||
|
declare interface ModalizerAPI extends ModalizerAPIInternal, Disposable {
|
|||
|
/**
|
|||
|
* Activates a Modalizer and focuses the first or default element within
|
|||
|
*
|
|||
|
* @param elementFromModalizer - An element that belongs to a Modalizer
|
|||
|
* @param noFocusFirst - Do not focus on the first element in the Modalizer
|
|||
|
* @param noFocusDefault - Do not focus the default element in the Modalizre
|
|||
|
*/
|
|||
|
focus(elementFromModalizer: HTMLElement, noFocusFirst?: boolean, noFocusDefault?: boolean): boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ModalizerAPIInternal extends TabsterPartWithAcceptElement {
|
|||
|
/** @internal */
|
|||
|
activeId: string | undefined;
|
|||
|
/** @internal */
|
|||
|
currentIsOthersAccessible: boolean | undefined;
|
|||
|
/** @internal */
|
|||
|
activeElements: WeakHTMLElement<HTMLElement>[];
|
|||
|
/** @internal */
|
|||
|
createModalizer(element: HTMLElement, props: ModalizerProps, sys: SysProps | undefined): Modalizer;
|
|||
|
/**
|
|||
|
* Sets active modalizers.
|
|||
|
* When active, everything outside of the modalizers with the specific user
|
|||
|
* defined id gets `aria-hidden`.
|
|||
|
*
|
|||
|
* @param userId - user defined identifier or undefined (if nothing is modal).
|
|||
|
*/
|
|||
|
/** @internal */
|
|||
|
setActive(modalizer: Modalizer | undefined): void;
|
|||
|
/** @internal */
|
|||
|
hiddenUpdate(): void;
|
|||
|
/** @internal */
|
|||
|
isAugmented(element: HTMLElement): boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare const ModalizerBeforeFocusOutEventName = "tabster:modalizer:beforefocusout";
|
|||
|
|
|||
|
declare type ModalizerConstructor = (tabster: TabsterCore, element: HTMLElement, props: ModalizerProps) => Modalizer;
|
|||
|
|
|||
|
/**
|
|||
|
* A signature for the accessibleCheck callback from getModalizer().
|
|||
|
* It is called when active Modalizer sets aria-hidden on elements outsidef of it.
|
|||
|
*
|
|||
|
* @param element - The element that is about to receive aria-hidden.
|
|||
|
* @param activeModalizerElements - The container elements of the active modalizer.
|
|||
|
* @returns true if the element should remain accessible and should not receive
|
|||
|
* aria-hidden.
|
|||
|
*/
|
|||
|
declare type ModalizerElementAccessibleCheck = (element: HTMLElement, activeModalizerElements?: HTMLElement[]) => boolean;
|
|||
|
|
|||
|
declare type ModalizerEvent = TabsterEventWithDetails<ModalizerEventDetails>;
|
|||
|
|
|||
|
declare type ModalizerEventDetails = {
|
|||
|
id: string;
|
|||
|
element: HTMLElement;
|
|||
|
eventName: ModalizerEventName;
|
|||
|
};
|
|||
|
|
|||
|
declare type ModalizerEventName = typeof ModalizerActiveEventName | typeof ModalizerInactiveEventName | typeof ModalizerBeforeFocusOutEventName | typeof ModalizerFocusInEventName | typeof ModalizerFocusOutEventName;
|
|||
|
|
|||
|
declare const ModalizerFocusInEventName = "tabster:modalizer:focusin";
|
|||
|
|
|||
|
declare const ModalizerFocusOutEventName = "tabster:modalizer:focusout";
|
|||
|
|
|||
|
declare const ModalizerInactiveEventName = "tabster:modalizer:inactive";
|
|||
|
|
|||
|
declare interface ModalizerOnElement {
|
|||
|
modalizer: Modalizer;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ModalizerProps {
|
|||
|
id: string;
|
|||
|
isOthersAccessible?: boolean;
|
|||
|
isAlwaysAccessible?: boolean;
|
|||
|
isNoFocusFirst?: boolean;
|
|||
|
isNoFocusDefault?: boolean;
|
|||
|
/** A focus trap variant, keeps focus inside the modal when tabbing */
|
|||
|
isTrapped?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare const MoveFocusEventName = "tabster:movefocus";
|
|||
|
|
|||
|
declare interface Mover extends TabsterPart<MoverProps>, TabsterPartWithFindNextTabbable, TabsterPartWithAcceptElement {
|
|||
|
readonly id: string;
|
|||
|
readonly dummyManager: DummyInputManager | undefined;
|
|||
|
readonly visibilityTolerance: NonNullable<MoverProps['visibilityTolerance']>;
|
|||
|
dispose(): void;
|
|||
|
setCurrent(element: HTMLElement | undefined): void;
|
|||
|
getCurrent(): HTMLElement | null;
|
|||
|
getState(element: HTMLElement): MoverElementState | undefined;
|
|||
|
}
|
|||
|
|
|||
|
declare interface MoverAPI extends MoverAPIInternal, Disposable {
|
|||
|
/** @internal (will likely be exposed once the API is fully stable) */
|
|||
|
moveFocus(fromElement: HTMLElement, key: MoverKey): HTMLElement | null;
|
|||
|
}
|
|||
|
|
|||
|
declare interface MoverAPIInternal {
|
|||
|
/** @internal */
|
|||
|
createMover(element: HTMLElement, props: MoverProps, sys: SysProps | undefined): Mover;
|
|||
|
}
|
|||
|
|
|||
|
declare type MoverConstructor = (tabster: TabsterCore, element: HTMLElement, props: MoverProps) => Mover;
|
|||
|
|
|||
|
declare type MoverDirection = MoverDirections[keyof MoverDirections];
|
|||
|
|
|||
|
declare interface MoverDirections {
|
|||
|
Both: 0;
|
|||
|
Vertical: 1;
|
|||
|
Horizontal: 2;
|
|||
|
Grid: 3;
|
|||
|
GridLinear: 4;
|
|||
|
}
|
|||
|
|
|||
|
declare const MoverDirections: MoverDirections;
|
|||
|
|
|||
|
declare interface MoverElementState {
|
|||
|
isCurrent: boolean | undefined;
|
|||
|
visibility: Visibility;
|
|||
|
}
|
|||
|
|
|||
|
declare type MoverEvent = TabsterEventWithDetails<MoverElementState>;
|
|||
|
|
|||
|
declare const MoverEventName = "tabster:mover";
|
|||
|
|
|||
|
declare type MoverKey = MoverKeys_2[keyof MoverKeys_2];
|
|||
|
|
|||
|
export { MoverKeys }
|
|||
|
|
|||
|
declare interface MoverKeys_2 {
|
|||
|
ArrowUp: 1;
|
|||
|
ArrowDown: 2;
|
|||
|
ArrowLeft: 3;
|
|||
|
ArrowRight: 4;
|
|||
|
PageUp: 5;
|
|||
|
PageDown: 6;
|
|||
|
Home: 7;
|
|||
|
End: 8;
|
|||
|
}
|
|||
|
|
|||
|
declare const MoverKeys_2: MoverKeys_2;
|
|||
|
|
|||
|
export { MoverMemorizedElementEvent }
|
|||
|
|
|||
|
export declare type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;
|
|||
|
|
|||
|
export { MoverMemorizedElementEventName }
|
|||
|
|
|||
|
export { MoverMoveFocusEvent }
|
|||
|
|
|||
|
declare type MoverMoveFocusEvent_2 = CustomEvent<{
|
|||
|
key: MoverKey;
|
|||
|
} | undefined>;
|
|||
|
|
|||
|
export declare type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;
|
|||
|
|
|||
|
export { MoverMoveFocusEventName }
|
|||
|
|
|||
|
declare const MoverMoveFocusEventName_2 = "tabster:mover:movefocus";
|
|||
|
|
|||
|
declare interface MoverOnElement {
|
|||
|
mover: Mover;
|
|||
|
}
|
|||
|
|
|||
|
declare interface MoverProps {
|
|||
|
direction?: MoverDirection;
|
|||
|
memorizeCurrent?: boolean;
|
|||
|
tabbable?: boolean;
|
|||
|
/**
|
|||
|
* Whether to allow cyclic navigation in the mover
|
|||
|
* Can only be applied if navigationType is MoverKeys.Arrows
|
|||
|
*
|
|||
|
* @defaultValue false
|
|||
|
*/
|
|||
|
cyclic?: boolean;
|
|||
|
/**
|
|||
|
* In case we need a rich state of the elements inside a Mover,
|
|||
|
* we can track it. It takes extra resourses and might affect
|
|||
|
* performance when a Mover has many elements inside, so make sure
|
|||
|
* you use this prop when it is really needed.
|
|||
|
*/
|
|||
|
trackState?: boolean;
|
|||
|
/**
|
|||
|
* When set to Visibility.Visible or Visibility.PartiallyVisible,
|
|||
|
* uses the visibility part of the trackState prop to be able to
|
|||
|
* go to first/last visible element (instead of first/last focusable
|
|||
|
* element in DOM) when tabbing from outside of the mover.
|
|||
|
*/
|
|||
|
visibilityAware?: Visibility;
|
|||
|
/**
|
|||
|
* When true, Mover will try to locate a focusable with Focusable.isDefault
|
|||
|
* property as a prioritized element to focus. True by default.
|
|||
|
*/
|
|||
|
hasDefault?: boolean;
|
|||
|
/**
|
|||
|
* A value between 0 and 1 that specifies the tolerance allowed
|
|||
|
* when testing for visibility.
|
|||
|
*
|
|||
|
* @example
|
|||
|
* an element of height 100px has 10px that are above the viewport
|
|||
|
* hidden by scroll. This element is a valid visible element to focus.
|
|||
|
*
|
|||
|
* @default 0.8
|
|||
|
*/
|
|||
|
visibilityTolerance?: number;
|
|||
|
}
|
|||
|
|
|||
|
declare type NextTabbable = {
|
|||
|
element: HTMLElement | null | undefined;
|
|||
|
uncontrolled?: HTMLElement | null;
|
|||
|
outOfDOMOrder?: boolean;
|
|||
|
};
|
|||
|
|
|||
|
declare interface ObservedElementAccesibilities {
|
|||
|
Any: 0;
|
|||
|
Accessible: 1;
|
|||
|
Focusable: 2;
|
|||
|
}
|
|||
|
|
|||
|
declare const ObservedElementAccesibilities: ObservedElementAccesibilities;
|
|||
|
|
|||
|
declare type ObservedElementAccesibility = ObservedElementAccesibilities[keyof ObservedElementAccesibilities];
|
|||
|
|
|||
|
declare interface ObservedElementAPI extends Subscribable<HTMLElement, ObservedElementDetails>, Disposable, ObservedElementAPIInternal {
|
|||
|
getElement(observedName: string, accessibility?: ObservedElementAccesibility): HTMLElement | null;
|
|||
|
waitElement(observedName: string, timeout: number, accessibility?: ObservedElementAccesibility): ObservedElementAsyncRequest<HTMLElement | null>;
|
|||
|
requestFocus(observedName: string, timeout: number): ObservedElementAsyncRequest<boolean>;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ObservedElementAPIInternal {
|
|||
|
/** @internal */
|
|||
|
onObservedElementUpdate(element: HTMLElement): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ObservedElementAsyncRequest<T> {
|
|||
|
result: Promise<T>;
|
|||
|
cancel(): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ObservedElementDetails extends ObservedElementProps {
|
|||
|
accessibility?: ObservedElementAccesibility;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ObservedElementProps {
|
|||
|
names: string[];
|
|||
|
details?: any;
|
|||
|
}
|
|||
|
|
|||
|
declare interface ObservedOnElement {
|
|||
|
observed: ObservedElementProps;
|
|||
|
}
|
|||
|
|
|||
|
declare interface OutlineAPI extends Disposable {
|
|||
|
setup(props?: Partial<OutlineProps>): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface OutlinedElementProps {
|
|||
|
isIgnored?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface OutlineElements {
|
|||
|
container: HTMLDivElement;
|
|||
|
left: HTMLDivElement;
|
|||
|
top: HTMLDivElement;
|
|||
|
right: HTMLDivElement;
|
|||
|
bottom: HTMLDivElement;
|
|||
|
}
|
|||
|
|
|||
|
declare interface OutlineOnElement {
|
|||
|
outline: OutlinedElementProps;
|
|||
|
}
|
|||
|
|
|||
|
declare interface OutlineProps {
|
|||
|
areaClass: string;
|
|||
|
outlineClass: string;
|
|||
|
outlineColor: string;
|
|||
|
outlineWidth: number;
|
|||
|
zIndex: number;
|
|||
|
}
|
|||
|
|
|||
|
declare type RestoreFocusOrder = RestoreFocusOrders[keyof RestoreFocusOrders];
|
|||
|
|
|||
|
declare interface RestoreFocusOrders {
|
|||
|
History: 0;
|
|||
|
DeloserDefault: 1;
|
|||
|
RootDefault: 2;
|
|||
|
DeloserFirst: 3;
|
|||
|
RootFirst: 4;
|
|||
|
}
|
|||
|
|
|||
|
declare const RestoreFocusOrders: RestoreFocusOrders;
|
|||
|
|
|||
|
declare interface Restorer extends Disposable, TabsterPart<RestorerProps> {
|
|||
|
}
|
|||
|
|
|||
|
declare interface RestorerAPI extends RestorerAPIInternal, Disposable {
|
|||
|
}
|
|||
|
|
|||
|
declare interface RestorerAPIInternal {
|
|||
|
/** @internal */
|
|||
|
createRestorer(element: HTMLElement, props: RestorerProps): Restorer;
|
|||
|
}
|
|||
|
|
|||
|
declare interface RestorerOnElement {
|
|||
|
restorer: Restorer;
|
|||
|
}
|
|||
|
|
|||
|
declare interface RestorerProps {
|
|||
|
type: RestorerType;
|
|||
|
}
|
|||
|
|
|||
|
declare type RestorerType = (typeof RestorerTypes)[keyof typeof RestorerTypes];
|
|||
|
|
|||
|
declare const RestorerTypes: {
|
|||
|
readonly Source: 0;
|
|||
|
readonly Target: 1;
|
|||
|
};
|
|||
|
|
|||
|
declare interface Root extends TabsterPart<RootProps> {
|
|||
|
/**@internal*/
|
|||
|
addDummyInputs(): void;
|
|||
|
readonly uid: string;
|
|||
|
dispose(): void;
|
|||
|
moveOutWithDefaultAction(backwards: boolean, relatedEvent: KeyboardEvent): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface RootAPI extends Disposable, RootAPIInternal {
|
|||
|
eventTarget: EventTarget;
|
|||
|
}
|
|||
|
|
|||
|
declare interface RootAPIInternal {
|
|||
|
/**@internal*/
|
|||
|
createRoot(element: HTMLElement, props: RootProps, sys: SysProps | undefined): Root;
|
|||
|
/**@internal*/
|
|||
|
onRoot(root: Root, removed?: boolean): void;
|
|||
|
/**@internal*/
|
|||
|
addDummyInputs(): void;
|
|||
|
}
|
|||
|
|
|||
|
declare type RootConstructor = (tabster: TabsterCore, element: HTMLElement, props: RootProps) => Root;
|
|||
|
|
|||
|
declare interface RootFocusEventDetails {
|
|||
|
element: HTMLElement;
|
|||
|
}
|
|||
|
|
|||
|
declare interface RootOnElement {
|
|||
|
root: Root;
|
|||
|
}
|
|||
|
|
|||
|
declare interface RootProps {
|
|||
|
restoreFocusOrder?: RestoreFocusOrder;
|
|||
|
}
|
|||
|
|
|||
|
declare interface Subscribable<A, B = undefined> {
|
|||
|
subscribe(callback: SubscribableCallback<A, B>): void;
|
|||
|
/** @internal */
|
|||
|
subscribeFirst(callback: SubscribableCallback<A, B>): void;
|
|||
|
unsubscribe(callback: SubscribableCallback<A, B>): void;
|
|||
|
}
|
|||
|
|
|||
|
declare type SubscribableCallback<A, B = undefined> = (val: A, details: B) => void;
|
|||
|
|
|||
|
declare type SysDummyInputsPosition = SysDummyInputsPositions[keyof SysDummyInputsPositions];
|
|||
|
|
|||
|
declare interface SysDummyInputsPositions {
|
|||
|
Auto: 0;
|
|||
|
Inside: 1;
|
|||
|
Outside: 2;
|
|||
|
}
|
|||
|
|
|||
|
declare const SysDummyInputsPositions: SysDummyInputsPositions;
|
|||
|
|
|||
|
declare interface SysOnElement {
|
|||
|
sys: SysProps;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Ability to fine-tune Tabster internal behaviour in rare cases of need.
|
|||
|
* Normally, should not be used. A deep understanding of the intention and the effect
|
|||
|
* is required.
|
|||
|
*/
|
|||
|
declare interface SysProps {
|
|||
|
/**
|
|||
|
* Force dummy input position outside or inside of the element.
|
|||
|
* By default (when undefined), the position is determined dynamically
|
|||
|
* (for example inside for <li> elements and outside for <table> elements,
|
|||
|
* plus a default Groupper/Mover/Modalizer implementation position).
|
|||
|
* Setting to true will force the dummy inputs to be always outside of the element,
|
|||
|
* setting to false will force the dummy inputs to be always inside.
|
|||
|
*/
|
|||
|
dummyInputsPosition?: SysDummyInputsPosition;
|
|||
|
}
|
|||
|
|
|||
|
declare interface Tabster {
|
|||
|
keyboardNavigation: KeyboardNavigationState;
|
|||
|
focusedElement: FocusedElementState;
|
|||
|
focusable: FocusableAPI;
|
|||
|
root: RootAPI;
|
|||
|
uncontrolled: UncontrolledAPI;
|
|||
|
/** @internal */
|
|||
|
core: TabsterCore;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* WARNING! ATTENTION! WARNING! ATTENTION! WARNING! ATTENTION!
|
|||
|
* WARNING! ATTENTION! WARNING! ATTENTION! WARNING! ATTENTION!
|
|||
|
*
|
|||
|
* Do not use anything from this file. It is a snapshot of the older Tabster typings exposed by a mistake.
|
|||
|
* The exposed typings should have been removed, but we don't do it in minor versions to avoid breaking changes.
|
|||
|
* Everything reexported from this file as react-tabster/TabsterTypes is marked as deprecated and shouldn't
|
|||
|
* be used anywhre.
|
|||
|
*
|
|||
|
* WARNING! ATTENTION! WARNING! ATTENTION! WARNING! ATTENTION!
|
|||
|
* WARNING! ATTENTION! WARNING! ATTENTION! WARNING! ATTENTION!
|
|||
|
*/
|
|||
|
declare const TabsterAttributeName = "data-tabster";
|
|||
|
|
|||
|
declare interface TabsterAttributeOnElement {
|
|||
|
string: string;
|
|||
|
object: TabsterAttributeProps;
|
|||
|
}
|
|||
|
|
|||
|
declare type TabsterAttributeProps = Partial<{
|
|||
|
deloser: DeloserProps;
|
|||
|
root: RootProps;
|
|||
|
uncontrolled: UncontrolledProps;
|
|||
|
modalizer: ModalizerProps;
|
|||
|
focusable: FocusableProps;
|
|||
|
groupper: GroupperProps;
|
|||
|
mover: MoverProps;
|
|||
|
observed: ObservedElementProps;
|
|||
|
outline: OutlinedElementProps;
|
|||
|
sys: SysProps;
|
|||
|
restorer: RestorerProps;
|
|||
|
}>;
|
|||
|
|
|||
|
declare interface TabsterAugmentedAttributes {
|
|||
|
[name: string]: string | null;
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterCompat {
|
|||
|
attributeTransform?: <P>(old: P) => TabsterAttributeProps;
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterContext {
|
|||
|
root: Root;
|
|||
|
modalizer?: Modalizer;
|
|||
|
groupper?: Groupper;
|
|||
|
mover?: Mover;
|
|||
|
groupperBeforeMover?: boolean;
|
|||
|
modalizerInGroupper?: Groupper;
|
|||
|
/**
|
|||
|
* Whether `dir='rtl'` is set on an ancestor
|
|||
|
*/
|
|||
|
rtl?: boolean;
|
|||
|
excludedFromMover?: boolean;
|
|||
|
uncontrolled?: HTMLElement | null;
|
|||
|
ignoreKeydown: (e: KeyboardEvent) => boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare type TabsterContextMoverGroupper = {
|
|||
|
isMover: true;
|
|||
|
mover: Mover;
|
|||
|
} | {
|
|||
|
isMover: false;
|
|||
|
groupper: Groupper;
|
|||
|
};
|
|||
|
|
|||
|
declare interface TabsterCore extends Pick<TabsterCoreProps, 'controlTab' | 'rootDummyInputs'>, Disposable, TabsterCoreInternal, Omit<Tabster, 'core'> {
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterCoreInternal {
|
|||
|
/** @internal */
|
|||
|
groupper?: GroupperAPI;
|
|||
|
/** @internal */
|
|||
|
mover?: MoverAPI;
|
|||
|
/** @internal */
|
|||
|
outline?: OutlineAPI;
|
|||
|
/** @internal */
|
|||
|
deloser?: DeloserAPI;
|
|||
|
/** @internal */
|
|||
|
modalizer?: ModalizerAPI;
|
|||
|
/** @internal */
|
|||
|
observedElement?: ObservedElementAPI;
|
|||
|
/** @internal */
|
|||
|
crossOrigin?: CrossOriginAPI;
|
|||
|
/** @internal */
|
|||
|
internal: InternalAPI;
|
|||
|
/** @internal */
|
|||
|
restorer?: RestorerAPI;
|
|||
|
/** @internal */
|
|||
|
_dummyObserver: DummyInputObserver;
|
|||
|
/** @internal */
|
|||
|
_version: string;
|
|||
|
/** @internal */
|
|||
|
_noop: boolean;
|
|||
|
/** @internal */
|
|||
|
storageEntry(element: HTMLElement, addremove?: boolean): TabsterElementStorageEntry | undefined;
|
|||
|
/** @internal */
|
|||
|
getWindow: GetWindow;
|
|||
|
/** @internal */
|
|||
|
createTabster(noRefCount?: boolean, props?: TabsterCoreProps): Tabster;
|
|||
|
/** @internal */
|
|||
|
disposeTabster(wrapper: Tabster, allInstances?: boolean): void;
|
|||
|
/** @internal */
|
|||
|
forceCleanup(): void;
|
|||
|
/** @internal */
|
|||
|
queueInit(callback: () => void): void;
|
|||
|
/** @internal */
|
|||
|
drainInitQueue(): void;
|
|||
|
/** @internal */
|
|||
|
getParent: (el: Node) => Node | null;
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterCoreProps {
|
|||
|
autoRoot?: RootProps;
|
|||
|
/**
|
|||
|
* Allows all tab key presses under the tabster root to be controlled by tabster
|
|||
|
* @default true
|
|||
|
*/
|
|||
|
controlTab?: boolean;
|
|||
|
/**
|
|||
|
* When controlTab is false, Root doesn't have dummy inputs by default.
|
|||
|
* This option allows to enable dummy inputs on Root.
|
|||
|
*/
|
|||
|
rootDummyInputs?: boolean;
|
|||
|
/**
|
|||
|
* A callback that will be called for the uncontrolled areas when Tabster wants
|
|||
|
* to know is the uncontrolled element wants complete control (for example it
|
|||
|
* is trapping focus) and Tabster should not interfere with handling Tab.
|
|||
|
* If the callback returns undefined, then the default behaviour is to return
|
|||
|
* the uncontrolled.completely value from the element. If the callback returns
|
|||
|
* non-undefined value, the callback's value will dominate the element's
|
|||
|
* uncontrolled.completely value.
|
|||
|
*/
|
|||
|
checkUncontrolledCompletely?: (element: HTMLElement, completely: boolean) => boolean | undefined;
|
|||
|
/**
|
|||
|
* @deprecated use checkUncontrolledCompletely.
|
|||
|
*/
|
|||
|
checkUncontrolledTrappingFocus?: (element: HTMLElement) => boolean;
|
|||
|
/**
|
|||
|
* Custom getter for parent elements. Defaults to the default .parentElement call
|
|||
|
* Currently only used to detect tabster contexts
|
|||
|
*/
|
|||
|
getParent?(el: Node): Node | null;
|
|||
|
/**
|
|||
|
* Ability to redefine all DOM API calls used by Tabster. For example, for
|
|||
|
* ShadowDOM support.
|
|||
|
*/
|
|||
|
DOMAPI?: Partial<DOMAPI>;
|
|||
|
}
|
|||
|
|
|||
|
export declare type TabsterDOMAttribute = Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
declare interface TabsterDOMAttribute_2 {
|
|||
|
[TabsterAttributeName]: string | undefined;
|
|||
|
}
|
|||
|
|
|||
|
declare const TabsterDummyInputAttributeName = "data-tabster-dummy";
|
|||
|
|
|||
|
declare interface TabsterElementStorage {
|
|||
|
[uid: string]: TabsterElementStorageEntry;
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterElementStorageEntry {
|
|||
|
tabster?: TabsterOnElement;
|
|||
|
attr?: TabsterAttributeOnElement;
|
|||
|
aug?: TabsterAugmentedAttributes;
|
|||
|
}
|
|||
|
|
|||
|
declare type TabsterEventWithDetails<D> = CustomEvent<D | undefined>;
|
|||
|
|
|||
|
export { TabsterMoveFocusEvent }
|
|||
|
|
|||
|
declare type TabsterMoveFocusEvent_2 = TabsterEventWithDetails<TabsterMoveFocusEventDetails>;
|
|||
|
|
|||
|
export declare type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;
|
|||
|
|
|||
|
declare interface TabsterMoveFocusEventDetails {
|
|||
|
by: 'mover' | 'groupper' | 'modalizer' | 'root';
|
|||
|
owner: HTMLElement;
|
|||
|
next: HTMLElement | null;
|
|||
|
relatedEvent?: KeyboardEvent;
|
|||
|
}
|
|||
|
|
|||
|
export { TabsterMoveFocusEventName }
|
|||
|
|
|||
|
declare type TabsterOnElement = Partial<RootOnElement & DeloserOnElement & ModalizerOnElement & FocusableOnElement & MoverOnElement & GroupperOnElement & ObservedOnElement & OutlineOnElement & UncontrolledOnElement & SysOnElement & RestorerOnElement>;
|
|||
|
|
|||
|
declare interface TabsterPart<P> {
|
|||
|
readonly id: string;
|
|||
|
getElement(): HTMLElement | undefined;
|
|||
|
getProps(): P;
|
|||
|
setProps(props: P): void;
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterPartWithAcceptElement {
|
|||
|
acceptElement(element: HTMLElement, state: FocusableAcceptElementState): number | undefined;
|
|||
|
}
|
|||
|
|
|||
|
declare interface TabsterPartWithFindNextTabbable {
|
|||
|
findNextTabbable(current?: HTMLElement, reference?: HTMLElement, isBackward?: boolean, ignoreAccessibility?: boolean): NextTabbable | null;
|
|||
|
}
|
|||
|
|
|||
|
declare namespace TabsterTypes {
|
|||
|
export {
|
|||
|
TabsterAttributeName,
|
|||
|
TabsterDummyInputAttributeName,
|
|||
|
DeloserEventName,
|
|||
|
ModalizerActiveEventName,
|
|||
|
ModalizerInactiveEventName,
|
|||
|
ModalizerFocusInEventName,
|
|||
|
ModalizerFocusOutEventName,
|
|||
|
ModalizerBeforeFocusOutEventName,
|
|||
|
MoverEventName,
|
|||
|
FocusInEventName,
|
|||
|
FocusOutEventName,
|
|||
|
MoveFocusEventName,
|
|||
|
MoverMoveFocusEventName_2 as MoverMoveFocusEventName,
|
|||
|
GroupperMoveFocusEventName_2 as GroupperMoveFocusEventName,
|
|||
|
FocusableSelector,
|
|||
|
MoverMoveFocusEvent_2 as MoverMoveFocusEvent,
|
|||
|
GroupperMoveFocusActions_2 as GroupperMoveFocusActions,
|
|||
|
GroupperMoveFocusAction,
|
|||
|
GroupperMoveFocusEvent_2 as GroupperMoveFocusEvent,
|
|||
|
TabsterEventWithDetails,
|
|||
|
TabsterMoveFocusEventDetails,
|
|||
|
TabsterMoveFocusEvent_2 as TabsterMoveFocusEvent,
|
|||
|
TabsterDOMAttribute_2 as TabsterDOMAttribute,
|
|||
|
TabsterCoreProps,
|
|||
|
DOMAPI,
|
|||
|
GetTabster,
|
|||
|
GetWindow,
|
|||
|
SubscribableCallback,
|
|||
|
Disposable,
|
|||
|
Subscribable,
|
|||
|
KeyboardNavigationState,
|
|||
|
FocusedElementDetails,
|
|||
|
FocusedElementState,
|
|||
|
WeakHTMLElement,
|
|||
|
TabsterPart,
|
|||
|
TabsterPartWithFindNextTabbable,
|
|||
|
TabsterPartWithAcceptElement,
|
|||
|
ObservedElementProps,
|
|||
|
ObservedElementDetails,
|
|||
|
ObservedElementAccesibilities,
|
|||
|
ObservedElementAccesibility,
|
|||
|
ObservedElementAsyncRequest,
|
|||
|
ObservedElementAPI,
|
|||
|
CrossOriginElement,
|
|||
|
CrossOriginSentTo,
|
|||
|
CrossOriginTransactionTypes,
|
|||
|
CrossOriginTransactionType,
|
|||
|
CrossOriginTransactionData,
|
|||
|
CrossOriginTransactionSend,
|
|||
|
CrossOriginMessage,
|
|||
|
CrossOriginFocusedElementState,
|
|||
|
CrossOriginObservedElementState,
|
|||
|
CrossOriginAPI,
|
|||
|
OutlineProps,
|
|||
|
OutlinedElementProps,
|
|||
|
OutlineAPI,
|
|||
|
DeloserElementActions,
|
|||
|
RestoreFocusOrders,
|
|||
|
RestoreFocusOrder,
|
|||
|
DeloserProps,
|
|||
|
Deloser,
|
|||
|
DeloserConstructor,
|
|||
|
DeloserAPI,
|
|||
|
FocusableProps,
|
|||
|
FocusableAcceptElementState,
|
|||
|
FindFocusableProps,
|
|||
|
FindFocusableOutputProps,
|
|||
|
FindFirstProps,
|
|||
|
FindNextProps,
|
|||
|
FindDefaultProps,
|
|||
|
FindAllProps,
|
|||
|
FindElementCallback,
|
|||
|
FocusableAPI,
|
|||
|
DummyInputManager,
|
|||
|
Visibilities,
|
|||
|
Visibility,
|
|||
|
MoverElementState,
|
|||
|
MoverDirections,
|
|||
|
RestorerTypes,
|
|||
|
RestorerType,
|
|||
|
MoverDirection,
|
|||
|
NextTabbable,
|
|||
|
MoverProps,
|
|||
|
MoverEvent,
|
|||
|
Mover,
|
|||
|
MoverConstructor,
|
|||
|
MoverKeys_2 as MoverKeys,
|
|||
|
MoverKey,
|
|||
|
MoverAPI,
|
|||
|
GroupperTabbabilities,
|
|||
|
GroupperTabbability,
|
|||
|
GroupperProps,
|
|||
|
Groupper,
|
|||
|
GroupperConstructor,
|
|||
|
GroupperAPIInternal,
|
|||
|
GroupperAPI,
|
|||
|
ModalizerProps,
|
|||
|
ModalizerEventName,
|
|||
|
ModalizerEventDetails,
|
|||
|
ModalizerEvent,
|
|||
|
Modalizer,
|
|||
|
ModalizerConstructor,
|
|||
|
RootProps,
|
|||
|
Root,
|
|||
|
RootConstructor,
|
|||
|
SysDummyInputsPositions,
|
|||
|
SysDummyInputsPosition,
|
|||
|
SysProps,
|
|||
|
GetTabsterContextOptions,
|
|||
|
TabsterContextMoverGroupper,
|
|||
|
TabsterContext,
|
|||
|
RootFocusEventDetails,
|
|||
|
RootAPI,
|
|||
|
UncontrolledAPI,
|
|||
|
ModalizerAPI,
|
|||
|
RestorerAPI,
|
|||
|
Restorer,
|
|||
|
ModalizerElementAccessibleCheck,
|
|||
|
UncontrolledProps,
|
|||
|
DeloserOnElement,
|
|||
|
RootOnElement,
|
|||
|
ModalizerOnElement,
|
|||
|
RestorerOnElement,
|
|||
|
FocusableOnElement,
|
|||
|
MoverOnElement,
|
|||
|
GroupperOnElement,
|
|||
|
UncontrolledOnElement,
|
|||
|
ObservedOnElement,
|
|||
|
OutlineOnElement,
|
|||
|
SysOnElement,
|
|||
|
RestorerProps,
|
|||
|
TabsterAttributeProps,
|
|||
|
TabsterAttributeOnElement,
|
|||
|
TabsterAugmentedAttributes,
|
|||
|
TabsterOnElement,
|
|||
|
OutlineElements,
|
|||
|
TabsterElementStorageEntry,
|
|||
|
TabsterElementStorage,
|
|||
|
DisposeFunc,
|
|||
|
InternalAPI,
|
|||
|
DummyInputObserver,
|
|||
|
Tabster,
|
|||
|
TabsterCore,
|
|||
|
TabsterCompat
|
|||
|
}
|
|||
|
}
|
|||
|
export { TabsterTypes }
|
|||
|
|
|||
|
declare interface UncontrolledAPI {
|
|||
|
isUncontrolledCompletely(element: HTMLElement, completely: boolean): boolean;
|
|||
|
}
|
|||
|
|
|||
|
declare interface UncontrolledOnElement {
|
|||
|
uncontrolled: UncontrolledProps;
|
|||
|
}
|
|||
|
|
|||
|
declare interface UncontrolledProps {
|
|||
|
completely?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* A hook that returns the necessary tabster attributes to support arrow key navigation
|
|||
|
* @param options - Options to configure keyboard navigation
|
|||
|
*/
|
|||
|
export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) => Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
export declare interface UseArrowNavigationGroupOptions {
|
|||
|
/**
|
|||
|
* Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally
|
|||
|
* @defaultValue vertical
|
|||
|
*/
|
|||
|
axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';
|
|||
|
/**
|
|||
|
* Focus will cycle to the first/last elements of the group without stopping
|
|||
|
*/
|
|||
|
circular?: boolean;
|
|||
|
/**
|
|||
|
* Last focused element in the group will be remembered and focused (if still
|
|||
|
* available) when tabbing from outside of the group
|
|||
|
* @default true
|
|||
|
*/
|
|||
|
memorizeCurrent?: boolean;
|
|||
|
/**
|
|||
|
* Allow tabbing within the arrow navigation group items.
|
|||
|
*/
|
|||
|
tabbable?: boolean;
|
|||
|
/**
|
|||
|
* Tabster should ignore default handling of keydown events
|
|||
|
*/
|
|||
|
ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];
|
|||
|
/**
|
|||
|
* The default focusable item in the group will be an element with Focusable.isDefault property.
|
|||
|
* Note that there is no way in \@fluentui/react-tabster to set default focusable element,
|
|||
|
* and this option is currently for internal testing purposes only.
|
|||
|
*/
|
|||
|
unstable_hasDefault?: boolean;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* A hook that returns the necessary tabster attributes to support groupping.
|
|||
|
* @param options - Options to configure keyboard navigation
|
|||
|
*/
|
|||
|
export declare const useFocusableGroup: (options?: UseFocusableGroupOptions) => Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
export declare interface UseFocusableGroupOptions {
|
|||
|
/**
|
|||
|
* Behavior for the Tab key.
|
|||
|
*/
|
|||
|
tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';
|
|||
|
/**
|
|||
|
* Tabster can ignore default handling of keydown events
|
|||
|
*/
|
|||
|
ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Subscribes to the tabster focused element. Calls the callback when the focused element changes.
|
|||
|
* @param callback - Callback to subscribe to the focused element.
|
|||
|
*/
|
|||
|
export declare function useFocusedElementChange(callback: Types.SubscribableCallback<HTMLElement | undefined, Types.FocusedElementDetail>): void;
|
|||
|
|
|||
|
/**
|
|||
|
* Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
|
|||
|
*/
|
|||
|
export declare const useFocusFinders: () => {
|
|||
|
findAllFocusable: (container: HTMLElement, acceptCondition?: ((el: HTMLElement) => boolean) | undefined) => HTMLElement[];
|
|||
|
findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
|
|||
|
findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
|
|||
|
findNextFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
|||
|
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
|||
|
};
|
|||
|
|
|||
|
/**
|
|||
|
*
|
|||
|
* @param name - The observed element to focus
|
|||
|
* @returns Function that will focus the
|
|||
|
*/
|
|||
|
export declare function useFocusObserved(name: string, options?: UseFocusObservedOptions): () => Types.ObservedElementAsyncRequest<boolean>;
|
|||
|
|
|||
|
declare interface UseFocusObservedOptions {
|
|||
|
/**
|
|||
|
* After timeout the focus attempt fails
|
|||
|
*/
|
|||
|
timeout?: number;
|
|||
|
}
|
|||
|
|
|||
|
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
|
|||
|
|
|||
|
declare type UseFocusVisibleOptions = {
|
|||
|
targetDocument?: Document;
|
|||
|
};
|
|||
|
|
|||
|
/**
|
|||
|
* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
|
|||
|
* like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
|
|||
|
* @returns ref to the element that uses `:focus-within` styles
|
|||
|
*/
|
|||
|
export declare function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
|
|||
|
|
|||
|
/**
|
|||
|
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
|
|||
|
* attribute to a referenced element to ensure keyboard navigation awareness
|
|||
|
* synced to keyborg logic without having to cause a re-render on react tree.
|
|||
|
*/
|
|||
|
export declare function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;
|
|||
|
|
|||
|
/**
|
|||
|
* Merges a collection of tabster attributes.
|
|||
|
*
|
|||
|
* ⚠️The attributes passed as arguments to this hook cannot change at runtime.
|
|||
|
* @internal
|
|||
|
* @param attributes - collection of tabster attributes from other react-tabster hooks
|
|||
|
* @returns single merged tabster attribute
|
|||
|
*/
|
|||
|
export declare const useMergedTabsterAttributes_unstable: (...attributes: Types.TabsterDOMAttribute[]) => Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
/**
|
|||
|
* Applies modal dialog behaviour through DOM attributes
|
|||
|
* Modal element will focus trap and hide other content on the page
|
|||
|
* The trigger element will be focused if focus is lost after the modal element is removed
|
|||
|
*
|
|||
|
* @returns DOM attributes to apply to the modal element and its trigger
|
|||
|
*/
|
|||
|
export declare const useModalAttributes: (options?: UseModalAttributesOptions) => {
|
|||
|
modalAttributes: Types.TabsterDOMAttribute;
|
|||
|
triggerAttributes: Types.TabsterDOMAttribute;
|
|||
|
};
|
|||
|
|
|||
|
export declare interface UseModalAttributesOptions {
|
|||
|
/**
|
|||
|
* Traps focus inside the elements the attributes are applied.
|
|||
|
* it forbids users to tab out of the focus trap into the actual browser.
|
|||
|
*/
|
|||
|
trapFocus?: boolean;
|
|||
|
/**
|
|||
|
* Traps focus inside the elements the attributes are applied.
|
|||
|
* This prop enables traditional force-focus behavior to match previous versions of Fluent.
|
|||
|
* Without this, users can tab out of the focus trap and into the browser chrome.
|
|||
|
* This matches the behavior of the native <dialog> element and inert.
|
|||
|
* We recommend setting this to true based on user feedback and consistency.
|
|||
|
*/
|
|||
|
legacyTrapFocus?: boolean;
|
|||
|
/**
|
|||
|
* Always reachabled in Tab order
|
|||
|
*/
|
|||
|
alwaysFocusable?: boolean;
|
|||
|
/**
|
|||
|
* Id to use for the modalizer. An id will be generated if not provided.
|
|||
|
*/
|
|||
|
id?: string;
|
|||
|
}
|
|||
|
|
|||
|
export declare function useObservedElement(name: string | string[]): Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
/**
|
|||
|
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes
|
|||
|
* in the keyboard navigation mode.
|
|||
|
*
|
|||
|
* @param callback - called every time the keyboard navigation state changes
|
|||
|
*/
|
|||
|
export declare function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void): void;
|
|||
|
|
|||
|
/**
|
|||
|
* Focus will be restored to the most recent target element when it is lost from a source
|
|||
|
* @returns Attribute to apply to the element that might lose focus
|
|||
|
*/
|
|||
|
export declare function useRestoreFocusSource(): Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
/**
|
|||
|
* Focus will be restored to the most recent target element when it is lost from a source
|
|||
|
* @returns Attribute to apply to the target element where focus is restored
|
|||
|
*/
|
|||
|
export declare function useRestoreFocusTarget(): Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
/**
|
|||
|
*/
|
|||
|
export declare function useSetKeyboardNavigation(): (isNavigatingWithKeyboard: boolean) => void;
|
|||
|
|
|||
|
/**
|
|||
|
* @internal
|
|||
|
* Hook that returns tabster attributes while ensuring tabster exists
|
|||
|
*/
|
|||
|
export declare const useTabsterAttributes: (props: Types.TabsterAttributeProps) => Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
/**
|
|||
|
* Designates an area where tabster does not control focus
|
|||
|
* @returns Attribute to apply to the target element that should be uncontrolled by tabster
|
|||
|
*/
|
|||
|
export declare function useUncontrolledFocus(): Types.TabsterDOMAttribute;
|
|||
|
|
|||
|
declare interface Visibilities {
|
|||
|
Invisible: 0;
|
|||
|
PartiallyVisible: 1;
|
|||
|
Visible: 2;
|
|||
|
}
|
|||
|
|
|||
|
declare const Visibilities: Visibilities;
|
|||
|
|
|||
|
declare type Visibility = Visibilities[keyof Visibilities];
|
|||
|
|
|||
|
declare interface WeakHTMLElement<D = undefined> {
|
|||
|
get(): HTMLElement | undefined;
|
|||
|
getData(): D | undefined;
|
|||
|
}
|
|||
|
|
|||
|
export { }
|