@wordpress/components 25.4.0 → 25.5.0

package/src/progress-bar/index.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as ProgressBarStyled from './styles';
+import type { ProgressBarProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+function UnforwardedProgressBar(
+	props: WordPressComponentProps< ProgressBarProps, 'progress', false >,
+	ref: ForwardedRef< HTMLProgressElement >
+) {
+	const { className, value, ...progressProps } = props;
+	const isIndeterminate = ! Number.isFinite( value );
+
+	return (
+		<ProgressBarStyled.Track className={ className }>
+			<ProgressBarStyled.Indicator
+				isIndeterminate={ isIndeterminate }
+				value={ value }
+			/>
+			<ProgressBarStyled.ProgressElement
+				max={ 100 }
+				value={ value }
+				aria-label={ __( 'Loading …' ) }
+				ref={ ref }
+				{ ...progressProps }
+			/>
+		</ProgressBarStyled.Track>
+	);
+}
+
+export const ProgressBar = forwardRef( UnforwardedProgressBar );
+
+export default ProgressBar;

package/src/progress-bar/stories/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from '..';
+
+const meta: ComponentMeta< typeof ProgressBar > = {
+	component: ProgressBar,
+	title: 'Components (Experimental)/ProgressBar',
+	argTypes: {
+		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ProgressBar > = ( { ...args } ) => {
+	return <ProgressBar { ...args } />;
+};
+
+export const Default: ComponentStory< typeof ProgressBar > = Template.bind(
+	{}
+);
+Default.args = {};

package/src/progress-bar/styles.ts

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+
+const animateProgressBar = keyframes( {
+	'0%': {
+		left: '-50%',
+	},
+	'100%': {
+		left: '100%',
+	},
+} );
+
+// Width of the indicator for the indeterminate progress bar
+export const INDETERMINATE_TRACK_WIDTH = 50;
+
+export const Track = styled.div`
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	max-width: 160px;
+	height: ${ CONFIG.borderWidthFocus };
+	background-color: var(
+		--wp-components-color-gray-100,
+		${ COLORS.gray[ 100 ] }
+	);
+	border-radius: ${ CONFIG.radiusBlockUi };
+`;
+
+export const Indicator = styled.div< {
+	isIndeterminate: boolean;
+	value?: number;
+} >`
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	height: 100%;
+	border-radius: ${ CONFIG.radiusBlockUi };
+	background-color: ${ COLORS.ui.theme };
+
+	${ ( { isIndeterminate, value } ) =>
+		isIndeterminate
+			? css( {
+					animationDuration: '1.5s',
+					animationTimingFunction: 'ease-in-out',
+					animationIterationCount: 'infinite',
+					animationName: animateProgressBar,
+					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
+			  } )
+			: css( { width: `${ value }%` } ) };
+`;
+
+export const ProgressElement = styled.progress`
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+`;

package/src/progress-bar/test/index.tsx

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from '..';
+import { INDETERMINATE_TRACK_WIDTH } from '../styles';
+
+describe( 'ProgressBar', () => {
+	it( 'should render an indeterminate semantic progress bar element', () => {
+		render( <ProgressBar /> );
+
+		const progressBar = screen.getByRole( 'progressbar' );
+
+		expect( progressBar ).toBeInTheDocument();
+		expect( progressBar ).not.toBeVisible();
+		expect( progressBar ).not.toHaveValue();
+	} );
+
+	it( 'should render a determinate semantic progress bar element', () => {
+		render( <ProgressBar value={ 55 } /> );
+
+		const progressBar = screen.getByRole( 'progressbar' );
+
+		expect( progressBar ).toBeInTheDocument();
+		expect( progressBar ).not.toBeVisible();
+		expect( progressBar ).toHaveValue( 55 );
+	} );
+
+	it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', () => {
+		const { container } = render( <ProgressBar /> );
+
+		/**
+		 * We're intentionally not using an accessible selector, because
+		 * the track is an intentionally non-interactive presentation element.
+		 */
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const indicator = container.firstChild?.firstChild;
+
+		expect( indicator ).toHaveStyle( {
+			width: `${ INDETERMINATE_TRACK_WIDTH }%`,
+		} );
+	} );
+
+	it( 'should use `value`% as width for determinate progress bar', () => {
+		const { container } = render( <ProgressBar value={ 55 } /> );
+
+		/**
+		 * We're intentionally not using an accessible selector, because
+		 * the track is an intentionally non-interactive presentation element.
+		 */
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const indicator = container.firstChild?.firstChild;
+
+		expect( indicator ).toHaveStyle( {
+			width: '55%',
+		} );
+	} );
+
+	it( 'should pass any additional props down to the underlying `progress` element', () => {
+		const id = 'foo-bar-123';
+		const ariaLabel = 'in progress...';
+		const style = { opacity: 1 };
+
+		render(
+			<ProgressBar id={ id } aria-label={ ariaLabel } style={ style } />
+		);
+
+		expect( screen.getByRole( 'progressbar' ) ).toHaveAttribute( 'id', id );
+		expect( screen.getByRole( 'progressbar' ) ).toHaveAttribute(
+			'aria-label',
+			ariaLabel
+		);
+		expect( screen.getByRole( 'progressbar' ) ).toHaveStyle( style );
+	} );
+} );

package/src/progress-bar/types.ts

@@ -0,0 +1,11 @@
+export type ProgressBarProps = {
+	/**
+	 * Value of the progress bar.
+	 */
+	value?: number;
+
+	/**
+	 * A CSS class to apply to the progress bar wrapper (track) element.
+	 */
+	className?: string;
+};

package/src/tab-panel/index.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import * as Ariakit from '@ariakit/react';
 import classnames from 'classnames';
 import type { ForwardedRef } from 'react';
 
@@ -9,38 +10,30 @@ import type { ForwardedRef } from 'react';
  */
 import {
 	forwardRef,
-	useState,
 	useEffect,
 	useLayoutEffect,
 	useCallback,
 } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { NavigableMenu } from '../navigable-container';
+
 import Button from '../button';
-import type { TabButtonProps, TabPanelProps } from './types';
+import type { TabPanelProps } from './types';
 import type { WordPressComponentProps } from '../ui/context';
 
-const TabButton = ( {
-	tabId,
-	children,
-	selected,
-	...rest
-}: TabButtonProps ) => (
-	<Button
-		role="tab"
-		tabIndex={ selected ? undefined : -1 }
-		aria-selected={ selected }
-		id={ tabId }
-		__experimentalIsFocusable
-		{ ...rest }
-	>
-		{ children }
-	</Button>
-);
+// Separate the actual tab name from the instance ID. This is
+// necessary because Ariakit internally uses the element ID when
+// a new tab is selected, but our implementation looks specifically
+// for the tab name to be passed to the `onSelect` callback.
+const extractTabName = ( id: string | undefined | null ) => {
+	if ( typeof id === 'undefined' || id === null ) {
+		return;
+	}
+	return id.match( /^tab-panel-[0-9]*-(.*)/ )?.[ 1 ];
+};
 
 /**
  * TabPanel is an ARIA-compliant tabpanel.
@@ -92,26 +85,65 @@ const UnforwardedTabPanel = (
 	ref: ForwardedRef< any >
 ) => {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
-	const [ selected, setSelected ] = useState< string >();
 
-	const handleTabSelection = useCallback(
-		( tabKey: string ) => {
-			setSelected( tabKey );
-			onSelect?.( tabKey );
+	const prependInstanceId = useCallback(
+		( tabName: string | undefined ) => {
+			if ( typeof tabName === 'undefined' ) {
+				return;
+			}
+			return `${ instanceId }-${ tabName }`;
+		},
+		[ instanceId ]
+	);
+
+	const tabStore = Ariakit.useTabStore( {
+		setSelectedId: ( newTabValue ) => {
+			if ( typeof newTabValue === 'undefined' || newTabValue === null ) {
+				return;
+			}
+
+			const newTab = tabs.find(
+				( t ) => prependInstanceId( t.name ) === newTabValue
+			);
+			if ( newTab?.disabled || newTab === selectedTab ) {
+				return;
+			}
+
+			const simplifiedTabName = extractTabName( newTabValue );
+			if ( typeof simplifiedTabName === 'undefined' ) {
+				return;
+			}
+
+			onSelect?.( simplifiedTabName );
+		},
+		orientation,
+		selectOnMove,
+		defaultSelectedId: prependInstanceId( initialTabName ),
+	} );
+
+	const selectedTabName = extractTabName( tabStore.useState( 'selectedId' ) );
+
+	const setTabStoreSelectedId = useCallback(
+		( tabName: string ) => {
+			tabStore.setState( 'selectedId', prependInstanceId( tabName ) );
 		},
-		[ onSelect ]
+		[ prependInstanceId, tabStore ]
 	);
 
-	// Simulate a click on the newly focused tab, which causes the component
-	// to show the `tab-panel` associated with the clicked tab.
-	const activateTabAutomatically = (
-		_childIndex: number,
-		child: HTMLElement
-	) => {
-		child.click();
-	};
-	const selectedTab = tabs.find( ( { name } ) => name === selected );
-	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
+	const selectedTab = tabs.find( ( { name } ) => name === selectedTabName );
+
+	const previousSelectedTabName = usePrevious( selectedTabName );
+
+	// Ensure `onSelect` is called when the initial tab is selected.
+	useEffect( () => {
+		if (
+			previousSelectedTabName !== selectedTabName &&
+			selectedTabName === initialTabName &&
+			!! selectedTabName
+		) {
+			onSelect?.( selectedTabName );
+		}
+	}, [ selectedTabName, initialTabName, onSelect, previousSelectedTabName ] );
 
 	// Handle selecting the initial tab.
 	useLayoutEffect( () => {
@@ -119,25 +151,31 @@ const UnforwardedTabPanel = (
 		if ( selectedTab ) {
 			return;
 		}
-
 		const initialTab = tabs.find( ( tab ) => tab.name === initialTabName );
-
 		// 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.
 		if ( initialTabName && ! initialTab ) {
 			return;
 		}
-
 		if ( initialTab && ! initialTab.disabled ) {
 			// Select the initial tab if it's not disabled.
-			handleTabSelection( initialTab.name );
+			setTabStoreSelectedId( initialTab.name );
 		} else {
-			// Fallback to the first enabled tab when the initial is disabled.
+			// Fallback to the first enabled tab when the initial tab is
+			// disabled or it can't be found.
 			const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
-			if ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );
+			if ( firstEnabledTab ) {
+				setTabStoreSelectedId( firstEnabledTab.name );
+			}
 		}
-	}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );
+	}, [
+		tabs,
+		selectedTab,
+		initialTabName,
+		instanceId,
+		setTabStoreSelectedId,
+	] );
 
 	// Handle the currently selected tab becoming disabled.
 	useEffect( () => {
@@ -145,59 +183,58 @@ const UnforwardedTabPanel = (
 		if ( ! selectedTab?.disabled ) {
 			return;
 		}
-
 		const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
-
 		// If the currently selected tab becomes disabled, select the first enabled tab.
 		// (if there is one).
 		if ( firstEnabledTab ) {
-			handleTabSelection( firstEnabledTab.name );
+			setTabStoreSelectedId( firstEnabledTab.name );
 		}
-	}, [ tabs, selectedTab?.disabled, handleTabSelection ] );
-
+	}, [ tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId ] );
 	return (
 		<div className={ className } ref={ ref }>
-			<NavigableMenu
-				role="tablist"
-				orientation={ orientation }
-				onNavigate={
-					selectOnMove ? activateTabAutomatically : undefined
-				}
+			<Ariakit.TabList
+				store={ tabStore }
 				className="components-tab-panel__tabs"
 			>
-				{ tabs.map( ( tab ) => (
-					<TabButton
-						className={ classnames(
-							'components-tab-panel__tabs-item',
-							tab.className,
-							{
-								[ activeClass ]: tab.name === selected,
+				{ tabs.map( ( tab ) => {
+					return (
+						<Ariakit.Tab
+							key={ tab.name }
+							id={ prependInstanceId( tab.name ) }
+							className={ classnames(
+								'components-tab-panel__tabs-item',
+								tab.className,
+								{
+									[ activeClass ]:
+										tab.name === selectedTabName,
+								}
+							) }
+							disabled={ tab.disabled }
+							aria-controls={ `${ prependInstanceId(
+								tab.name
+							) }-view` }
+							render={
+								<Button
+									icon={ tab.icon }
+									label={ tab.icon && tab.title }
+									showTooltip={ !! tab.icon }
+								/>
 							}
-						) }
-						tabId={ `${ instanceId }-${ tab.name }` }
-						aria-controls={ `${ instanceId }-${ tab.name }-view` }
-						selected={ tab.name === selected }
-						key={ tab.name }
-						onClick={ () => handleTabSelection( tab.name ) }
-						disabled={ tab.disabled }
-						label={ tab.icon && tab.title }
-						icon={ tab.icon }
-						showTooltip={ !! tab.icon }
-					>
-						{ ! tab.icon && tab.title }
-					</TabButton>
-				) ) }
-			</NavigableMenu>
+						>
+							{ ! tab.icon && tab.title }
+						</Ariakit.Tab>
+					);
+				} ) }
+			</Ariakit.TabList>
 			{ selectedTab && (
-				<div
-					key={ selectedId }
-					aria-labelledby={ selectedId }
-					role="tabpanel"
-					id={ `${ selectedId }-view` }
-					className="components-tab-panel__tab-content"
+				<Ariakit.TabPanel
+					id={ `${ prependInstanceId( selectedTab.name ) }-view` }
+					store={ tabStore }
+					tabId={ prependInstanceId( selectedTab.name ) }
+					className={ 'components-tab-panel__tab-content' }
 				>
 					{ children( selectedTab ) }
-				</div>
+				</Ariakit.TabPanel>
 			) }
 		</div>
 	);

package/src/tab-panel/stories/index.tsx

@@ -96,3 +96,9 @@ WithTabIconsAndTooltips.args = {
 		},
 	],
 };
+
+export const ManualActivation = Template.bind( {} );
+ManualActivation.args = {
+	...Default.args,
+	selectOnMove: false,
+};