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; /** * 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[]; /** * Used by child FocusRectsProviders to register their element with the parent provider. */ readonly registerProvider: (ref: React.RefObject) => void; /** * Used by child FocusRectsProviders to unregister their element from the parent provider. */ readonly unregisterProvider: (ref: React.RefObject) => void; }; export declare const FocusRectsContext: React.Context; /** * 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): void; /** * Function Component wrapper which enables calling `useFocusRects` hook. * Renders nothing. */ export declare const FocusRects: React.FunctionComponent<{ rootRef?: React.RefObject; }>;