@octopusdeploy/design-system-components/dist/src/hooks/useContainsFocus.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useContainsFocus = useContainsFocus;
const react_1 = require("react");
function useContainsFocus(ref, focusOptions) {
    const [containsFocused, setContainsFocused] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        const container = ref.current;
        const requiresFocusVisible = focusOptions?.focusVisible ?? false;
        if (container) {
            const onFocusIn = (e) => {
                if (requiresFocusVisible) {
                    setContainsFocused(elementHasFocusVisible(e.target));
                }
                else {
                    setContainsFocused(true);
                }
            };
            const onFocusOut = (e) => {
                if (!(e.relatedTarget instanceof HTMLElement) || !container.contains(e.relatedTarget)) {
                    setContainsFocused(false);
                }
            };
            container.addEventListener("focusin", onFocusIn);
            container.addEventListener("focusout", onFocusOut);
            return () => {
                container.removeEventListener("focusin", onFocusIn);
                container.removeEventListener("focusout", onFocusOut);
            };
        }
    }, [focusOptions?.focusVisible, ref]);
    return containsFocused;
}
function elementHasFocusVisible(element) {
    return element instanceof HTMLElement && element.matches(":focus-visible");
}