@razorpay/blade
Version:
The Design System that powers Razorpay
31 lines (27 loc) • 1.12 kB
JavaScript
import { useEffect } from 'react';
var useFocusWithin = function useFocusWithin(ref, _ref) {
var onFocusWithin = _ref.onFocusWithin,
onBlurWithin = _ref.onBlurWithin;
useEffect(function () {
var element = ref.current;
if (!element) return;
var handleFocusIn = function handleFocusIn() {
onFocusWithin === null || onFocusWithin === void 0 ? void 0 : onFocusWithin();
};
var handleFocusOut = function handleFocusOut(event) {
// Ensure that focus is not still within the container
if (element && !element.contains(event.relatedTarget)) {
onBlurWithin === null || onBlurWithin === void 0 ? void 0 : onBlurWithin();
}
};
element.addEventListener('focusin', handleFocusIn);
element.addEventListener('focusout', handleFocusOut);
// eslint-disable-next-line consistent-return
return function () {
element.removeEventListener('focusin', handleFocusIn);
element.removeEventListener('focusout', handleFocusOut);
};
}, [ref, onFocusWithin, onBlurWithin]);
};
export { useFocusWithin };
//# sourceMappingURL=useFocusWithin.js.map