61 lines
3.0 KiB
TypeScript
61 lines
3.0 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
/**
|
||
|
|
* Counter for mounted component that uses focus rectangles.
|
||
|
|
* We want to cleanup the listeners before the last component that uses focus rectangles unmounts.
|
||
|
|
*/
|
||
|
|
export type ListenerCallbacks = {
|
||
|
|
onMouseDown: (ev: MouseEvent) => void;
|
||
|
|
onPointerDown: (ev: PointerEvent) => void;
|
||
|
|
onKeyDown: (ev: KeyboardEvent) => void;
|
||
|
|
onKeyUp: (ev: KeyboardEvent) => void;
|
||
|
|
};
|
||
|
|
export type IFocusRectsContext = {
|
||
|
|
/**
|
||
|
|
* Ref to the root element of the provider
|
||
|
|
*/
|
||
|
|
readonly providerRef: React.RefObject<HTMLElement>;
|
||
|
|
/**
|
||
|
|
* Array of this and all child provider elements under this one in the React tree.
|
||
|
|
*
|
||
|
|
* Tracking all child providers will allow a focus event in the parent to also set focus styling in its descendants.
|
||
|
|
* This is needed for Combobox, for example, because the focus events happen on the parent context, but the visual
|
||
|
|
* focus indicator is in the combobox callout. The callout needs to be notified on focus events from the parent.
|
||
|
|
*/
|
||
|
|
readonly registeredProviders: React.RefObject<HTMLElement>[];
|
||
|
|
/**
|
||
|
|
* Used by child FocusRectsProviders to register their element with the parent provider.
|
||
|
|
*/
|
||
|
|
readonly registerProvider: (ref: React.RefObject<HTMLElement>) => void;
|
||
|
|
/**
|
||
|
|
* Used by child FocusRectsProviders to unregister their element from the parent provider.
|
||
|
|
*/
|
||
|
|
readonly unregisterProvider: (ref: React.RefObject<HTMLElement>) => void;
|
||
|
|
};
|
||
|
|
export declare const FocusRectsContext: React.Context<IFocusRectsContext | undefined>;
|
||
|
|
/**
|
||
|
|
* Initializes the logic which:
|
||
|
|
*
|
||
|
|
* 1. Subscribes keydown, keyup, mousedown and pointerdown events. (It will only do it once for the current element of
|
||
|
|
* the FocusRectsContext providerRef or once per window if no such element is provided via context, so it's safe to
|
||
|
|
* call this method multiple times.)
|
||
|
|
* 2. When the user presses triggers a keydown or keyup event via directional keyboard keys, adds the
|
||
|
|
* 'ms-Fabric--isFocusVisible' classname to the current element of the FocusRectsContext providerRef or the document
|
||
|
|
* body if no such element is provided via context, and removes the 'ms-Fabric-isFocusHidden' classname.
|
||
|
|
* 3. When the user triggers a mousedown or pointerdown event, adds the 'ms-Fabric-isFocusHidden' classname to the
|
||
|
|
* current element of the FocusRectsContext providerRef or the document body if no such element is provided via
|
||
|
|
* context, and removes the 'ms-Fabric--isFocusVisible' classname.
|
||
|
|
*
|
||
|
|
* This logic allows components on the page to conditionally render focus treatments based on
|
||
|
|
* the existence of global classnames, which simplifies logic overall.
|
||
|
|
*
|
||
|
|
* @param rootRef - A Ref object. Focus rectangle can be applied on itself and all its children.
|
||
|
|
*/
|
||
|
|
export declare function useFocusRects(rootRef?: React.RefObject<HTMLElement>): void;
|
||
|
|
/**
|
||
|
|
* Function Component wrapper which enables calling `useFocusRects` hook.
|
||
|
|
* Renders nothing.
|
||
|
|
*/
|
||
|
|
export declare const FocusRects: React.FunctionComponent<{
|
||
|
|
rootRef?: React.RefObject<HTMLElement>;
|
||
|
|
}>;
|