@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.
69 lines • 2.47 kB
TypeScript
import * as React from 'react';
import type { FloatingRootContext } from "../types.js";
export interface FloatingFocusManagerProps {
children: React.JSX.Element;
/**
* The floating context returned from `useFloatingRootContext`.
*/
context: FloatingRootContext;
/**
* 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'>;
/**
* Which element to initially focus. Can be either a number (tabbable index as
* specified by the `order`) or a ref.
* @default 0
*/
initialFocus?: number | React.RefObject<HTMLElement | null>;
/**
* Determines if focus should be returned to the reference element once the
* floating element closes/unmounts (or if that is not available, the
* previously focused element). This prop is ignored if the floating element
* lost focus.
* It can be also set to a ref to explicitly control the element to return focus to.
* @default true
*/
returnFocus?: boolean | React.RefObject<HTMLElement | null>;
/**
* Determines if focus should be restored to the nearest tabbable element if
* focus inside the floating element is lost (such as due to the removal of
* the currently focused element from the DOM).
* @default false
*/
restoreFocus?: boolean;
/**
* 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[];
}
/**
* Provides focus management for the floating element.
* @see https://floating-ui.com/docs/FloatingFocusManager
* @internal
*/
export declare function FloatingFocusManager(props: FloatingFocusManagerProps): React.JSX.Element;