Improve automatic tab scrolling behavior.

packages/components/src/tabs/stories/index.story.tsx

@@ -122,7 +122,7 @@ export function SizeAndOverflowPlayground() {
 					? 'Remove width: 100% from TabList'
 					: 'Set width: 100% in TabList' }
 			</Button>
-			<Tabs>
+			<Tabs defaultTabId="tab4">
 				<div
 					style={ {
 						width: '20rem',

packages/components/src/tabs/styles.ts

@@ -120,7 +120,6 @@ export const Tab = styled( Ariakit.Tab )`
 	& {
 		flex-grow: 1;
 		flex-shrink: 0;
-		scroll-margin: 2rem;
 		display: inline-flex;
 		align-items: center;
 		position: relative;

packages/components/src/tabs/tablist.tsx

@@ -8,7 +8,7 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -43,15 +43,44 @@ export const TabList = forwardRef<
 	const [ animationEnabled, setAnimationEnabled ] = useState( false );
 	useOnValueUpdate( selectedId, ( { previousValue } ) => {
 		if ( previousValue ) {
-			selectedElement?.scrollIntoView( {
-				behavior: 'instant',
-				block: 'nearest',
-				inline: 'nearest',
-			} );
 			setAnimationEnabled( true );
 		}
 	} );
 
+	// Make sure active tab is scrolled into view.
+	useEffect( () => {
+		if ( ! parent || ! indicatorPosition ) {
+			return;
+		}
+
+		const SCROLL_MARGIN = 24;
+
+		function scrollTo( left: number ) {
+			if ( parent ) {
+				const originalOverflowX = parent.style.overflowX;
+				parent.style.overflowX = 'hidden';
+				parent.scroll( { left } );
+				parent.style.overflowX = originalOverflowX;
+			}
+		}
+
+		const { scrollLeft: parentScroll } = parent;
+		const parentWidth = parent.getBoundingClientRect().width;
+		const { left: childLeft, width: childWidth } = indicatorPosition;
+
+		const parentRightEdge = parentScroll + parentWidth;
+		const childRightEdge = childLeft + childWidth;
+		const rightOverflow = childRightEdge + SCROLL_MARGIN - parentRightEdge;
+		if ( rightOverflow > 0 ) {
+			return scrollTo( parentScroll + rightOverflow );
+		}
+
+		const leftOverflow = parentScroll - ( childLeft - SCROLL_MARGIN );
+		if ( leftOverflow > 0 ) {
+			return scrollTo( parentScroll - leftOverflow );
+		}
+	}, [ indicatorPosition, parent ] );
+
 	const activeId = useStoreState( context?.store, 'activeId' );
 	const selectOnMove = useStoreState( context?.store, 'selectOnMove' );
 

packages/components/src/utils/element-rect.ts

@@ -13,6 +13,10 @@ import { useEvent } from './hooks/use-event';
  * The position and dimensions of an element, relative to its offset parent.
  */
 export type ElementOffsetRect = {
+	/**
+	 * The element the rect belongs to.
+	 */
+	element: HTMLElement | undefined;
 	/**
 	 * The distance from the top edge of the offset parent to the top edge of
 	 * the element.
@@ -47,6 +51,7 @@ export type ElementOffsetRect = {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export const NULL_ELEMENT_OFFSET_RECT = {
+	element: undefined,
 	top: 0,
 	right: 0,
 	bottom: 0,
@@ -97,6 +102,7 @@ export function getElementOffsetRect(
 	const scaleY = computedHeight / rect.height;
 
 	return {
+		element,
 		// To obtain the adjusted values for the position:
 		// 1. Compute the element's position relative to the offset parent.
 		// 2. Correct for the scale factor.
@@ -124,6 +130,9 @@ const POLL_RATE = 100;
  * Tracks the position and dimensions of an element, relative to its offset
  * parent. The element can be changed dynamically.
  *
+ * When no element is provided (`null` or `undefined`), the hook will return
+ * a "null" rect, in which all values are `0` and `element` is `undefined`.
+ *
  * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
  * documentation for more details). When that happens, this hook will attempt
  * to measure again after a frame, and if that fails, it will poll every 100
@@ -160,10 +169,12 @@ export function useTrackElementOffsetRect(
 		}
 	} );
 
-	useLayoutEffect(
-		() => setElement( targetElement ),
-		[ setElement, targetElement ]
-	);
+	useLayoutEffect( () => {
+		setElement( targetElement );
+		if ( ! targetElement ) {
+			setIndicatorPosition( NULL_ELEMENT_OFFSET_RECT );
+		}
+	}, [ setElement, targetElement ] );
 
 	return indicatorPosition;
 }