@coveord/plasma-mantine/dist/esm/components/ellipsis-text/EllipsisText.js

A Plasma flavoured Mantine theme

import { jsx as _jsx } from "react/jsx-runtime";
import { Box, polymorphicFactory, Text, Tooltip, useProps, useStyles } from '@mantine/core';
import { useRef, useState } from 'react';
import clsx from 'clsx';
import classes from './EllipsisText.module.css';
const defaultProps = {
    tooltipProps: {}
};
export const EllipsisText = polymorphicFactory((props, ref)=>{
    const { className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others } = useProps('EllipsisText', defaultProps, props);
    const getStyles = useStyles({
        name: 'EllipsisText',
        classes,
        props,
        className,
        style,
        classNames,
        styles,
        unstyled
    });
    const [showTooltip, setShowTooltip] = useState(false);
    const textRef = useRef();
    const { className: rootClass, ...rootStyles } = getStyles('root');
    const { className: textClass, ...textStyles } = getStyles('text');
    return /*#__PURE__*/ _jsx(Box, {
        ref: ref,
        onMouseEnter: ()=>{
            if (textRef.current && isOverflowing(textRef.current)) {
                setShowTooltip(true);
            }
        },
        onMouseLeave: ()=>setShowTooltip(false),
        className: clsx(rootClass, {
            [classes.noWrap]: !lineClamp
        }),
        ...rootStyles,
        ...others,
        children: /*#__PURE__*/ _jsx(Tooltip, {
            label: children,
            opened: showTooltip,
            ...tooltipProps,
            ...getStyles('tooltip'),
            children: /*#__PURE__*/ _jsx(Text, {
                span: true,
                inherit: true,
                variant: variant,
                ref: textRef,
                className: clsx(textClass, {
                    [classes.ellipsis]: !lineClamp
                }),
                ...!!lineClamp && {
                    lineClamp: lineClamp
                },
                ...textStyles,
                children: children
            })
        })
    });
});
const isOverflowing = (h)=>h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;

//# sourceMappingURL=EllipsisText.js.map