@base-ui-components/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.
105 lines • 4.47 kB
TypeScript
import * as React from 'react';
import type { InteractionType } from '@base-ui-components/utils/useEnhancedClickHandler';
import type { FloatingContext, FloatingRootContext } from "../types.js";
import { FloatingTreeStore } from "./FloatingTreeStore.js";
export interface FloatingFocusManagerProps {
children: React.JSX.Element;
/**
* The floating context returned from `useFloatingRootContext`.
*/
context: FloatingRootContext | FloatingContext;
/**
* The interaction type used to open the floating element.
*/
openInteractionType?: InteractionType | null;
/**
* Whether or not the focus manager should be disabled. Useful to delay focus
* management until after a transition completes or some other conditional
* state.
* @default false
*/
disabled?: boolean;
/**
* The order in which focus cycles.
* @default ['content']
*/
order?: Array<'reference' | 'floating' | 'content'>;
/**
* Determines the element to focus when the floating element is opened.
*
* - `false`: Do not move focus.
* - `true`: Move focus based on the default behavior (first tabbable element or floating element).
* - `RefObject`: Move focus to the ref element.
* - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
* Return an element to focus, `true` to use default behavior, `null` to fallback to default behavior,
* or `false`/`undefined` to do nothing.
* @default true
*/
initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void);
/**
* Determines the element to focus when the floating element is closed.
*
* - `false`: Do not move focus.
* - `true`: Move focus based on the default behavior (reference or previously focused element).
* - `RefObject`: Move focus to the ref element.
* - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
* Return an element to focus, `true` to use the default behavior, `null` to fallback to default behavior,
* or `false`/`undefined` to do nothing.
* @default true
*/
returnFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void);
/**
* Determines where focus should be restored if focus inside the floating element is lost
* (such as due to the removal of the currently focused element from the DOM).
*
* - `true`: restore to the nearest tabbable element inside the floating tree (previous
* tabbable if possible, otherwise the last tabbable, then the floating element itself)
* - `'popup'`: restore directly to the floating element (container) itself
* - `false`: do not restore focus
* @default false
*/
restoreFocus?: boolean | 'popup';
/**
* Determines if focus is “modal”, meaning focus is fully trapped inside the
* floating element and outside content cannot be accessed. This includes
* screen reader virtual cursors.
* @default true
*/
modal?: boolean;
/**
* Determines whether `focusout` event listeners that control whether the
* floating element should be closed if the focus moves outside of it are
* attached to the reference and floating elements. This affects non-modal
* focus management.
* @default true
*/
closeOnFocusOut?: boolean;
/**
* Returns a list of elements that should be considered part of the
* floating element.
*/
getInsideElements?: () => Element[];
/**
* Overrides the element to focus when tabbing forward out of the floating element.
*/
nextFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null;
/**
* Overrides the element to focus when tabbing backward out of the floating element.
*/
previousFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null;
/**
* Ref to the focus guard preceding the floating element content.
* Can be useful to focus the popup progammatically.
*/
beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null>;
/**
* External FlatingTree to use when the one provided by context can't be used.
*/
externalTree?: FloatingTreeStore;
}
/**
* Provides focus management for the floating element.
* @see https://floating-ui.com/docs/FloatingFocusManager
* @internal
*/
export declare function FloatingFocusManager(props: FloatingFocusManagerProps): React.JSX.Element;