@workday/canvas-kit-react/dist/es6/popup/lib/hooks/useAlwaysCloseOnOutsideClick.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { PopupStack } from '@workday/canvas-kit-popup-stack';
import { createElemPropsHook } from '@workday/canvas-kit-react/common';
import { usePopupModel } from './usePopupModel';
/**
 * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
 * click happened outside the `stackRef` element and its children regardless of the position in the
 * stack. This is useful for Tooltips or hierarchical menus. Adds a
 * `data-behavior-click-outside-close="always"` attribute to ensure proper functionality.
 *
 * This should be used with popup elements that should close no matter their position in the stack
 * (i.e. Tooltips).
 */
export const useAlwaysCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model => {
    const onClick = React.useCallback((event) => {
        if (!model.state.stackRef.current) {
            return;
        }
        if (
        // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
        // decide if clicking the target should toggle the popup rather than it toggling implicitly
        // because the target is outside `ref.current`
        !PopupStack.contains(model.state.stackRef.current, event.target)) {
            model.events.hide();
        }
    }, [model.events, model.state.stackRef]);
    const visible = model.state.visibility !== 'hidden';
    React.useLayoutEffect(() => {
        var _a;
        if (!visible) {
            return;
        }
        document.addEventListener('mousedown', onClick);
        (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-behavior-click-outside-close', 'always');
        return () => {
            document.removeEventListener('mousedown', onClick);
        };
    }, [model.state.stackRef, visible, onClick]);
    return {};
});