@wordpress/components 23.1.0 → 23.3.0

package/src/tab-panel/index.tsx

@@ -19,17 +19,16 @@ import type { WordPressComponentProps } from '../ui/context';
 
 const TabButton = ( {
 	tabId,
-	onClick,
 	children,
 	selected,
 	...rest
 }: TabButtonProps ) => (
 	<Button
 		role="tab"
-		tabIndex={ selected ? null : -1 }
+		tabIndex={ selected ? undefined : -1 }
 		aria-selected={ selected }
 		id={ tabId }
-		onClick={ onClick }
+		__experimentalIsFocusable
 		{ ...rest }
 	>
 		{ children }
@@ -104,11 +103,47 @@ export function TabPanel( {
 	const selectedTab = tabs.find( ( { name } ) => name === selected );
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
+	// Handle selecting the initial tab.
 	useEffect( () => {
-		if ( ! selectedTab?.name && tabs.length > 0 ) {
-			handleTabSelection( initialTabName || tabs[ 0 ].name );
+		// If there's a selected tab, don't override it.
+		if ( selectedTab ) {
+			return;
 		}
-	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
+
+		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 );
+		} else {
+			// Fallback to the first enabled tab when the initial is disabled.
+			const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
+			if ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );
+		}
+	}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );
+
+	// Handle the currently selected tab becoming disabled.
+	useEffect( () => {
+		// This effect only runs when the selected tab is defined and becomes disabled.
+		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 );
+		}
+	}, [ tabs, selectedTab?.disabled, handleTabSelection ] );
 
 	return (
 		<div className={ className }>
@@ -134,6 +169,7 @@ export function TabPanel( {
 						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 }

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

@@ -35,3 +35,23 @@ Default.args = {
 		},
 	],
 };
+
+export const DisabledTab = Template.bind( {} );
+DisabledTab.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			disabled: true,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+		},
+	],
+};

package/src/tab-panel/style.scss

@@ -24,6 +24,7 @@
 	&:focus:not(:disabled) {
 		position: relative;
 		box-shadow: none;
+		outline: none;
 	}
 
 	// Tab indicator
@@ -48,6 +49,10 @@
 	// Active.
 	&.is-active::after {
 		height: calc(1 * var(--wp-admin-border-width-focus));
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
 	}
 
 	// Focus.
@@ -71,5 +76,8 @@
 
 	&:focus-visible::before {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 }

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

@@ -9,12 +9,7 @@ import userEvent from '@testing-library/user-event';
  */
 import TabPanel from '..';
 
