@base-ui/react
Version:
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
28 lines • 1.32 kB
TypeScript
import * as React from 'react';
import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
import { REASONS } from "../../internals/reasons.js";
/**
* Minimal store interface required by the focus guard hook.
* Both PopoverStore and MenuStore satisfy this interface.
*/
interface TriggerFocusGuardStore {
setOpen(open: boolean, eventDetails: BaseUIChangeEventDetails<typeof REASONS.focusOut>): void;
select(key: 'positionerElement'): HTMLElement | null;
context: {
readonly beforeContentFocusGuardRef: React.RefObject<HTMLElement | null>;
readonly triggerFocusTargetRef: React.RefObject<HTMLElement | null>;
};
}
/**
* Provides focus guard handlers for popup triggers (Popover, Menu).
*
* When the popup is open, invisible focus guard elements are placed before and after
* the trigger. These handlers close the popup and move focus to the appropriate
* tabbable element when the guards receive focus (i.e. when the user tabs out).
*/
export declare function useTriggerFocusGuards(store: TriggerFocusGuardStore, triggerElementRef: React.RefObject<HTMLElement | null>): {
preFocusGuardRef: React.RefObject<HTMLElement | null>;
handlePreFocusGuardFocus: (event: React.FocusEvent) => void;
handleFocusTargetFocus: (event: React.FocusEvent) => void;
};
export {};