@workday/canvas-kit-react/dist/es6/tooltip/lib/useTooltip.js

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, useCloseOnTargetHidden, } from '@workday/canvas-kit-react/popup';
import { useUniqueId } from '@workday/canvas-kit-react/common';
const useIntentTimer = (fn, waitMs = 0) => {
    const timer = React.useRef();
    const start = () => {
        timer.current = window.setTimeout(fn, waitMs);
    };
    const clear = () => {
        window.clearTimeout(timer.current);
        timer.current = undefined;
    };
    // be sure to clear our timeout
    React.useEffect(() => {
        return () => {
            window.clearTimeout(timer.current);
        };
    }, [timer]);
    return {
        start,
        clear,
    };
};
const isInteractiveElement = (element) => {
    const tagName = element.tagName.toLowerCase();
    const tabIndex = element.getAttribute('tabindex');
    switch (tagName) {
        case 'button':
        case 'input':
        case 'select':
        case 'textarea':
        case 'details':
            return true;
        default:
            return tabIndex ? Number(tabIndex) >= 0 : false;
    }
};
/**
 * Convenience hook for creating components with tooltips. It will return an object of properties to mix
 * into a target, popper and tooltip
 */
export function useTooltip({ type = 'label', titleText = '', showDelay = 300, hideDelay = 100, } = {}) {
    const mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
    const popupModel = usePopupModel();
    const [anchorElement, setAnchorElement] = React.useState(null);
    const id = useUniqueId();
    const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
    const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
    const onHide = () => {
        intentTimerHide.start();
        intentTimerShow.clear();
    };
    const onOpen = () => {
        intentTimerShow.start();
        intentTimerHide.clear();
    };
    const onOpenFromTarget = (event) => {
        setAnchorElement(event.currentTarget);
        onOpen();
    };
    const onFocus = (event) => {
        if (!mouseDownRef.current) {
            onOpenFromTarget(event);
        }
        mouseDownRef.current = false;
    };
    const onMouseDown = (event) => {
        mouseDownRef.current = true;
        if (isInteractiveElement(event.currentTarget)) {
            popupModel.events.hide();
        }
    };
    useCloseOnEscape(popupModel);
    useAlwaysCloseOnOutsideClick(popupModel);
    useCloseOnFullscreenExit(popupModel);
    useCloseOnTargetHidden(popupModel);
    const visible = popupModel.state.visibility !== 'hidden';
    const targetProps = {
        // extra description of the target element for assistive technology
        'aria-describedby': type === 'describe' && visible ? id : undefined,
        'aria-description': type === 'description' ? titleText : undefined,
        // This will replace the accessible name of the target element
        'aria-label': type === 'label' ? titleText : undefined,
        onMouseEnter: onOpenFromTarget,
        onMouseLeave: onHide,
        onMouseDown,
        onFocus,
        onBlur: onHide,
    };
    // remove `aria-describedby` if undefined to not override what's provided
    if (targetProps['aria-describedby'] === undefined) {
        delete targetProps['aria-describedby'];
    }
    return {
        /** Mix these properties into the target element. **Must be an Element** */
        targetProps,
        /** Mix these properties into the `Popper` component */
        popperProps: {
            open: visible,
            anchorElement,
            ref: popupModel.state.stackRef,
        },
        /** Mix these properties into the `TooltipContainer` component */
        tooltipProps: {
            id: type === 'describe' && visible ? id : undefined,
            role: 'tooltip',
            onMouseEnter: onOpen,
            onMouseLeave: onHide,
        },
    };
}