DocsAPI referenceHeadlessfocus-trap

focus-trap headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

@grassroot/ui-headless-core/focus-trap

Core connector and vanilla API

9 exports
View source packages/ui-headless/core/src/focus-trap.ts

FocusTrapHandle

interface
DeclarationView source
FocusTrapHandlets
interface FocusTrapHandle {
/** Idempotent. Removes the container's keydown listener and the
* document's focusin reclaim listener, and restores focus per the
* `returnFocus` rule. */
release(): void;
}
Name
Kind
Type
Requirement
Description
release
method
() => void
required
Idempotent. Removes the container's keydown listener and the document's focusin reclaim listener, and restores focus per the `returnFocus` rule.
Name
release
Kind
method
Type
() => void
Requirement
required
Description
Idempotent. Removes the container's keydown listener and the document's focusin reclaim listener, and restores focus per the `returnFocus` rule.

FocusTrapOptions

interface
DeclarationView source
FocusTrapOptionsts
interface FocusTrapOptions {
/** Element to focus on trap; default first tabbable, else the container
* itself (given tabindex="-1" if it has none). */
readonly initialFocus?: () => HTMLElement | null;
/** Element to restore on release; default the element focused at trap
* time. Restored only if the candidate still has a callable `focus`
* function (not merely `isConnected`). Returning `null` explicitly opts
* OUT of restoration entirely; only an absent option (or a `undefined`
* return) falls back to the previously-focused element. */
readonly returnFocus?: () => HTMLElement | null;
}
Name
Kind
Type
Requirement
Description
initialFocus
property
() => HTMLElement | null
optional
Element to focus on trap; default first tabbable, else the container itself (given tabindex="-1" if it has none).
returnFocus
property
() => HTMLElement | null
optional
Element to restore on release; default the element focused at trap time. Restored only if the candidate still has a callable `focus` function (not merely `isConnected`). Returning `null` explicitly opts OUT of restoration entirely; only an absent option (or a `undefined` return) falls back to the previously-focused element.
Name
initialFocus
Kind
property
Type
() => HTMLElement | null
Requirement
optional
Description
Element to focus on trap; default first tabbable, else the container itself (given tabindex="-1" if it has none).
Name
returnFocus
Kind
property
Type
() => HTMLElement | null
Requirement
optional
Description
Element to restore on release; default the element focused at trap time. Restored only if the candidate still has a callable `focus` function (not merely `isConnected`). Returning `null` explicitly opts OUT of restoration entirely; only an absent option (or a `undefined` return) falls back to the previously-focused element.

isFocusEscaped

function
DeclarationView source
isFocusEscapedts
declare function isFocusEscaped(container: MinimalContainerLike, active: unknown): boolean;
Name
Kind
Type
Requirement
container
parameter
MinimalContainerLike
required
active
parameter
unknown
required
return
return value
boolean
n/a
Name
container
Kind
parameter
Type
MinimalContainerLike
Requirement
required
Name
active
Kind
parameter
Type
unknown
Requirement
required
Name
return
Kind
return value
Type
boolean
Requirement
n/a

queryTabbable

function
DeclarationView source
queryTabbablets
declare function queryTabbable(container: MinimalContainerLike): MinimalTabbableLike[];
Name
Kind
Type
Requirement
container
parameter
MinimalContainerLike
required
return
return value
MinimalTabbableLike[]
n/a
Name
container
Kind
parameter
Type
MinimalContainerLike
Requirement
required
Name
return
Kind
return value
Type
MinimalTabbableLike[]
Requirement
n/a

Restores focus only when the candidate still has a callable `focus` function — `isConnected` alone is insufficient (a candidate might be a plain stand-in with no live DOM presence at all).

DeclarationView source
resolveFocusReturnTargetts
declare function resolveFocusReturnTarget(candidate: unknown): MinimalTabbableLike | null;
Name
Kind
Type
Requirement
candidate
parameter
unknown
required
return
return value
MinimalTabbableLike | null
n/a
Name
candidate
Kind
parameter
Type
unknown
Requirement
required
Name
return
Kind
return value
Type
MinimalTabbableLike | null
Requirement
n/a
DeclarationView source
resolveInitialFocusTargetts
declare function resolveInitialFocusTarget(container: MinimalContainerLike): MinimalTabbableLike;
Name
Kind
Type
Requirement
container
parameter
MinimalContainerLike
required
return
return value
MinimalTabbableLike
n/a
Name
container
Kind
parameter
Type
MinimalContainerLike
Requirement
required
Name
return
Kind
return value
Type
MinimalTabbableLike
Requirement
n/a

resolveTabTarget

function

An active element outside the tracked set is treated as index -1: forwards enters at the first element, backwards enters at the last.

DeclarationView source
resolveTabTargetts
declare function resolveTabTarget(tabbable: readonly MinimalTabbableLike[], active: unknown, backwards: boolean): MinimalTabbableLike | null;
Name
Kind
Type
Requirement
tabbable
parameter
readonly MinimalTabbableLike[]
required
active
parameter
unknown
required
backwards
parameter
boolean
required
return
return value
MinimalTabbableLike | null
n/a
Name
tabbable
Kind
parameter
Type
readonly MinimalTabbableLike[]
Requirement
required
Name
active
Kind
parameter
Type
unknown
Requirement
required
Name
backwards
Kind
parameter
Type
boolean
Requirement
required
Name
return
Kind
return value
Type
MinimalTabbableLike | null
Requirement
n/a
DeclarationView source
TABBABLE_SELECTORts
export declare const TABBABLE_SELECTOR: "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";

trapFocus

function
DeclarationView source
trapFocusts
declare function trapFocus(container: HTMLElement, options?: FocusTrapOptions): FocusTrapHandle;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
FocusTrapOptions
optional
return
return value
FocusTrapHandle
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
FocusTrapOptions
Requirement
optional
Name
return
Kind
return value
Type
FocusTrapHandle
Requirement
n/a

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

This entry is core-only. No framework adapter package ships for focus-trap yet — mount it through the vanilla API above.