@boomerang-io/carbon-addons-boomerang-react/dist/cjs/hooks/useHeaderMenu.js

Carbon Addons for Boomerang apps

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
/**
 * Supports HeaderMenu components in the Header meeting usability and a11y guidelines
 * Manage state for click/touch, escape and tab events
 */
function useHeaderMenu(focusableElementId) {
    const ref = React__default.default.useRef(null);
    const [isOpen, setIsOpen] = React__default.default.useState(false);
    const toggleActive = () => setIsOpen(!isOpen);
    // Close menu if click event originates outside the menu
    const handleMousedownEvent = React__default.default.useCallback((event) => {
        if (!ref.current?.contains(event.target)) {
            setIsOpen(false);
        }
        return;
    }, []);
    // Close menu if ESC keydown event originates in the menu and transfer focus
    const handleKeyDownEvent = React__default.default.useCallback((event) => {
        if (event.key === "Escape") {
            if (ref.current?.contains(event.target)) {
                document.getElementById(focusableElementId)?.focus();
                setIsOpen(false);
            }
        }
        return;
    }, [focusableElementId]);
    // Close menu if focus transfer event originates in the node AND
    // transfers focus to a element OUTSIDE the menu
    const handleFocusOutEvent = React__default.default.useCallback((event) => {
        if (event.relatedTarget && !ref.current?.contains(event.relatedTarget)) {
            setIsOpen(false);
        }
        return;
    }, []);
    React__default.default.useEffect(() => {
        document.addEventListener("mousedown", handleMousedownEvent);
        document.addEventListener("keydown", handleKeyDownEvent);
        document.addEventListener("focusout", handleFocusOutEvent);
        return () => {
            document.removeEventListener("mousedown", handleMousedownEvent);
            document.removeEventListener("keydown", handleKeyDownEvent);
            document.removeEventListener("focusout", handleFocusOutEvent);
        };
    }, [handleMousedownEvent, handleKeyDownEvent, handleFocusOutEvent]);
    return { isOpen, setIsOpen, toggleActive, ref };
}

exports.default = useHeaderMenu;