import { EuiToolTip } from '@elastic/eui' ; import type { FunctionComponent } from 'react' ; import React , { useLayoutEffect , useRef , useState } from 'react' ; export const TextTruncate = ( { children } ) => { const textRef = useRef < HTMLSpanElement > ( null ) ; const [ showTooltip , setShowTooltip ] = useState ( false ) ; useLayoutEffect ( ( ) => { if ( textRef . current ) { const { clientWidth , scrollWidth } = textRef . current ; setShowTooltip ( scrollWidth > clientWidth ) ; } } , [ children ] ) ; const truncated = ( < span ref = { textRef } className = "eui-displayBlock eui-textTruncate" > { children } < /span>); if ( showTooltip ) { return ( < EuiToolTip position = "top" content = { children } anchorClassName = "eui-displayBlock" > { truncated } < /EuiToolTip>); } return truncated ; } ;