@wordpress/components 28.10.0 → 28.11.0

package/src/tabs/index.tsx

@@ -2,18 +2,13 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import {
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -24,191 +19,119 @@ import { Tab } from './tab';
 import { TabList } from './tablist';
 import { TabPanel } from './tabpanel';
 
-function Tabs( {
-	selectOnMove = true,
-	defaultTabId,
-	orientation = 'horizontal',
-	onSelect,
-	children,
-	selectedTabId,
-}: TabsProps ) {
-	const instanceId = useInstanceId( Tabs, 'tabs' );
-	const store = Ariakit.useTabStore( {
-		selectOnMove,
-		orientation,
-		defaultSelectedId: defaultTabId && `${ instanceId }-${ defaultTabId }`,
-		setSelectedId: ( selectedId ) => {
-			const strippedDownId =
-				typeof selectedId === 'string'
-					? selectedId.replace( `${ instanceId }-`, '' )
-					: selectedId;
-			onSelect?.( strippedDownId );
-		},
-		selectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,
-	} );
-
-	const isControlled = selectedTabId !== undefined;
-
-	const { items, selectedId, activeId } = useStoreState( store );
-	const { setSelectedId, setActiveId } = store;
-
-	// Keep track of whether tabs have been populated. This is used to prevent
-	// certain effects from firing too early while tab data and relevant
-	// variables are undefined during the initial render.
-	const tabsHavePopulatedRef = useRef( false );
-	if ( items.length > 0 ) {
-		tabsHavePopulatedRef.current = true;
-	}
-
-	const selectedTab = items.find( ( item ) => item.id === selectedId );
-	const firstEnabledTab = items.find( ( item ) => {
-		// Ariakit internally refers to disabled tabs as `dimmed`.
-		return ! item.dimmed;
-	} );
-	const initialTab = items.find(
-		( item ) => item.id === `${ instanceId }-${ defaultTabId }`
-	);
-
-	// Handle selecting the initial tab.
-	useLayoutEffect( () => {
-		if ( isControlled ) {
-			return;
-		}
-
-		// Wait for the denoted initial tab to be declared before making a
-		// selection. This ensures that if a tab is declared lazily it can
-		// still receive initial selection, as well as ensuring no tab is
-		// selected if an invalid `defaultTabId` is provided.
-		if ( defaultTabId && ! initialTab ) {
-			return;
-		}
+function externalToInternalTabId(
+	externalId: string | undefined | null,
+	instanceId: string
+) {
+	return externalId && `${ instanceId }-${ externalId }`;
+}
 
-		// If the currently selected tab is missing (i.e. removed from the DOM),
-		// fall back to the initial tab or the first enabled tab if there is
-		// one. Otherwise, no tab should be selected.
-		if ( ! items.find( ( item ) => item.id === selectedId ) ) {
-			if ( initialTab && ! initialTab.dimmed ) {
-				setSelectedId( initialTab?.id );
-				return;
-			}
+function internalToExternalTabId(
+	internalId: string | undefined | null,
+	instanceId: string
+) {
+	return typeof internalId === 'string'
+		? internalId.replace( `${ instanceId }-`, '' )
+		: internalId;
+}
 
-			if ( firstEnabledTab ) {
-				setSelectedId( firstEnabledTab.id );
-			} else if ( tabsHavePopulatedRef.current ) {
-				setSelectedId( null );
-			}
-		}
-	}, [
-		firstEnabledTab,
-		initialTab,
+/**
+ * Display one panel of content at a time with a tabbed interface, based on the
+ * WAI-ARIA Tabs Pattern⁠.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * ```
+ */
+export const Tabs = Object.assign(
+	function Tabs( {
+		selectOnMove = true,
 		defaultTabId,
-		isControlled,
-		items,
-		selectedId,
-		setSelectedId,
-	] );
-
-	// Handle the currently selected tab becoming disabled.
-	useLayoutEffect( () => {
-		if ( ! selectedTab?.dimmed ) {
-			return;
-		}
-
-		// In controlled mode, we trust that disabling tabs is done
-		// intentionally, and don't select a new tab automatically.
-		if ( isControlled ) {
-			setSelectedId( null );
-			return;
-		}
-
-		// If the currently selected tab becomes disabled, fall back to the
-		// `defaultTabId` if possible. Otherwise select the first
-		// enabled tab (if there is one).
-		if ( initialTab && ! initialTab.dimmed ) {
-			setSelectedId( initialTab.id );
-			return;
-		}
-
-		if ( firstEnabledTab ) {
-			setSelectedId( firstEnabledTab.id );
-		}
-	}, [
-		firstEnabledTab,
-		initialTab,
-		isControlled,
-		selectedTab?.dimmed,
-		setSelectedId,
-	] );
-
-	// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
-	useLayoutEffect( () => {
-		if ( ! isControlled ) {
-			return;
-		}
-
-		// Once the tabs have populated, if the `selectedTabId` still can't be
-		// found, clear the selection.
-		if (
-			tabsHavePopulatedRef.current &&
-			!! selectedTabId &&
-			! selectedTab
-		) {
-			setSelectedId( null );
-		}
-	}, [ isControlled, selectedTab, selectedTabId, setSelectedId ] );
-
-	useEffect( () => {
-		// If there is no active tab, fallback to place focus on the first enabled tab
-		// so there is always an active element
-		if ( selectedTabId === null && ! activeId && firstEnabledTab?.id ) {
-			setActiveId( firstEnabledTab.id );
-		}
-	}, [ selectedTabId, activeId, firstEnabledTab?.id, setActiveId ] );
-
-	useEffect( () => {
-		if ( ! isControlled ) {
-			return;
-		}
-
-		requestAnimationFrame( () => {
-			const focusedElement =
-				items?.[ 0 ]?.element?.ownerDocument.activeElement;
-
-			if (
-				! focusedElement ||
-				! items.some( ( item ) => focusedElement === item.element )
-			) {
-				return; // Return early if no tabs are focused.
-			}
-
-			// If, after ariakit re-computes the active tab, that tab doesn't match
-			// the currently focused tab, then we force an update to ariakit to avoid
-			// any mismatches, especially when navigating to previous/next tab with
-			// arrow keys.
-			if ( activeId !== focusedElement.id ) {
-				setActiveId( focusedElement.id );
-			}
+		orientation = 'horizontal',
+		onSelect,
+		children,
+		selectedTabId,
+		activeTabId,
+		defaultActiveTabId,
+		onActiveTabIdChange,
+	}: TabsProps ) {
+		const instanceId = useInstanceId( Tabs, 'tabs' );
+		const store = Ariakit.useTabStore( {
+			selectOnMove,
+			orientation,
+			defaultSelectedId: externalToInternalTabId(
+				defaultTabId,
+				instanceId
+			),
+			setSelectedId: ( newSelectedId ) => {
+				onSelect?.(
+					internalToExternalTabId( newSelectedId, instanceId )
+				);
+			},
+			selectedId: externalToInternalTabId( selectedTabId, instanceId ),
+			defaultActiveId: externalToInternalTabId(
+				defaultActiveTabId,
+				instanceId
+			),
+			setActiveId: ( newActiveId ) => {
+				onActiveTabIdChange?.(
+					internalToExternalTabId( newActiveId, instanceId )
+				);
+			},
+			activeId: externalToInternalTabId( activeTabId, instanceId ),
+			rtl: isRTL(),
 		} );
-	}, [ activeId, isControlled, items, setActiveId ] );
 
-	const contextValue = useMemo(
-		() => ( {
-			store,
-			instanceId,
+		const { items, activeId } = Ariakit.useStoreState( store );
+		const { setActiveId } = store;
+
+		useEffect( () => {
+			requestAnimationFrame( () => {
+				const focusedElement =
+					items?.[ 0 ]?.element?.ownerDocument.activeElement;
+
+				if (
+					! focusedElement ||
+					! items.some( ( item ) => focusedElement === item.element )
+				) {
+					return; // Return early if no tabs are focused.
+				}
+
+				// If, after ariakit re-computes the active tab, that tab doesn't match
+				// the currently focused tab, then we force an update to ariakit to avoid
+				// any mismatches, especially when navigating to previous/next tab with
+				// arrow keys.
+				if ( activeId !== focusedElement.id ) {
+					setActiveId( focusedElement.id );
+				}
+			} );
+		}, [ activeId, items, setActiveId ] );
+
+		const contextValue = useMemo(
+			() => ( {
+				store,
+				instanceId,
+			} ),
+			[ store, instanceId ]
+		);
+
+		return (
+			<TabsContext.Provider value={ contextValue }>
+				{ children }
+			</TabsContext.Provider>
+		);
+	},
+	{
+		Tab: Object.assign( Tab, {
+			displayName: 'Tabs.Tab',
 		} ),
-		[ store, instanceId ]
-	);
-
-	return (
-		<TabsContext.Provider value={ contextValue }>
-			{ children }
-		</TabsContext.Provider>
-	);
-}
-
-Tabs.TabList = TabList;
-Tabs.Tab = Tab;
-Tabs.TabPanel = TabPanel;
-Tabs.Context = TabsContext;
-
-export default Tabs;
+		TabList: Object.assign( TabList, {
+			displayName: 'Tabs.TabList',
+		} ),
+		TabPanel: Object.assign( TabPanel, {
+			displayName: 'Tabs.TabPanel',
+		} ),
+		Context: Object.assign( TabsContext, {
+			displayName: 'Tabs.Context',
+		} ),
+	}
+);

package/src/tabs/stories/index.story.tsx

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Tabs from '..';
+import { Tabs } from '..';
 import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
 import DropdownMenu from '../../dropdown-menu';
 import Button from '../../button';
@@ -20,7 +20,8 @@ import Tooltip from '../../tooltip';
 import Icon from '../../icon';
 
 const meta: Meta< typeof Tabs > = {
-	title: 'Components (Experimental)/Tabs',
+	title: 'Components/Containers/Tabs',
+	id: 'components-tabs',
 	component: Tabs,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -29,6 +30,8 @@ const meta: Meta< typeof Tabs > = {
 		'Tabs.Tab': Tabs.Tab,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Tabs.TabPanel': Tabs.TabPanel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Tabs.Context': Tabs.Context,
 	},
 	tags: [ 'status-private' ],
 	parameters: {

package/src/tabs/styles.ts

@@ -11,7 +11,7 @@ import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import Icon from '../icon';
 
-export const TabListWrapper = styled.div`
+export const StyledTabList = styled( Ariakit.TabList )`
 	display: flex;
 	align-items: stretch;
 	overflow-x: auto;
@@ -195,7 +195,7 @@ export const Tab = styled( Ariakit.Tab )`
 			opacity: 0;
 
 			@media not ( prefers-reduced-motion ) {
-				transition: opacity 0.15s 0.15s linear;
+				transition: opacity 0.1s linear;
 			}
 		}
 
@@ -207,7 +207,6 @@ export const Tab = styled( Ariakit.Tab )`
 	[aria-orientation='horizontal'] & {
 		padding-inline: ${ space( 4 ) };
 		height: ${ space( 12 ) };
-		text-align: center;
 		scroll-margin: 24px;
 
 		&::after {
@@ -219,7 +218,6 @@ export const Tab = styled( Ariakit.Tab )`
 	[aria-orientation='vertical'] & {
 		padding: ${ space( 2 ) } ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
-		text-align: start;
 
 		&[aria-selected='true'] {
 			color: ${ COLORS.theme.accent };
@@ -234,6 +232,16 @@ export const Tab = styled( Ariakit.Tab )`
 
 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 )`
@@ -253,7 +261,7 @@ export const TabChevron = styled( Icon )`
 		[data-select-on-move='true']
 			[role='tab']:is( [aria-selected='true'],  )
 			& {
-			transition: opacity 0.3s ease-in;
+			transition: opacity 0.15s 0.15s linear;
 		}
 	}
 	&:dir( rtl ) {

package/src/tabs/tab.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
 /**
  * WordPress dependencies
  */
@@ -22,13 +27,27 @@ 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 }
@@ -36,6 +55,7 @@ export const Tab = forwardRef<
 			id={ instancedTabId }
 			disabled={ disabled }
 			render={ render }
+			tabbable={ tabbable }
 			{ ...otherProps }
 		>
 			<StyledTabChildren>{ children }</StyledTabChildren>

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,11 +15,10 @@ 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 { useTrackOverflow } from './use-track-overflow';
 import { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';
@@ -63,15 +62,25 @@ 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 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 selectedRect = useTrackElementOffsetRect(
-		store?.item( selectedId )?.element
-	);
+
+	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, {
@@ -84,6 +93,7 @@ export const TabList = forwardRef<
 		prefix: 'selected',
 		dataAttribute: 'indicator-animated',
 		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
 	} );
 
 	// Make sure selected tab is scrolled into view.
@@ -109,12 +119,18 @@ export const TabList = forwardRef<
 	}
 
 	return (
-		<Ariakit.TabList
+		<StyledTabList
 			ref={ refs }
 			store={ store }
-			render={ <TabListWrapper /> }
+			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 }
 			className={ clsx(
@@ -124,6 +140,6 @@ export const TabList = forwardRef<
 			) }
 		>
 			{ children }
-		</Ariakit.TabList>
+		</StyledTabList>
 	);
 } );