@redocly/theme/lib/core/hooks/use-focus-trap.js

Shared UI components lib

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFocusTrap = useFocusTrap;
const react_1 = require("react");
function useFocusTrap(containerRef) {
    (0, react_1.useEffect)(() => {
        const trapElement = containerRef.current;
        if (!trapElement)
            return;
        const focusableElements = trapElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
        const firstElement = focusableElements[0];
        const handleKeyDown = (event) => {
            if (event.key === 'Tab') {
                const lastElement = focusableElements[focusableElements.length - 1];
                if (event.shiftKey && document.activeElement === firstElement) {
                    lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
                    event.preventDefault();
                }
                else if (!event.shiftKey && document.activeElement === lastElement) {
                    firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
                    event.preventDefault();
                }
            }
        };
        trapElement.addEventListener('keydown', handleKeyDown);
        if (firstElement) {
            firstElement.focus();
        }
        return () => {
            trapElement.removeEventListener('keydown', handleKeyDown);
        };
    }, [containerRef]);
}
//# sourceMappingURL=use-focus-trap.js.map