@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
44 lines (43 loc) • 1.86 kB
JavaScript
"use client";
const require_tabbable = require("./tabbable.cjs");
const require_scope_tab = require("./scope-tab.cjs");
let react = require("react");
//#region packages/@mantine/hooks/src/use-focus-trap/use-focus-trap.ts
function useFocusTrap(active = true) {
const ref = (0, react.useRef)(null);
const focusNode = (node) => {
let focusElement = node.querySelector("[data-autofocus]");
if (!focusElement) {
const children = Array.from(node.querySelectorAll(require_tabbable.FOCUS_SELECTOR));
focusElement = children.find(require_tabbable.tabbable) || children.find(require_tabbable.focusable) || null;
if (!focusElement && require_tabbable.focusable(node)) focusElement = node;
}
if (focusElement) focusElement.focus({ preventScroll: true });
else if (process.env.NODE_ENV === "development") console.warn("[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node", node);
};
const setRef = (0, react.useCallback)((node) => {
if (!active) return;
if (node === null) return;
if (ref.current === node) return;
if (node) {
setTimeout(() => {
if (node.getRootNode()) focusNode(node);
else if (process.env.NODE_ENV === "development") console.warn("[@mantine/hooks/use-focus-trap] Ref node is not part of the dom", node);
});
ref.current = node;
} else ref.current = null;
}, [active]);
(0, react.useEffect)(() => {
if (!active) return;
ref.current && setTimeout(() => focusNode(ref.current));
const handleKeyDown = (event) => {
if (event.key === "Tab" && ref.current) require_scope_tab.scopeTab(ref.current, event);
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [active]);
return setRef;
}
//#endregion
exports.useFocusTrap = useFocusTrap;
//# sourceMappingURL=use-focus-trap.cjs.map