@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
34 lines (33 loc) • 1.39 kB
JavaScript
"use client";
import { useDidUpdate } from "../use-did-update/use-did-update.mjs";
import { useRef } from "react";
//#region packages/@mantine/hooks/src/use-focus-return/use-focus-return.ts
function useFocusReturn({ opened, shouldReturnFocus = true }) {
const lastActiveElement = useRef(null);
const returnFocus = () => {
if (lastActiveElement.current && "focus" in lastActiveElement.current && typeof lastActiveElement.current.focus === "function") lastActiveElement.current?.focus({ preventScroll: true });
};
useDidUpdate(() => {
let timeout = -1;
const clearFocusTimeout = (event) => {
if (event.key === "Tab") window.clearTimeout(timeout);
};
document.addEventListener("keydown", clearFocusTimeout);
if (opened) lastActiveElement.current = document.activeElement;
else if (shouldReturnFocus) {
const activeElementAtClose = document.activeElement;
timeout = window.setTimeout(() => {
const currentActiveElement = document.activeElement;
if (currentActiveElement === null || currentActiveElement === document.body || currentActiveElement === activeElementAtClose) returnFocus();
}, 10);
}
return () => {
window.clearTimeout(timeout);
document.removeEventListener("keydown", clearFocusTimeout);
};
}, [opened, shouldReturnFocus]);
return returnFocus;
}
//#endregion
export { useFocusReturn };
//# sourceMappingURL=use-focus-return.mjs.map