rooks/dist/esm/hooks/useFocusWithin.js

Essential React custom hooks ⚓ to super charge your components!

import { useCallback, useRef } from "react";
/**
 * useFocusWithin
 * @description Handles focus events for the target component.
 * @see {@link https://react-hooks.org/docs/useFocusWithin}
 */
var useFocusWithin = function (props) {
    var onBlurWithin = props.onBlurWithin, onFocusWithin = props.onFocusWithin, onFocusWithinChange = props.onFocusWithinChange;
    var state = useRef({
        isFocusWithin: false,
    });
    var onBlur = useCallback(function (e) {
        if (state.current.isFocusWithin &&
            !e.currentTarget.contains(e.relatedTarget)) {
            state.current.isFocusWithin = false;
            if (onBlurWithin)
                onBlurWithin(e);
            if (onFocusWithinChange)
                onFocusWithinChange(false);
        }
    }, [onBlurWithin, onFocusWithinChange]);
    var onFocus = useCallback(function (e) {
        if (!state.current.isFocusWithin) {
            if (onFocusWithin)
                onFocusWithin(e);
            if (onFocusWithinChange)
                onFocusWithinChange(true);
            state.current.isFocusWithin = true;
        }
    }, [onFocusWithin, onFocusWithinChange]);
    return {
        focusWithinProps: {
            onFocus: onFocus,
            onBlur: onBlur,
        },
    };
};
export { useFocusWithin };