@wordpress/components 28.8.4 → 28.9.0

package/src/tabs/styles.ts

@@ -16,32 +16,40 @@ export const TabListWrapper = styled.div`
 	align-items: stretch;
 	flex-direction: row;
 	text-align: center;
+	overflow-x: auto;
 
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
 		text-align: start;
 	}
 
-	@media not ( prefers-reduced-motion ) {
-		&.is-animation-enabled::after {
-			transition-property: transform;
-			transition-duration: 0.2s;
-			transition-timing-function: ease-out;
-		}
+	:where( [aria-orientation='horizontal'] ) {
+		width: fit-content;
 	}
+
 	--direction-factor: 1;
-	--direction-origin-x: left;
+	--direction-start: left;
+	--direction-end: right;
 	--indicator-start: var( --indicator-left );
 	&:dir( rtl ) {
 		--direction-factor: -1;
-		--direction-origin-x: right;
+		--direction-start: right;
+		--direction-end: left;
 		--indicator-start: var( --indicator-right );
 	}
-	&::after {
+
+	@media not ( prefers-reduced-motion ) {
+		&.is-animation-enabled::before {
+			transition-property: transform;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+	&::before {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		transform-origin: var( --direction-origin-x ) top;
+		transform-origin: var( --direction-start ) top;
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
@@ -52,7 +60,31 @@ export const TabListWrapper = styled.div`
 			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
 	--antialiasing-factor: 100;
 	&:not( [aria-orientation='vertical'] ) {
-		&::after {
+		--fade-width: 4rem;
+		--fade-gradient-base: transparent 0%, black var( --fade-width );
+		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,
+			transparent 50%;
+		&.is-overflowing-first {
+			mask-image: linear-gradient(
+				to var( --direction-end ),
+				var( --fade-gradient-base )
+			);
+		}
+		&.is-overflowing-last {
+			mask-image: linear-gradient(
+				to var( --direction-start ),
+				var( --fade-gradient-base )
+			);
+		}
+		&.is-overflowing-first.is-overflowing-last {
+			mask-image: linear-gradient(
+					to right,
+					var( --fade-gradient-composed )
+				),
+				linear-gradient( to left, var( --fade-gradient-composed ) );
+		}
+
+		&::before {
 			bottom: 0;
 			height: 0;
 			width: calc( var( --antialiasing-factor ) * 1px );
@@ -71,8 +103,7 @@ export const TabListWrapper = styled.div`
 				${ COLORS.theme.accent };
 		}
 	}
-	&[aria-orientation='vertical']::after {
-		z-index: -1;
+	&[aria-orientation='vertical']::before {
 		top: 0;
 		left: 0;
 		width: 100%;
@@ -87,14 +118,14 @@ export const TabListWrapper = styled.div`
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
+		scroll-margin: 24px;
+		flex-grow: 1;
+		flex-shrink: 0;
 		display: inline-flex;
 		align-items: center;
 		position: relative;
 		border-radius: 0;
-		min-height: ${ space(
-			12
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
-		height: auto;
+		height: ${ space( 12 ) };
 		background: transparent;
 		border: none;
 		box-shadow: none;
@@ -104,7 +135,6 @@ export const Tab = styled( Ariakit.Tab )`
 		margin-left: 0;
 		font-weight: 500;
 		text-align: inherit;
-		hyphens: auto;
 		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
@@ -123,7 +153,7 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		// Focus.
-		&::before {
+		&::after {
 			content: '';
 			position: absolute;
 			top: ${ space( 3 ) };
@@ -146,7 +176,7 @@ export const Tab = styled( Ariakit.Tab )`
 			}
 		}
 
-		&:focus-visible::before {
+		&:focus-visible::after {
 			opacity: 1;
 		}
 	}
@@ -156,6 +186,10 @@ export const Tab = styled( Ariakit.Tab )`
 			10
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
 	}
+
+	[aria-orientation='horizontal'] & {
+		justify-content: center;
+	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`

package/src/tabs/tablist.tsx

@@ -8,7 +8,8 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useLayoutEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,33 +21,58 @@ import type { WordPressComponentProps } from '../context';
 import clsx from 'clsx';
 import { useTrackElementOffsetRect } from '../utils/element-rect';
 import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
+import { useTrackOverflow } from './use-track-overflow';
+
+const SCROLL_MARGIN = 24;
 
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
-	const context = useTabsContext();
+	const { store } = useTabsContext() ?? {};
+
+	const selectedId = useStoreState( store, 'selectedId' );
+	const activeId = useStoreState( store, 'activeId' );
+	const selectOnMove = useStoreState( store, 'selectOnMove' );
+	const items = useStoreState( store, 'items' );
+	const [ parent, setParent ] = useState< HTMLElement | null >();
+	const refs = useMergeRefs( [ ref, setParent ] );
+	const overflow = useTrackOverflow( parent, {
+		first: items?.at( 0 )?.element,
+		last: items?.at( -1 )?.element,
+	} );
 
-	const tabStoreState = useStoreState( context?.store );
-	const selectedId = tabStoreState?.selectedId;
-	const indicatorPosition = useTrackElementOffsetRect(
-		context?.store.item( selectedId )?.element
+	const selectedTabPosition = useTrackElementOffsetRect(
+		store?.item( selectedId )?.element
 	);
 
 	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate(
-		selectedId,
-		( { previousValue } ) => previousValue && setAnimationEnabled( true )
-	);
+	useOnValueUpdate( selectedId, ( { previousValue } ) => {
+		if ( previousValue ) {
+			setAnimationEnabled( true );
+		}
+	} );
 
-	if ( ! context || ! tabStoreState ) {
-		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
-		return null;
-	}
+	// Make sure selected tab is scrolled into view.
+	useLayoutEffect( () => {
+		if ( ! parent || ! selectedTabPosition ) {
+			return;
+		}
+
+		const { scrollLeft: parentScroll } = parent;
+		const parentWidth = parent.getBoundingClientRect().width;
+		const { left: childLeft, width: childWidth } = selectedTabPosition;
 
-	const { store } = context;
-	const { activeId, selectOnMove } = tabStoreState;
-	const { setActiveId } = store;
+		const parentRightEdge = parentScroll + parentWidth;
+		const childRightEdge = childLeft + childWidth;
+		const rightOverflow = childRightEdge + SCROLL_MARGIN - parentRightEdge;
+		const leftOverflow = parentScroll - ( childLeft - SCROLL_MARGIN );
+		if ( leftOverflow > 0 ) {
+			parent.scrollLeft = parentScroll - leftOverflow;
+		} else if ( rightOverflow > 0 ) {
+			parent.scrollLeft = parentScroll + rightOverflow;
+		}
+	}, [ parent, selectedTabPosition ] );
 
 	const onBlur = () => {
 		if ( ! selectOnMove ) {
@@ -58,35 +84,43 @@ export const TabList = forwardRef<
 		// that the selected tab will receive keyboard focus when tabbing back into
 		// the tablist.
 		if ( selectedId !== activeId ) {
-			setActiveId( selectedId );
+			store?.setActiveId( selectedId );
 		}
 	};
 
+	if ( ! store ) {
+		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+
 	return (
 		<Ariakit.TabList
-			ref={ ref }
+			ref={ refs }
 			store={ store }
 			render={
 				<TabListWrapper
 					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::after' ) {
+						if ( event.pseudoElement === '::before' ) {
 							setAnimationEnabled( false );
 						}
 					} }
 				/>
 			}
 			onBlur={ onBlur }
+			tabIndex={ -1 }
 			{ ...otherProps }
 			style={ {
-				'--indicator-top': indicatorPosition.top,
-				'--indicator-right': indicatorPosition.right,
-				'--indicator-left': indicatorPosition.left,
-				'--indicator-width': indicatorPosition.width,
-				'--indicator-height': indicatorPosition.height,
+				'--indicator-top': selectedTabPosition.top,
+				'--indicator-right': selectedTabPosition.right,
+				'--indicator-left': selectedTabPosition.left,
+				'--indicator-width': selectedTabPosition.width,
+				'--indicator-height': selectedTabPosition.height,
 				...otherProps.style,
 			} }
 			className={ clsx(
-				animationEnabled ? 'is-animation-enabled' : '',
+				overflow.first && 'is-overflowing-first',
+				overflow.last && 'is-overflowing-last',
+				animationEnabled && 'is-animation-enabled',
 				otherProps.className
 			) }
 		>

package/src/tabs/use-track-overflow.ts

@@ -0,0 +1,76 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { useEvent } from '@wordpress/compose';
+
+/**
+ * Tracks if an element contains overflow and on which end by tracking the
+ * first and last child elements with an `IntersectionObserver` in relation
+ * to the parent element.
+ *
+ * Note that the returned value will only indicate whether the first or last
+ * element is currently "going out of bounds" but not whether it happens on
+ * the X or Y axis.
+ */
+export function useTrackOverflow(
+	parent: HTMLElement | undefined | null,
+	children: {
+		first: HTMLElement | undefined | null;
+		last: HTMLElement | undefined | null;
+	}
+) {
+	const [ first, setFirst ] = useState( false );
+	const [ last, setLast ] = useState( false );
+	const [ observer, setObserver ] = useState< IntersectionObserver >();
+
+	const callback: IntersectionObserverCallback = useEvent( ( entries ) => {
+		for ( const entry of entries ) {
+			if ( entry.target === children.first ) {
+				setFirst( ! entry.isIntersecting );
+			}
+			if ( entry.target === children.last ) {
+				setLast( ! entry.isIntersecting );
+			}
+		}
+	} );
+
+	useEffect( () => {
+		if ( ! parent || ! window.IntersectionObserver ) {
+			return;
+		}
+		const newObserver = new IntersectionObserver( callback, {
+			root: parent,
+			threshold: 0.9,
+		} );
+		setObserver( newObserver );
+
+		return () => newObserver.disconnect();
+	}, [ callback, parent ] );
+
+	useEffect( () => {
+		if ( ! observer ) {
+			return;
+		}
+
+		if ( children.first ) {
+			observer.observe( children.first );
+		}
+		if ( children.last ) {
+			observer.observe( children.last );
+		}
+
+		return () => {
+			if ( children.first ) {
+				observer.unobserve( children.first );
+			}
+			if ( children.last ) {
+				observer.unobserve( children.last );
+			}
+		};
+	}, [ children.first, children.last, observer ] );
+
+	return { first, last };
+}
+/* eslint-enable jsdoc/require-param */