-jest.useFakeTimers();
-
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 const TABS = [
 	{
@@ -147,7 +142,7 @@ describe( 'TabPanel', () => {
 		);
 	} );
 
-	it( 'should select `initialTabname` if defined', () => {
+	it( 'should select `initialTabName` if defined', () => {
 		const mockOnSelect = jest.fn();
 
 		render(
@@ -162,6 +157,128 @@ describe( 'TabPanel', () => {
 		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 	} );
 
+	it( 'waits for the tab with the `initialTabName` to become present in the `tabs` array before selecting it', () => {
+		const mockOnSelect = jest.fn();
+
+		const { rerender } = render(
+			<TabPanel
+				tabs={ TABS }
+				initialTabName="delta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		// There should be no selected tab.
+		expect(
+			screen.queryByRole( 'tab', { selected: true } )
+		).not.toBeInTheDocument();
+
+		rerender(
+			<TabPanel
+				tabs={ [
+					{ name: 'delta', title: 'Delta', className: 'delta-class' },
+					...TABS,
+				] }
+				initialTabName="delta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Delta' );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'delta' );
+	} );
+
+	it( 'should disable the tab when `disabled` is true', async () => {
+		const user = setupUser();
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					...TABS,
+					{
+						name: 'delta',
+						title: 'Delta',
+						className: 'delta-class',
+						disabled: true,
+					},
+				] }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+
+		// onSelect gets called on the initial render.
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+		// onSelect should not be called since the disabled tab is highlighted, but not selected.
+		await user.keyboard( '[ArrowLeft]' );
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should select the first enabled tab when the inital tab is disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					{
+						name: 'alpha',
+						title: 'Alpha',
+						className: 'alpha-class',
+						disabled: true,
+					},
+					{
+						name: 'beta',
+						title: 'Beta',
+						className: 'beta-class',
+					},
+				] }
+				initialTabName="alpha"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
+	it( 'should select the first enabled tab when the currently selected becomes disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		const { rerender } = render(
+			<TabPanel
+				tabs={ TABS }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
+
+		rerender(
+			<TabPanel
+				tabs={ TABS.map( ( tab ) => {
+					if ( tab.name === 'alpha' ) {
+						return { ...tab, disabled: true };
+					}
+					return tab;
+				} ) }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
 	describe( 'fallbacks when new tab list invalidates current selection', () => {
 		it( 'should select `initialTabName` if defined', async () => {
 			const user = setupUser();

package/src/tab-panel/types.ts

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
 import type { IconType } from '../icon';
 
-type Tab = {
+type Tab< IconProps = unknown > = {
 	/**
 	 * The key of the tab.
 	 */
@@ -21,18 +21,24 @@ type Tab = {
 	 * The class name to apply to the tab button.
 	 */
 	className?: string;
+	/**
+	 * The icon used for the tab button.
+	 */
+	icon?: IconType< IconProps >;
+	/**
+	 * Determines if the tab button should be disabled.
+	 */
+	disabled?: boolean;
 } & Record< any, any >;
 
 export type TabButtonProps< IconProps = unknown > = {
 	children: ReactNode;
-	className?: string;
-	icon?: IconType< IconProps >;
 	label?: string;
 	onClick: ( event: MouseEvent ) => void;
 	selected: boolean;
 	showTooltip?: boolean;
 	tabId: string;
-};
+} & Pick< Tab< IconProps >, 'className' | 'icon' | 'disabled' >;
 
 export type TabPanelProps = {
 	/**

package/src/theme/test/index.tsx

@@ -26,7 +26,7 @@ const MyThemableComponent = ( props: MyThemableComponentProps ) => {
 
 describe( 'Theme', () => {
 	describe( 'accent color', () => {
-		it( 'it does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
+		it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
 			render(
 				<Theme data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -49,7 +49,7 @@ describe( 'Theme', () => {
 			} );
 		} );
 
-		it( 'it defines the accent color (and its variations) as a CSS variable', () => {
+		it( 'defines the accent color (and its variations) as a CSS variable', () => {
 			render(
 				<Theme accent="#123abc" data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -66,7 +66,7 @@ describe( 'Theme', () => {
 	} );
 
 	describe( 'background color', () => {
-		it( 'it does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
+		it( 'does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
 			render(
 				<Theme data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -91,7 +91,7 @@ describe( 'Theme', () => {
 			} );
 		} );
 
-		it( 'it defines the background color (and its dependent colors) as a CSS variable', () => {
+		it( 'defines the background color (and its dependent colors) as a CSS variable', () => {
 			render(
 				<Theme background="#ffffff" data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>

package/src/toggle-group-control/stories/index.tsx

@@ -48,6 +48,7 @@ const Template: ComponentStory< typeof ToggleGroupControl > = ( {
 
 	return (
 		<ToggleGroupControl
+			__nextHasNoMarginBottom
 			{ ...props }
 			onChange={ ( ...changeArgs ) => {
 				setValue( ...changeArgs );

package/src/toggle-group-control/test/index.tsx

@@ -18,8 +18,6 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 
-jest.useFakeTimers();
-
 function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
@@ -81,9 +79,7 @@ describe( 'ToggleGroupControl', () => {
 		} );
 	} );
 	it( 'should call onChange with proper value', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const mockOnChange = jest.fn();
 
 		render(
@@ -102,9 +98,7 @@ describe( 'ToggleGroupControl', () => {
 	} );
 
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -131,9 +125,7 @@ describe( 'ToggleGroupControl', () => {
 	} );
 
 	it( 'should not render tooltip', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -157,9 +149,7 @@ describe( 'ToggleGroupControl', () => {
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl
@@ -180,9 +170,7 @@ describe( 'ToggleGroupControl', () => {
 			} );
 
 			it( 'should not tab to next radio option', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl value="rigas" label="Test">
@@ -205,9 +193,7 @@ describe( 'ToggleGroupControl', () => {
 		describe( 'isDeselectable = true', () => {
 			it( 'should be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl
@@ -237,9 +223,7 @@ describe( 'ToggleGroupControl', () => {
 			} );
 
 			it( 'should tab to the next option button', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl

package/src/toolbar/index.js

@@ -1,52 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import ToolbarGroup from '../toolbar-group';
-import ToolbarContainer from './toolbar-container';
-
-/**
- * Renders a toolbar.
- *
- * To add controls, simply pass `ToolbarButton` components as children.
- *
- * @param {Object} props             Component props.
- * @param {string} [props.className] Class to set on the container div.
- * @param {string} [props.label]     ARIA label for toolbar container.
- * @param {Object} ref               React Element ref.
- */
-function Toolbar( { className, label, ...props }, ref ) {
-	if ( ! label ) {
-		deprecated( 'Using Toolbar without label prop', {
-			since: '5.6',
-			alternative: 'ToolbarGroup component',
-			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
-		} );
-		return <ToolbarGroup { ...props } className={ className } />;
-	}
-	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
-		'components-accessible-toolbar',
-		className
-	);
-	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
-	);
-}
-
-export default forwardRef( Toolbar );
+export { default as Toolbar } from './toolbar';
+export { default as ToolbarButton } from './toolbar-button';
+export { default as ToolbarContext } from './toolbar-context';
+export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export { default as ToolbarGroup } from './toolbar-group';
+export { default as ToolbarItem } from './toolbar-item';

package/src/toolbar/stories/index.js

@@ -12,22 +12,42 @@ import {
 	link,
 	more,
 	paragraph,
+	arrowUp,
+	arrowDown,
+	arrowLeft,
+	arrowRight,
+	chevronDown,
 } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import Toolbar from '../';
 import {
-	SVG,
-	Path,
+	Toolbar,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
-	DropdownMenu,
-} from '../../';
+	ToolbarDropdownMenu,
+} from '..';
+import { SVG, Path, DropdownMenu } from '../../';
 
-export default { title: 'Components/Toolbar', component: Toolbar };
+export default {
+	title: 'Components/Toolbar',
+	component: Toolbar,
+	subcomponents: {
+		ToolbarButton,
+		ToolbarGroup,
+		ToolbarItem,
+		ToolbarDropdownMenu,
+	},
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
 
 function InlineImageIcon() {
 	return (
@@ -37,13 +57,20 @@ function InlineImageIcon() {
 	);
 }
 
-/* eslint-disable no-restricted-syntax */
-export const _default = () => {
-	return (
-		// id is required for server side rendering
-		<Toolbar label="Options" id="options-toolbar">
+const Template = ( props ) => (
+	<div style={ { height: 280 } }>
+		<Toolbar { ...props } />
+	</div>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Options',
+	id: 'options-toolbar',
+	children: (
+		<>
 			<ToolbarGroup>
-				<ToolbarButton icon={ paragraph } label="Paragraph" />
+				<ToolbarButton icon={ paragraph } text="Paragraph" />
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarItem>
@@ -105,72 +132,41 @@ export const _default = () => {
 					{ icon: alignRight, title: 'Align right' },
 				] }
 			/>
-		</Toolbar>
-	);
+			<ToolbarDropdownMenu
+				icon={ chevronDown }
+				label="Select a direction"
+				controls={ [
+					{
+						title: 'Up',
+						icon: arrowUp,
+					},
+					{
+						title: 'Right',
+						icon: arrowRight,
+					},
+					{
+						title: 'Down',
+						icon: arrowDown,
+					},
+					{
+						title: 'Left',
+						icon: arrowLeft,
+					},
+				] }
+			/>
+		</>
+	),
 };
 
-export const withoutGroup = () => {
-	return (
-		// id is required for server side rendering
-		<Toolbar label="Options" id="options-toolbar-without-group">
+export const WithoutGroup = Template.bind( {} );
+WithoutGroup.args = {
+	label: 'Options',
+	id: 'options-toolbar-without-group',
+	children: (
+		<>
 			<ToolbarButton icon={ formatBold } label="Bold" isPressed />
 			<ToolbarButton icon={ formatItalic } label="Italic" />
 			<ToolbarButton icon={ link } label="Link" />
-		</Toolbar>
-	);
-};
-/* eslint-enable no-restricted-syntax */
-
-export const toolbars = () => {
-	return (
-		<div>
-			<div style={ { padding: '20px' } }>
-				<h2>Icon-only Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-					<ToolbarButton
-						icon={ formatItalic }
-						title="Italic"
-						isActive
-					/>
-					<ToolbarButton icon={ link } title="Link" />
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Text-only Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton>Bold Format</ToolbarButton>
-					<ToolbarButton isActive>Italic Format</ToolbarButton>
-					<ToolbarButton>Link Format</ToolbarButton>
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Text and Icon Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-					<ToolbarButton isActive>Bold Format</ToolbarButton>
-					<ToolbarButton icon={ formatItalic } title="Italic" />
-					<ToolbarButton>Italic Format</ToolbarButton>
-					<ToolbarButton icon={ link } title="Link" />
-					<ToolbarButton>Link Format</ToolbarButton>
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Single Icon Button Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Single Text Button toolbar</h2>
-				<Toolbar>
-					<ToolbarButton>Bold Toolbar</ToolbarButton>
-				</Toolbar>
-			</div>
-		</div>
-	);
+		</>
+	),
 };