mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-27 20:10:58 +00:00
65 lines
1.9 KiB
JavaScript
65 lines
1.9 KiB
JavaScript
'use client';
|
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
import { useCallbackRef } from '../utils/use-callback-ref/use-callback-ref.mjs';
|
|
|
|
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] = useState(false);
|
|
const focusedRef = useRef(false);
|
|
const previousNode = useRef(null);
|
|
const onFocusRef = useCallbackRef(onFocus);
|
|
const onBlurRef = useCallbackRef(onBlur);
|
|
const _setFocused = useCallback((value) => {
|
|
setFocused(value);
|
|
focusedRef.current = value;
|
|
}, []);
|
|
const handleFocusIn = useCallback((event) => {
|
|
if (!focusedRef.current) {
|
|
_setFocused(true);
|
|
onFocusRef(event);
|
|
}
|
|
}, []);
|
|
const handleFocusOut = useCallback((event) => {
|
|
if (focusedRef.current && !containsRelatedTarget(event)) {
|
|
_setFocused(false);
|
|
onBlurRef(event);
|
|
}
|
|
}, []);
|
|
const callbackRef = 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]
|
|
);
|
|
useEffect(
|
|
() => () => {
|
|
if (previousNode.current) {
|
|
previousNode.current.removeEventListener("focusin", handleFocusIn);
|
|
previousNode.current.removeEventListener("focusout", handleFocusOut);
|
|
}
|
|
},
|
|
[]
|
|
);
|
|
return { ref: callbackRef, focused };
|
|
}
|
|
|
|
export { useFocusWithin };
|
|
//# sourceMappingURL=use-focus-within.mjs.map
|