fix(suite/components): TruncateWithTooltip button - truncation works …

…as expected
trezor · Feb 6, 2025 · 97aa09a · 97aa09a
1 parent 99b9258
commit 97aa09a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/.../components/src/components/typography/TruncateWithTooltip/TruncateWithTooltip.stories.tsx b/.../components/src/components/typography/TruncateWithTooltip/TruncateWithTooltip.stories.tsx
@@ -9,6 +9,7 @@ import {
 const Container = styled.div`
     overflow: hidden;
     white-space: nowrap;
+    max-width: 200px;
 `;
 
 const meta: Meta = {

diff --git a/packages/components/src/components/typography/TruncateWithTooltip/TruncateWithTooltip.tsx b/packages/components/src/components/typography/TruncateWithTooltip/TruncateWithTooltip.tsx
@@ -21,41 +21,43 @@ export const TruncateWithTooltip = ({
     delayShow,
     cursor = 'inherit',
 }: TruncateWithTooltipProps) => {
-    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const [isEllipsisActive, setEllipsisActive] = useState(false);
 
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const scrollWidth = containerRef.current?.scrollWidth ?? null;
-    const scrollHeight = containerRef.current?.scrollHeight ?? null;
-
     useEffect(() => {
-        if (!containerRef.current || !scrollWidth || !scrollHeight) return;
+        if (!containerRef.current) return;
+
         const resizeObserver = new ResizeObserver(entries => {
+            const scrollWidth = containerRef.current?.scrollWidth ?? null;
+            const scrollHeight = containerRef.current?.scrollHeight ?? null;
             const borderBoxSize = entries[0].borderBoxSize?.[0];
-            if (!borderBoxSize) {
+            if (!borderBoxSize || !scrollWidth || !scrollHeight) {
                 return;
             }
 
             const { inlineSize: elementWidth, blockSize: elementHeight } = borderBoxSize;
 
-            setIsTooltipVisible(
-                scrollWidth > Math.ceil(elementWidth) || scrollHeight > Math.ceil(elementHeight),
-            );
+            const nextEllipsisActive =
+                scrollWidth > Math.ceil(elementWidth) || scrollHeight > Math.ceil(elementHeight);
+
+            setEllipsisActive(nextEllipsisActive);
         });
         resizeObserver.observe(containerRef.current);
 
         return () => resizeObserver.disconnect();
-    }, [children, scrollWidth, scrollHeight]);
+    }, [children]);
 
     return (
         <EllipsisContainer ref={containerRef}>
-            {isTooltipVisible ? (
-                <Tooltip delayShow={delayShow} content={children} cursor={cursor}>
-                    <EllipsisContainer>{children}</EllipsisContainer>
-                </Tooltip>
-            ) : (
-                children
-            )}
+            <Tooltip
+                isActive={Boolean(children) && isEllipsisActive}
+                delayShow={delayShow}
+                content={children ?? null}
+                cursor={cursor}
+            >
+                {isEllipsisActive ? <EllipsisContainer>{children}</EllipsisContainer> : children}
+            </Tooltip>
         </EllipsisContainer>
     );
 };