lassName="pf-v5-screen-reader">{variantLabel} {title} ); const titleRef = React.useRef(null); const TitleComponent = component as any; const divRef = React.useRef(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); React.useEffect(() => { if (!titleRef.current || !truncateTitle) { return; } titleRef.current.style.setProperty(maxLines.name, truncateTitle.toString()); const showTooltip = titleRef.current && titleRef.current.offsetHeight < titleRef.current.scrollHeight; if (isTooltipVisible !== showTooltip) { setIsTooltipVisible(showTooltip); } }, [titleRef, truncateTitle, isTooltipVisible]); const [timedOut, setTimedOut] = useState(false); const [timedOutAnimation, setTimedOutAnimation] = useState(true); const [isMouseOver, setIsMouseOver] = useState(); const [containsFocus, setContainsFocus] = useState(); const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus; React.useEffect(() => { const calculatedTimeout = timeout === true ? 8000 : Number(timeout); if (calculatedTimeout > 0) { const timer = setTimeout(() => setTimedOut(true), calculatedTimeout); return () => clearTimeout(timer); } }, [timeout]); React.useEffect(() => { const onDocumentFocus = () => { if (divRef.current) { if (divRef.current.contains(document.activeElement)) { setContainsFocus(true); setTimedOutAnimation(false); } else if (containsFocus) { setContainsFocus(false); } } }; document.addEventListener('focus', onDocumentFocus, true); return () => document.removeEventListener('focus', onDocumentFocus, true); }, [containsFocus]); React.useEffect(() => { if (containsFocus === false || isMouseOver === false) { const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation); return () => clearTimeout(timer); } }, [containsFocus, isMouseOver, timeoutAnimation]); React.useEffect(() => { dismissed && onTimeout(); }, [dismissed, onTimeout]); const [isExpanded, setIsExpanded] = useState(false); const onToggleExpand = () => { setIsExpanded(!isExpanded); }; const myOnMouseEnter = (ev: React.MouseEvent) => { setIsMouseOver(true); setTimedOutAnimation(false); onMouseEnter(ev); }; const myOnMouseLeave = (ev: React.MouseEvent) => { setIsMouseOver(false); onMouseLeave(ev); }; if (dismissed) { return null; } const Title = ( {getHeadingContent} ); return (
{isExpandable && (
)} {isTooltipVisible ? ( {Title} ) : ( Title )} {actionClose && (
{actionClose}
)} {children && (!isExpandable || (isExpandable && isExpanded)) && (
{children}
)} {actionLinks &&
{actionLinks}
}
); }; Alert.displayName = 'Alert';