/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {FocusTrapExtension, type FocusTrapInitialFocus} from '@lexical/a11y';
import {getExtensionDependencyFromEditor} from '@lexical/extension';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {type RefCallback, useCallback, useRef} from 'react';
export type {FocusTrapInitialFocus} from '@lexical/a11y';
/**
* Returns a `RefCallback` that registers the attached DOM element as a
* focus-trap container with {@link FocusTrapExtension}. The trap
* activates when `isActive` is `true` and the element is mounted, and is
* released when the element detaches or `isActive` becomes `false`.
*
* ```tsx
* const trapRef = useLexicalFocusTrapRef(true, 'container');
* return
…
;
* ```
*
* `allowOutside` is the escape hatch for descendants that portal outside the
* container (autocomplete popups, tooltips): return `true` for those targets so
* the trap lets them keep focus instead of pulling it back. It is held in a ref
* and read at event time, so passing an inline lambda is fine — it does not
* re-create the trap on every render.
*
* Multiple elements can use this hook simultaneously — each gets its
* own independent focus trap.
*
* Requires `FocusTrapExtension` in the editor's extension tree.
*/
export function useLexicalFocusTrapRef(
isActive: boolean,
initialFocus: FocusTrapInitialFocus = 'firstFocusable',
allowOutside?: (target: HTMLElement) => boolean,
): RefCallback {
const [editor] = useLexicalComposerContext();
const disposeRef = useRef<(() => void) | null>(null);
// Keep the latest predicate in a ref so an inline lambda doesn't change the
// RefCallback identity (which would tear down and rebuild the trap every
// render); the registered trap reads it at event time.
const allowOutsideRef = useRef(allowOutside);
allowOutsideRef.current = allowOutside;
return useCallback(
(node: HTMLElement | null) => {
if (disposeRef.current !== null) {
disposeRef.current();
disposeRef.current = null;
}
if (node !== null && isActive) {
const dep = getExtensionDependencyFromEditor(
editor,
FocusTrapExtension,
);
disposeRef.current = dep.output.register(node, {
allowOutside: target => {
const fn = allowOutsideRef.current;
return fn ? fn(target) : false;
},
initialFocus,
});
}
},
[editor, isActive, initialFocus],
);
}