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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { getTransformFromPlacement, Popper, defaultFallbackPlacements, } from '@workday/canvas-kit-react/popup';
import { mergeCallback } from '@workday/canvas-kit-react/common';
import { TooltipContainer } from './TooltipContainer';
import { useTooltip } from './useTooltip';
/**
 * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
 * This could be the passed element, or a descendant. If no element is found, `null` is returned.
 */
export const findOverflowElement = (element) => {
    const style = getComputedStyle(element);
    if (style.overflow === 'auto' ||
        style.overflow === 'scroll' ||
        style.overflow === 'clip' ||
        style.overflow === 'hidden') {
        return element;
    }
    else if (element.children) {
        for (let i = 0; i < element.children.length; i++) {
            const overflowElement = findOverflowElement(element.children[i]);
            if (overflowElement) {
                return overflowElement;
            }
        }
        return null;
    }
    return null;
};
/**
 * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
 * This could be the passed element, or a descendant. If no element is found, `null` is returned.
 */
export const findEllipsisElement = (element) => {
    const style = getComputedStyle(element);
    if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
        return element;
    }
    else {
        for (let i = 0; i < element.children.length; i++) {
            const overflowElement = findEllipsisElement(element.children[i]);
            if (overflowElement) {
                return overflowElement;
            }
        }
        return null;
    }
};
const isOverflowed = (element) => {
    const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
    if (overflowElement) {
        return (overflowElement.scrollWidth > overflowElement.clientWidth ||
            overflowElement.scrollHeight > overflowElement.clientHeight);
    }
    return false;
};
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 OverflowTooltip = ({ placement = 'top', fallbackPlacements = defaultFallbackPlacements, children, ...elemProps }) => {
    const [titleText, setTitleText] = React.useState('');
    const { targetProps, popperProps, tooltipProps } = useTooltip({ type: 'muted' });
    const onMouseEnter = (event) => {
        const target = event.currentTarget;
        setTitleText(target instanceof HTMLElement ? target.innerText : '');
        if (isOverflowed(target)) {
            targetProps.onMouseEnter(event);
        }
    };
    const onFocus = (event) => {
        const target = event.currentTarget;
        setTitleText(target instanceof HTMLElement ? target.innerText : '');
        if (isOverflowed(target)) {
            targetProps.onFocus(event);
        }
    };
    return (React.createElement(React.Fragment, null,
        React.cloneElement(children, {
            ...targetProps,
            onMouseEnter,
            onFocus,
            'aria-label': undefined,
            ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
        }),
        React.createElement(Popper, { placement: placement, fallbackPlacements: fallbackPlacements, ...popperProps }, ({ placement }) => {
            const transformOrigin = getTransformFromPlacement(placement);
            return (React.createElement(TooltipContainer, { transformOrigin: transformOrigin, ...tooltipProps, ...elemProps }, titleText));
        })));
};