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(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 { style?: Partial; /** * 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; } declare interface CrossOriginFocusedElementState extends Subscribable, Disposable { focus(element: CrossOriginElement, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise; focusById(elementId: string, rootId?: string, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise; focusByObservedName(observedName: string, timeout?: number, rootId?: string, noFocusedProgrammaticallyFlag?: boolean, noAccessibleCheck?: boolean): Promise; } declare interface CrossOriginMessage { data: CrossOriginTransactionData; send: CrossOriginTransactionSend; } declare interface CrossOriginObservedElementState extends Subscribable, Disposable { getElement(observedName: string, accessibility?: ObservedElementAccesibility): Promise; waitElement(observedName: string, timeout: number, accessibility?: ObservedElementAccesibility): Promise; requestFocus(observedName: string, timeout: number): Promise; } declare interface CrossOriginSentTo { [id: string]: true; } declare interface CrossOriginTransactionData { 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) => 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 { 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) => () => void): void; } declare type FindAllProps = Pick; declare type FindDefaultProps = Pick; /** * 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; 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; 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, 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): 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[0]; declare interface Groupper extends TabsterPart, 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, Disposable { isNavigatingWithKeyboard(): boolean; setNavigatingWithKeyboard(isNavigatingWithKeyboard: boolean): void; } export { KEYBORG_FOCUSIN } export { KeyborgFocusInEvent } declare interface Modalizer extends TabsterPart, 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[]; /** @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; 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, TabsterPartWithFindNextTabbable, TabsterPartWithAcceptElement { readonly id: string; readonly dummyManager: DummyInputManager | undefined; readonly visibilityTolerance: NonNullable; 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; 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, Disposable, ObservedElementAPIInternal { getElement(observedName: string, accessibility?: ObservedElementAccesibility): HTMLElement | null; waitElement(observedName: string, timeout: number, accessibility?: ObservedElementAccesibility): ObservedElementAsyncRequest; requestFocus(observedName: string, timeout: number): ObservedElementAsyncRequest; } declare interface ObservedElementAPIInternal { /** @internal */ onObservedElementUpdate(element: HTMLElement): void; } declare interface ObservedElementAsyncRequest { result: Promise; 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): 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 { } 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 { /**@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 { subscribe(callback: SubscribableCallback): void; /** @internal */ subscribeFirst(callback: SubscribableCallback): void; unsubscribe(callback: SubscribableCallback): void; } declare type SubscribableCallback = (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
  • elements and outside for 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?:

    (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, Disposable, TabsterCoreInternal, Omit { } 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; } 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 = CustomEvent; export { TabsterMoveFocusEvent } declare type TabsterMoveFocusEvent_2 = TabsterEventWithDetails; 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; declare interface TabsterPart

    { 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): 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, 'container'>) => HTMLElement | null | undefined; findPrevFocusable: (currentElement: HTMLElement, options?: Pick, '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; declare interface UseFocusObservedOptions { /** * After timeout the focus attempt fails */ timeout?: number; } export declare function useFocusVisible(options?: UseFocusVisibleOptions): React_2.RefObject; 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(): React_2.RefObject; /** * 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(): RefObject; /** * 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

    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 { get(): HTMLElement | undefined; getData(): D | undefined; } export { }