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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import innerText from 'react-innertext';
import { createComponent, mergeCallback, useLocalRef } from '@workday/canvas-kit-react/common';
import { Popper, defaultFallbackPlacements, getTransformFromPlacement, } from '@workday/canvas-kit-react/popup';
import { handleCsProp } from '@workday/canvas-kit-styling';
import { TooltipContainer } from './TooltipContainer';
import { useTooltip } from './useTooltip';
function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
    return keys.reduce((mergedProps, key) => {
        if (typeof elemProps[key] === 'function') {
            mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
        }
        else {
            mergedProps[key] = componentProps[key];
        }
        return mergedProps;
    }, {});
}
export const Tooltip = createComponent('div')({
    displayName: 'Tooltip',
    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = defaultFallbackPlacements, variant, ...elemProps }) {
        const titleText = innerText(title);
        const { targetProps, popperProps, tooltipProps } = useTooltip({
            type,
            titleText,
            showDelay,
            hideDelay,
        });
        const [elementHasFocus, setElementHasFocus] = React.useState(false);
        const { localRef: targetRef } = useLocalRef();
        React.useEffect(() => {
            const target = targetRef.current;
            if (!target) {
                return;
            }
            const updateFocusState = () => {
                setElementHasFocus(target.matches(':focus-visible') || target.classList.contains('focus'));
            };
            updateFocusState(); // Check initial state
            target.addEventListener('focus', updateFocusState);
            target.addEventListener('blur', updateFocusState);
            return () => {
                target.removeEventListener('focus', updateFocusState);
                target.removeEventListener('blur', updateFocusState);
            };
        }, [targetRef]);
        return (_jsxs(React.Fragment, { children: [React.cloneElement(children, {
                    ...targetProps,
                    ...mergeCallbacks(children.props, targetProps),
                    ...(/^(muted|describe)$/.test(type) && children.props['aria-label']
                        ? { 'aria-label': children.props['aria-label'] }
                        : {}),
                }), _jsx(Popper, { placement: placement, fallbackPlacements: fallbackPlacements, ...popperProps, children: ({ placement }) => {
                        const transformOrigin = getTransformFromPlacement(placement);
                        return (_jsx(TooltipContainer, { transformOrigin: transformOrigin, ...handleCsProp(elemProps), ...tooltipProps, elementHasFocus: elementHasFocus, variant: variant, children: title }));
                    } })] }));
    },
});