@workday/canvas-kit-react/dist/es6/popup/lib/hooks/useBringToTopOnClick.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';
/**
 * This hook will bring an element to the top of the stack when any element inside the provided
 * {@link PopupModel}'s `state.stackRef` element is clicked. If {@link PopupPopper Popup.Popper} was
 * used or `PopupStack.add` provided an `owner`, all "child" popups will also be brought to the top.
 * A "child" popup is a Popup that was opened from another Popup. Usually this is a Tooltip or
 * Select component inside something like a Modal.
 *
 * This should be used on popup elements that are meant to persist (i.e. Windows).
 */
export const useBringToTopOnClick = createElemPropsHook(usePopupModel)(model => {
    const timer = React.useRef(-1);
    const onClick = React.useCallback((event) => {
        // requestAnimationFrame is used to control timing of when `bringToTop` is called.
        // https://github.com/Workday/canvas-kit/pull/670#discussion_r436158184
        timer.current = requestAnimationFrame(() => {
            var _a;
            if ((_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
                PopupStack.bringToTop(model.state.stackRef.current);
            }
        });
    }, [model.state.stackRef]);
    const visible = model.state.visibility !== 'hidden';
    React.useLayoutEffect(() => {
        if (!visible) {
            return;
        }
        document.addEventListener('click', onClick);
        return () => {
            cancelAnimationFrame(timer.current);
            document.removeEventListener('click', onClick);
        };
    }, [visible, onClick]);
    return {};
});