fix(Tabs): Add resize observer for dynamic tab selection adjustments (#909)

* fix(Tabs): Add resize observer for dynamic tab selection adjustments

* review: Optimize tab list resize observer for better performance (with RAF)

Author: rfgamaral

scripts/jestSetup.ts

@@ -2,3 +2,15 @@ import { toHaveNoViolations } from 'jest-axe'
 import '@testing-library/jest-dom'
 
 expect.extend(toHaveNoViolations)
+
+/* Stub out ResizeObserver */
+if (!window.ResizeObserver) {
+    class ResizeObserver {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    }
+
+    window.ResizeObserver = ResizeObserver
+    global.ResizeObserver = ResizeObserver
+}

src/tabs/tabs.tsx

@@ -180,16 +180,18 @@ function TabList({
     exceptionallySetClassName,
     ...props
 }: TabListProps): React.ReactElement | null {
+    const tabListRef = React.useRef<HTMLDivElement | null>(null)
+    const tabListPrevWidthRef = React.useRef(0)
+
     const tabContextValue = React.useContext(TabsContext)
 
     const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)
     const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})
-    const tabListRef = React.useRef<HTMLDivElement>(null)
 
     const selectedId = tabContextValue?.tabStore.useState('selectedId')
 
-    React.useLayoutEffect(() => {
-        function updateSelectedTabStyle() {
+    const updateSelectedTabPosition = React.useCallback(
+        function updateSelectedTabPositionCallback() {
             if (!selectedId || !tabListRef.current) {
                 return
             }
@@ -207,16 +209,53 @@ function TabList({
                     width: `${selectedTab.offsetWidth}px`,
                 })
             }
-        }
+        },
+        [selectedId],
+    )
+
+    React.useEffect(
+        function updateSelectedTabPositionOnTabChange() {
+            updateSelectedTabPosition()
+        },
+        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
+        [selectedId, updateSelectedTabPosition],
+    )
+
+    React.useEffect(
+        function observeTabListWidthChange() {
+            let animationFrameId: number | null = null
+
+            const tabListObserver = new ResizeObserver(([entry]) => {
+                const width = entry?.contentRect.width
 
-        updateSelectedTabStyle()
+                if (width && tabListPrevWidthRef.current !== width) {
+                    tabListPrevWidthRef.current = width
 
-        window.addEventListener('resize', updateSelectedTabStyle)
+                    if (animationFrameId !== null) {
+                        cancelAnimationFrame(animationFrameId)
+                    }
 
-        return function cleanupEventListener() {
-            window.removeEventListener('resize', updateSelectedTabStyle)
-        }
-    }, [selectedId])
+                    animationFrameId = requestAnimationFrame(() => {
+                        updateSelectedTabPosition()
+                        animationFrameId = null
+                    })
+                }
+            })
+
+            if (tabListRef.current) {
+                tabListObserver.observe(tabListRef.current)
+            }
+
+            return function cleanupResizeObserver() {
+                if (animationFrameId) {
+                    cancelAnimationFrame(animationFrameId)
+                }
+
+                tabListObserver.disconnect()
+            }
+        },
+        [updateSelectedTabPosition],
+    )
 
     if (!tabContextValue) {
         return null