@primer/react/dist/hooks/useFocusTrap.js

An implementation of GitHub's Primer Design System using React

import { useOnOutsideClick } from "./useOnOutsideClick.js";
import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
import React from "react";
import { focusTrap } from "@primer/behaviors";
//#region src/hooks/useFocusTrap.ts
/**
* Hook used to trap focus inside a container. Returns a ref that can be added to the container
* that should trap focus.
* @param settings {FocusTrapHookSettings}
*/
function useFocusTrap(settings, dependencies = []) {
	const [outsideClicked, setOutsideClicked] = React.useState(false);
	const containerRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.containerRef);
	const initialFocusRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
	const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
	const abortController = React.useRef();
	const previousFocusedElement = React.useRef(null);
	if (!previousFocusedElement.current && !disabled) previousFocusedElement.current = document.activeElement;
	function disableTrap() {
		var _abortController$curr;
		(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
		if (settings !== null && settings !== void 0 && settings.allowOutsideClick && outsideClicked) return;
		if (settings !== null && settings !== void 0 && settings.returnFocusRef && settings.returnFocusRef.current instanceof HTMLElement) settings.returnFocusRef.current.focus();
		else if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
			previousFocusedElement.current.focus();
			previousFocusedElement.current = null;
		}
	}
	React.useEffect(() => {
		if (containerRef.current instanceof HTMLElement) if (!disabled) {
			var _initialFocusRef$curr;
			abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : void 0);
			return () => {
				disableTrap();
			};
		} else disableTrap();
	}, [
		containerRef,
		initialFocusRef,
		disabled,
		...dependencies
	]);
	useOnOutsideClick({
		containerRef,
		onClickOutside: () => {
			setOutsideClicked(true);
			if (settings !== null && settings !== void 0 && settings.allowOutsideClick) {
				var _abortController$curr2;
				if (settings.returnFocusRef) settings.returnFocusRef = void 0;
				settings.restoreFocusOnCleanUp = false;
				(_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
			}
		}
	});
	return {
		containerRef,
		initialFocusRef
	};
}
//#endregion
export { useFocusTrap };