@wordpress/components 28.9.0 → 28.11.0

package/src/tabs/styles.ts

@@ -9,18 +9,15 @@ import * as Ariakit from '@ariakit/react';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
+import Icon from '../icon';
 
-export const TabListWrapper = styled.div`
-	position: relative;
+export const StyledTabList = styled( Ariakit.TabList )`
 	display: flex;
 	align-items: stretch;
-	flex-direction: row;
-	text-align: center;
 	overflow-x: auto;
 
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
-		text-align: start;
 	}
 
 	:where( [aria-orientation='horizontal'] ) {
@@ -30,21 +27,22 @@ export const TabListWrapper = styled.div`
 	--direction-factor: 1;
 	--direction-start: left;
 	--direction-end: right;
-	--indicator-start: var( --indicator-left );
+	--selected-start: var( --selected-left, 0 );
 	&:dir( rtl ) {
 		--direction-factor: -1;
 		--direction-start: right;
 		--direction-end: left;
-		--indicator-start: var( --indicator-right );
+		--selected-start: var( --selected-right, 0 );
 	}
 
 	@media not ( prefers-reduced-motion ) {
-		&.is-animation-enabled::before {
-			transition-property: transform;
+		&[data-indicator-animated]::before {
+			transition-property: transform, border-radius, border-block;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
 	}
+	position: relative;
 	&::before {
 		content: '';
 		position: absolute;
@@ -59,7 +57,7 @@ export const TabListWrapper = styled.div`
 	/* Using a large value to avoid antialiasing rounding issues
 			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
 	--antialiasing-factor: 100;
-	&:not( [aria-orientation='vertical'] ) {
+	&[aria-orientation='horizontal'] {
 		--fade-width: 4rem;
 		--fade-gradient-base: transparent 0%, black var( --fade-width );
 		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,
@@ -90,51 +88,81 @@ export const TabListWrapper = styled.div`
 			width: calc( var( --antialiasing-factor ) * 1px );
 			transform: translateX(
 					calc(
-						var( --indicator-start ) * var( --direction-factor ) *
+						var( --selected-start ) * var( --direction-factor ) *
 							1px
 					)
 				)
 				scaleX(
 					calc(
-						var( --indicator-width ) / var( --antialiasing-factor )
+						var( --selected-width, 0 ) /
+							var( --antialiasing-factor )
 					)
 				);
 			border-bottom: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
 		}
 	}
-	&[aria-orientation='vertical']::before {
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: calc( var( --antialiasing-factor ) * 1px );
-		transform: translateY( calc( var( --indicator-top ) * 1px ) )
-			scaleY(
-				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
+	&[aria-orientation='vertical'] {
+		&::before {
+			/* Adjusting the border radius to match the scaling in the y axis. */
+			border-radius: ${ CONFIG.radiusSmall } /
+				calc(
+					${ CONFIG.radiusSmall } /
+						(
+							var( --selected-height, 0 ) /
+								var( --antialiasing-factor )
+						)
+				);
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateY( calc( var( --selected-top, 0 ) * 1px ) )
+				scaleY(
+					calc(
+						var( --selected-height, 0 ) /
+							var( --antialiasing-factor )
+					)
+				);
+			background-color: color-mix(
+				in srgb,
+				${ COLORS.theme.accent },
+				transparent 96%
+			);
+		}
+		&[data-select-on-move='true']:has(
+				:is( :focus-visible, [data-focus-visible] )
+			)::before {
+			box-sizing: border-box;
+			border: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+			/* Adjusting the border width to match the scaling in the y axis. */
+			border-block-width: calc(
+				var( --wp-admin-border-width-focus, 1px ) /
+					(
+						var( --selected-height, 0 ) /
+							var( --antialiasing-factor )
+					)
 			);
-		background-color: ${ COLORS.theme.gray[ 100 ] };
+		}
 	}
 `;
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
-		scroll-margin: 24px;
-		flex-grow: 1;
-		flex-shrink: 0;
-		display: inline-flex;
-		align-items: center;
-		position: relative;
+		/* Resets */
 		border-radius: 0;
-		height: ${ space( 12 ) };
 		background: transparent;
 		border: none;
 		box-shadow: none;
+
+		flex: 1 0 auto;
+		white-space: nowrap;
+		display: flex;
+		align-items: center;
 		cursor: pointer;
-		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
-		padding: ${ space( 4 ) };
-		margin-left: 0;
-		font-weight: 500;
-		text-align: inherit;
+		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
+		font-weight: 400;
 		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
@@ -142,24 +170,19 @@ export const Tab = styled( Ariakit.Tab )`
 			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:not( [aria-disabled='true'] ):hover {
+		&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ) {
 			color: ${ COLORS.theme.accent };
 		}
 
 		&:focus:not( :disabled ) {
-			position: relative;
 			box-shadow: none;
 			outline: none;
 		}
 
