@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
55 lines (54 loc) • 2 kB
JavaScript
"use client";
const require_use_callback_ref = require("../utils/use-callback-ref/use-callback-ref.cjs");
let react = require("react");
//#region packages/@mantine/hooks/src/use-focus-within/use-focus-within.ts
function containsRelatedTarget(event) {
if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) return event.currentTarget.contains(event.relatedTarget);
return false;
}
function useFocusWithin({ onBlur, onFocus } = {}) {
const [focused, setFocused] = (0, react.useState)(false);
const focusedRef = (0, react.useRef)(false);
const previousNode = (0, react.useRef)(null);
const onFocusRef = require_use_callback_ref.useCallbackRef(onFocus);
const onBlurRef = require_use_callback_ref.useCallbackRef(onBlur);
const _setFocused = (0, react.useCallback)((value) => {
setFocused(value);
focusedRef.current = value;
}, []);
const handleFocusIn = (0, react.useCallback)((event) => {
if (!focusedRef.current) {
_setFocused(true);
onFocusRef(event);
}
}, []);
const handleFocusOut = (0, react.useCallback)((event) => {
if (focusedRef.current && !containsRelatedTarget(event)) {
_setFocused(false);
onBlurRef(event);
}
}, []);
const callbackRef = (0, react.useCallback)((node) => {
if (!node) return;
if (previousNode.current) {
previousNode.current.removeEventListener("focusin", handleFocusIn);
previousNode.current.removeEventListener("focusout", handleFocusOut);
}
node.addEventListener("focusin", handleFocusIn);
node.addEventListener("focusout", handleFocusOut);
previousNode.current = node;
}, [handleFocusIn, handleFocusOut]);
(0, react.useEffect)(() => () => {
if (previousNode.current) {
previousNode.current.removeEventListener("focusin", handleFocusIn);
previousNode.current.removeEventListener("focusout", handleFocusOut);
}
}, []);
return {
ref: callbackRef,
focused
};
}
//#endregion
exports.useFocusWithin = useFocusWithin;
//# sourceMappingURL=use-focus-within.cjs.map