rooks/dist/cjs/hooks/useFocusWithin.js

Essential React custom hooks ⚓ to super charge your components!

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFocusWithin = void 0;
var react_1 = require("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 = (0, react_1.useRef)({
        isFocusWithin: false,
    });
    var onBlur = (0, react_1.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 = (0, react_1.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,
        },
    };
};
exports.useFocusWithin = useFocusWithin;