-		// Focus.
+		// Focus indicator.
+		position: relative;
 		&::after {
-			content: '';
 			position: absolute;
-			top: ${ space( 3 ) };
-			right: ${ space( 3 ) };
-			bottom: ${ space( 3 ) };
-			left: ${ space( 3 ) };
 			pointer-events: none;
 
 			// Draw the indicator.
@@ -176,20 +199,74 @@ export const Tab = styled( Ariakit.Tab )`
 			}
 		}
 
-		&:focus-visible::after {
+		&[data-focus-visible]::after {
 			opacity: 1;
 		}
 	}
 
+	[aria-orientation='horizontal'] & {
+		padding-inline: ${ space( 4 ) };
+		height: ${ space( 12 ) };
+		scroll-margin: 24px;
+
+		&::after {
+			content: '';
+			inset: ${ space( 3 ) };
+		}
+	}
+
 	[aria-orientation='vertical'] & {
-		min-height: ${ space(
-			10
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+		padding: ${ space( 2 ) } ${ space( 3 ) };
+		min-height: ${ space( 10 ) };
+
+		&[aria-selected='true'] {
+			color: ${ COLORS.theme.accent };
+			fill: currentColor;
+		}
 	}
+	[aria-orientation='vertical'][data-select-on-move='false'] &::after {
+		content: '';
+		inset: var( --wp-admin-border-width-focus );
+	}
+`;
+
+export const TabChildren = styled.span`
+	flex-grow: 1;
+
+	display: flex;
+	align-items: center;
 
 	[aria-orientation='horizontal'] & {
 		justify-content: center;
 	}
+	[aria-orientation='vertical'] & {
+		justify-content: start;
+	}
+`;
+
+export const TabChevron = styled( Icon )`
+	flex-shrink: 0;
+	margin-inline-end: ${ space( -1 ) };
+	[aria-orientation='horizontal'] & {
+		display: none;
+	}
+	opacity: 0;
+	[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & {
+		opacity: 1;
+	}
+	// The chevron is transitioned into existence when selectOnMove is enabled,
+	// because otherwise it looks jarring, as it shows up outside of the focus
+	// indicator that's being animated at the same time.
+	@media not ( prefers-reduced-motion ) {
+		[data-select-on-move='true']
+			[role='tab']:is( [aria-selected='true'],  )
+			& {
+			transition: opacity 0.15s 0.15s linear;
+		}
+	}
+	&:dir( rtl ) {
+		rotate: 180deg;
+	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`
@@ -198,7 +275,7 @@ export const TabPanel = styled( Ariakit.TabPanel )`
 		outline: none;
 	}
 
-	&:focus-visible {
+	&[data-focus-visible] {
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			${ COLORS.theme.accent };
 		// Windows high contrast mode.

package/src/tabs/tab.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
 /**
  * WordPress dependencies
  */
@@ -10,20 +15,39 @@ import { forwardRef } from '@wordpress/element';
 import type { TabProps } from './types';
 import warning from '@wordpress/warning';
 import { useTabsContext } from './context';
-import { Tab as StyledTab } from './styles';
+import {
+	Tab as StyledTab,
+	TabChildren as StyledTabChildren,
+	TabChevron as StyledTabChevron,
+} from './styles';
 import type { WordPressComponentProps } from '../context';
+import { chevronRight } from '@wordpress/icons';
 
 export const Tab = forwardRef<
 	HTMLButtonElement,
 	Omit< WordPressComponentProps< TabProps, 'button', false >, 'id' >
 >( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
-	const context = useTabsContext();
-	if ( ! context ) {
+	const { store, instanceId } = useTabsContext() ?? {};
+
+	// If the active item is not connected, the tablist may end up in a state
+	// where none of the tabs are tabbable. In this case, we force all tabs to
+	// be tabbable, so that as soon as an item received focus, it becomes active
+	// and Tablist goes back to working as expected.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const tabbable = Ariakit.useStoreState( store, ( state ) => {
+		return (
+			state?.activeId !== null &&
+			! store?.item( state?.activeId )?.element?.isConnected
+		);
+	} );
+
+	if ( ! store ) {
 		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
-	const { store, instanceId } = context;
+
 	const instancedTabId = `${ instanceId }-${ tabId }`;
+
 	return (
 		<StyledTab
 			ref={ ref }
@@ -31,9 +55,11 @@ export const Tab = forwardRef<
 			id={ instancedTabId }
 			disabled={ disabled }
 			render={ render }
+			tabbable={ tabbable }
 			{ ...otherProps }
 		>
-			{ children }
+			<StyledTabChildren>{ children }</StyledTabChildren>
+			<StyledTabChevron icon={ chevronRight } />
 		</StyledTab>
 	);
 } );

package/src/tabs/tablist.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,15 +15,46 @@ import { useMergeRefs } from '@wordpress/compose';
  * Internal dependencies
  */
 import type { TabListProps } from './types';
-import { useTabsContext } from './context';
-import { TabListWrapper } from './styles';
 import type { WordPressComponentProps } from '../context';
-import clsx from 'clsx';
+import type { ElementOffsetRect } from '../utils/element-rect';
+import { useTabsContext } from './context';
+import { StyledTabList } from './styles';
 import { useTrackElementOffsetRect } from '../utils/element-rect';
-import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
 import { useTrackOverflow } from './use-track-overflow';
+import { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';
+
+const DEFAULT_SCROLL_MARGIN = 24;
+
+/**
+ * Scrolls a given parent element so that a given rect is visible.
+ *
+ * The scroll is updated initially and whenever the rect changes.
+ */
+function useScrollRectIntoView(
+	parent: HTMLElement | undefined,
+	rect: ElementOffsetRect,
+	{ margin = DEFAULT_SCROLL_MARGIN } = {}
+) {
+	useLayoutEffect( () => {
+		if ( ! parent || ! rect ) {
+			return;
+		}
 
-const SCROLL_MARGIN = 24;
+		const { scrollLeft: parentScroll } = parent;
+		const parentWidth = parent.getBoundingClientRect().width;
+		const { left: childLeft, width: childWidth } = rect;
+
+		const parentRightEdge = parentScroll + parentWidth;
+		const childRightEdge = childLeft + childWidth;
+		const rightOverflow = childRightEdge + margin - parentRightEdge;
+		const leftOverflow = parentScroll - ( childLeft - margin );
+		if ( leftOverflow > 0 ) {
+			parent.scrollLeft = parentScroll - leftOverflow;
+		} else if ( rightOverflow > 0 ) {
+			parent.scrollLeft = parentScroll + rightOverflow;
+		}
+	}, [ margin, parent, rect ] );
+}
 
 export const TabList = forwardRef<
 	HTMLDivElement,
@@ -31,48 +62,42 @@ export const TabList = forwardRef<
 >( function TabList( { children, ...otherProps }, ref ) {
 	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 selectedId = Ariakit.useStoreState( store, 'selectedId' );
+	const activeId = Ariakit.useStoreState( store, 'activeId' );
+	const selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );
+	const items = Ariakit.useStoreState( store, 'items' );
+	const [ parent, setParent ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ ref, setParent ] );
+
+	const selectedItem = store?.item( selectedId );
+	const renderedItems = Ariakit.useStoreState( store, 'renderedItems' );
+
+	const selectedItemIndex =
+		renderedItems && selectedItem
+			? renderedItems.indexOf( selectedItem )
+			: -1;
+	// Use selectedItemIndex as a dependency to force recalculation when the
+	// selected item index changes (elements are swapped / added / removed).
+	const selectedRect = useTrackElementOffsetRect( selectedItem?.element, [
+		selectedItemIndex,
+	] );
+
+	// Track overflow to show scroll hints.
 	const overflow = useTrackOverflow( parent, {
 		first: items?.at( 0 )?.element,
 		last: items?.at( -1 )?.element,
 	} );
 
-	const selectedTabPosition = useTrackElementOffsetRect(
-		store?.item( selectedId )?.element
-	);
-
-	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate( selectedId, ( { previousValue } ) => {
-		if ( previousValue ) {
-			setAnimationEnabled( true );
-		}
+	// Size, position, and animate the indicator.
+	useAnimatedOffsetRect( parent, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
 	} );
 
 	// 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 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 ] );
+	useScrollRectIntoView( parent, selectedRect );
 
 	const onBlur = () => {
 		if ( ! selectOnMove ) {
@@ -94,37 +119,27 @@ export const TabList = forwardRef<
 	}
 
 	return (
-		<Ariakit.TabList
+		<StyledTabList
 			ref={ refs }
 			store={ store }
-			render={
-				<TabListWrapper
-					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::before' ) {
-							setAnimationEnabled( false );
-						}
-					} }
+			render={ ( props ) => (
+				<div
+					{ ...props }
+					// Fallback to -1 to prevent browsers from making the tablist
+					// tabbable when it is a scrolling container.
+					tabIndex={ props.tabIndex ?? -1 }
 				/>
-			}
+			) }
 			onBlur={ onBlur }
-			tabIndex={ -1 }
+			data-select-on-move={ selectOnMove ? 'true' : 'false' }
 			{ ...otherProps }
-			style={ {
-				'--indicator-top': selectedTabPosition.top,
-				'--indicator-right': selectedTabPosition.right,
-				'--indicator-left': selectedTabPosition.left,
-				'--indicator-width': selectedTabPosition.width,
-				'--indicator-height': selectedTabPosition.height,
-				...otherProps.style,
-			} }
 			className={ clsx(
 				overflow.first && 'is-overflowing-first',
 				overflow.last && 'is-overflowing-last',
-				animationEnabled && 'is-animation-enabled',
 				otherProps.className
 			) }
 		>
 			{ children }
-		</Ariakit.TabList>
+		</StyledTabList>
 	);
 } );