@wordpress/components 25.16.0 → 26.0.0

package/src/search-control/styles.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { space } from '../utils/space';
+import InputControl from '../input-control';
+import { COLORS } from '../utils';
+import type { SearchControlProps } from './types';
+
+const inlinePadding = ( {
+	size,
+}: Required< Pick< SearchControlProps, 'size' > > ) => {
+	return space( size === 'compact' ? 1 : 2 );
+};
+
+export const SuffixItemWrapper = styled.div`
+	display: flex;
+	padding-inline-end: ${ inlinePadding };
+
+	svg {
+		fill: currentColor;
+	}
+`;
+
+export const StyledInputControl = styled( InputControl )`
+	input[type='search'] {
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	&:not( :focus-within ) {
+		--wp-components-color-background: ${ COLORS.theme.gray[ 100 ] };
+	}
+`;

package/src/search-control/test/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { click, type } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SearchControl from '..';
+
+function ControlledSearchControl( {
+	onChange,
+	...restProps
+}: React.ComponentProps< typeof SearchControl > ) {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<SearchControl
+			{ ...restProps }
+			value={ value }
+			onChange={ ( ...args ) => {
+				setValue( ...args );
+				onChange( ...args );
+			} }
+		/>
+	);
+}
+
+describe( 'SearchControl', () => {
+	describe.each( [
+		// TODO: Uncontrolled mode is not supported yet.
+		// [ 'Uncontrolled', SearchControl ],
+		[ 'Controlled mode', ControlledSearchControl ],
+	] )( '%s', ( ...modeAndComponent ) => {
+		const [ , Component ] = modeAndComponent;
+
+		it( 'should call onChange with input value when value is changed', async () => {
+			const onChangeSpy = jest.fn();
+			render( <Component onChange={ onChangeSpy } /> );
+
+			const searchInput = screen.getByRole( 'searchbox' );
+			await type( 'test', searchInput );
+			expect( searchInput ).toHaveValue( 'test' );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( 'test' );
+		} );
+
+		it( 'should render a Reset search button if no onClose function is provided', async () => {
+			const onChangeSpy = jest.fn();
+			render( <Component onChange={ onChangeSpy } /> );
+
+			const searchInput = screen.getByRole( 'searchbox' );
+
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset search' } )
+			).not.toBeInTheDocument();
+
+			await type( 'test', searchInput );
+			const resetButton = screen.getByRole( 'button', {
+				name: 'Reset search',
+			} );
+			expect( resetButton ).toBeVisible();
+
+			await click( resetButton );
+			expect( searchInput ).toHaveValue( '' );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( '' );
+		} );
+
+		it( 'should should render a Close button (instead of Reset) when onClose function is provided', async () => {
+			const onChangeSpy = jest.fn();
+			const onCloseSpy = jest.fn();
+			render(
+				<Component onChange={ onChangeSpy } onClose={ onCloseSpy } />
+			);
+
+			expect(
+				screen.queryByRole( 'button', { name: 'Close search' } )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset search' } )
+			).not.toBeInTheDocument();
+
+			const searchInput = screen.getByRole( 'searchbox' );
+			await type( 'test', searchInput );
+
+			expect(
+				screen.queryByRole( 'button', { name: 'Close search' } )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset search' } )
+			).not.toBeInTheDocument();
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 'test'.length );
+
+			await click(
+				screen.getByRole( 'button', { name: 'Close search' } )
+			);
+			expect( onCloseSpy ).toHaveBeenCalledTimes( 1 );
+			expect( searchInput ).toHaveValue( 'test' ); // no change
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 'test'.length ); // no change
+		} );
+	} );
+} );

package/src/search-control/types.ts

@@ -1,23 +1,35 @@
-/**
- * External dependencies
- */
-import type { HTMLAttributes } from 'react';
-
 /**
  * Internal dependencies
  */
-import type { BaseControlProps } from '../base-control/types';
+import type { InputControlProps } from '../input-control/types';
 
-export type SearchControlProps = Pick<
-	BaseControlProps,
-	'__nextHasNoMarginBottom' | 'help' | 'label'
-> & {
+export type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & {
+	/**
+	 * @deprecated This is now the default.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: InputControlProps[ '__next40pxDefaultSize' ];
+	/**
+	 * Start opting into the new margin-free styles that will become the default in a future version.
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
 	/**
 	 * If true, the label will only be visible to screen readers.
 	 *
 	 * @default true
 	 */
-	hideLabelFromVision?: boolean;
+	hideLabelFromVision?: InputControlProps[ 'hideLabelFromVision' ];
+	/**
+	 * The accessible label for the input.
+	 *
+	 * A label should always be provided as an accessibility best practice,
+	 * even when a placeholder is defined and `hideLabelFromVision` is `true`.
+	 *
+	 * @default 'Search'
+	 */
+	label?: string;
 	/**
 	 * A function that receives the value of the input when the value is changed.
 	 */
@@ -30,26 +42,29 @@ export type SearchControlProps = Pick<
 	 * rather than just clearing the input value.
 	 */
 	onClose?: () => void;
+	/** @ignore */
+	onDrag?: InputControlProps[ 'onDrag' ];
+	/** @ignore */
+	onDragStart?: InputControlProps[ 'onDragStart' ];
+	/** @ignore */
+	onDragEnd?: InputControlProps[ 'onDragEnd' ];
 	/**
 	 * A placeholder for the input.
 	 *
 	 * @default 'Search'
 	 */
-	placeholder?: HTMLAttributes< HTMLInputElement >[ 'placeholder' ];
-	/**
-	 * The current value of the input.
-	 */
-	value?: string;
+	placeholder?: InputControlProps[ 'placeholder' ];
 	/**
 	 * The size of the component
 	 *
 	 * @default 'default'
 	 */
 	size?: 'default' | 'compact';
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
+};
+
+export type SuffixItemProps = Pick<
+	SearchControlProps,
+	'value' | 'onChange' | 'onClose'
+> & {
+	searchRef: React.RefObject< HTMLInputElement >;
 };

package/src/select-control/index.tsx

@@ -54,11 +54,7 @@ function UnforwardedSelectControl(
 		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp(
-		props,
-		'wp.components.SelectControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp( props );
 	const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;

package/src/snackbar/index.tsx

@@ -8,7 +8,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { speak } from '@wordpress/a11y';
-import { useEffect, forwardRef, renderToString } from '@wordpress/element';
+import {
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	forwardRef,
+	renderToString,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import warning from '@wordpress/warning';
 
@@ -88,17 +94,24 @@ function UnforwardedSnackbar(
 
 	useSpokenMessage( spokenMessage, politeness );
 
-	// Only set up the timeout dismiss if we're not explicitly dismissing.
+	// The `onDismiss/onRemove` can have unstable references,
+	// trigger side-effect cleanup, and reset timers.
+	const callbackRefs = useRef( { onDismiss, onRemove } );
+	useLayoutEffect( () => {
+		callbackRefs.current = { onDismiss, onRemove };
+	} );
+
 	useEffect( () => {
+		// Only set up the timeout dismiss if we're not explicitly dismissing.
 		const timeoutHandle = setTimeout( () => {
 			if ( ! explicitDismiss ) {
-				onDismiss?.();
-				onRemove?.();
+				callbackRefs.current.onDismiss?.();
+				callbackRefs.current.onRemove?.();
 			}
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ onDismiss, onRemove, explicitDismiss ] );
+	}, [ explicitDismiss ] );
 
 	const classes = classnames( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
@@ -106,7 +119,7 @@ function UnforwardedSnackbar(
 	if ( actions && actions.length > 1 ) {
 		// We need to inform developers that snackbar only accepts 1 action.
 		warning(
-			'Snackbar can only have 1 action, use Notice if your message require many messages'
+			'Snackbar can only have one action. Use Notice if your message requires many actions.'
 		);
 		// return first element only while keeping it inside an array
 		actions = [ actions[ 0 ] ];

package/src/style.scss

@@ -44,7 +44,6 @@
 @import "./responsive-wrapper/style.scss";
 @import "./sandbox/style.scss";
 @import "./scroll-lock/style.scss";
-@import "./search-control/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
 @import "./tab-panel/style.scss";

package/src/tabs/index.tsx

@@ -8,7 +8,12 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
+import {
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,8 +49,8 @@ function Tabs( {
 
 	const isControlled = selectedTabId !== undefined;
 
-	const { items, selectedId } = store.useState();
-	const { setSelectedId, move } = store;
+	const { items, selectedId, activeId } = store.useState();
+	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
@@ -146,34 +151,33 @@ function Tabs( {
 		if ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {
 			setSelectedId( null );
 		}
-	}, [
-		isControlled,
-		selectedId,
-		selectedTab,
-		selectedTabId,
-		setSelectedId,
-	] );
+	}, [ isControlled, selectedTab, selectedTabId, setSelectedId ] );
 
-	// In controlled mode, make sure browser focus follows the selected tab if
-	// the selection is changed while a tab is already being focused.
-	useLayoutEffect( () => {
-		if ( ! isControlled || ! selectOnMove ) {
+	useEffect( () => {
+		if ( ! isControlled ) {
 			return;
 		}
-		const currentItem = items.find( ( item ) => item.id === selectedId );
-		const activeElement = currentItem?.element?.ownerDocument.activeElement;
-		const tabsHasFocus = items.some( ( item ) => {
-			return activeElement && activeElement === item.element;
-		} );
 
-		if (
-			activeElement &&
-			tabsHasFocus &&
-			selectedId !== activeElement.id
-		) {
-			move( selectedId );
-		}
-	}, [ isControlled, items, move, selectOnMove, selectedId ] );
+		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, isControlled, items, setActiveId ] );
 
 	const contextValue = useMemo(
 		() => ( {

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

@@ -30,6 +30,7 @@ const meta: Meta< typeof Tabs > = {
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
+		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/tabs/tablist.tsx

@@ -28,11 +28,30 @@ export const TabList = forwardRef<
 		return null;
 	}
 	const { store } = context;
+
+	const { selectedId, activeId, selectOnMove } = store.useState();
+	const { setActiveId } = store;
+
+	const onBlur = () => {
+		if ( ! selectOnMove ) {
+			return;
+		}
+
+		// When automatic tab selection is on, make sure that the active tab is up
+		// to date with the selected tab when leaving the tablist. This makes sure
+		// that the selected tab will receive keyboard focus when tabbing back into
+		// the tablist.
+		if ( selectedId !== activeId ) {
+			setActiveId( selectedId );
+		}
+	};
+
 	return (
 		<Ariakit.TabList
 			ref={ ref }
 			store={ store }
 			render={ <TabListWrapper /> }
+			onBlur={ onBlur }
 			{ ...otherProps }
 		>
 			{ children }

package/src/tabs/test/index.tsx

@@ -1172,6 +1172,111 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 		} );
+		describe( 'When `selectedId` is changed by the controlling component', () => {
+			describe.each( [ true, false ] )(
+				'and `selectOnMove` is %s',
+				( selectOnMove ) => {
+					it( 'should continue to handle arrow key navigation properly', async () => {
+						const { rerender } = render(
+							<ControlledTabs
+								tabs={ TABS }
+								selectedTabId="beta"
+								selectOnMove={ selectOnMove }
+							/>
+						);
+
+						// Tab key should focus the currently selected tab, which is Beta.
+						await press.Tab();
+						expect( await getSelectedTab() ).toHaveTextContent(
+							'Beta'
+						);
+						expect( await getSelectedTab() ).toHaveFocus();
+
+						rerender(
+							<ControlledTabs
+								tabs={ TABS }
+								selectedTabId="gamma"
+								selectOnMove={ selectOnMove }
+							/>
+						);
+
+						// When the selected tab is changed, it should not automatically receive focus.
+						expect( await getSelectedTab() ).toHaveTextContent(
+							'Gamma'
+						);
+						expect(
+							screen.getByRole( 'tab', { name: 'Beta' } )
+						).toHaveFocus();
+
+						// Arrow keys should move focus to the next tab, which is Gamma
+						await press.ArrowRight();
+						expect(
+							screen.getByRole( 'tab', { name: 'Gamma' } )
+						).toHaveFocus();
+					} );
+
+					it( 'should focus the correct tab when tabbing out and back into the tablist', async () => {
+						const { rerender } = render(
+							<>
+								<button>Focus me</button>
+								<ControlledTabs
+									tabs={ TABS }
+									selectedTabId="beta"
+									selectOnMove={ selectOnMove }
+								/>
+							</>
+						);
+
+						// Tab key should focus the currently selected tab, which is Beta.
+						await press.Tab();
+						await press.Tab();
+						expect( await getSelectedTab() ).toHaveTextContent(
+							'Beta'
+						);
+						expect( await getSelectedTab() ).toHaveFocus();
+
+						rerender(
+							<>
+								<button>Focus me</button>
+								<ControlledTabs
+									tabs={ TABS }
+									selectedTabId="gamma"
+									selectOnMove={ selectOnMove }
+								/>
+							</>
+						);
+
+						// When the selected tab is changed, it should not automatically receive focus.
+						expect( await getSelectedTab() ).toHaveTextContent(
+							'Gamma'
+						);
+						expect(
+							screen.getByRole( 'tab', { name: 'Beta' } )
+						).toHaveFocus();
+
+						// Press shift+tab, move focus to the button before Tabs
+						await press.ShiftTab();
+						expect(
+							screen.getByRole( 'button', { name: 'Focus me' } )
+						).toHaveFocus();
+
+						// Press tab, move focus back to the tablist
+						await press.Tab();
+
+						const betaTab = screen.getByRole( 'tab', {
+							name: 'Beta',
+						} );
+						const gammaTab = screen.getByRole( 'tab', {
+							name: 'Gamma',
+						} );
+
+						expect(
+							selectOnMove ? gammaTab : betaTab
+						).toHaveFocus();
+					} );
+				}
+			);
+		} );
 
 		describe( 'When `selectOnMove` is `true`', () => {
 			it( 'should automatically select a newly focused tab', async () => {
@@ -1188,24 +1293,6 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 				expect( await getSelectedTab() ).toHaveFocus();
 			} );
-			it( 'should automatically update focus when the selected tab is changed by the controlling component', async () => {
-				const { rerender } = render(
-					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
-				);
-
-				// Tab key should focus the currently selected tab, which is Beta.
-				await press.Tab();
-				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
-				expect( await getSelectedTab() ).toHaveFocus();
-
-				rerender(
-					<ControlledTabs tabs={ TABS } selectedTabId="gamma" />
-				);
-
-				// When the selected tab is changed, it should automatically receive focus.
-				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
-				expect( await getSelectedTab() ).toHaveFocus();
-			} );
 		} );
 		describe( 'When `selectOnMove` is `false`', () => {
 			it( 'should apply focus without automatically changing the selected tab', async () => {
@@ -1247,37 +1334,6 @@ describe( 'Tabs', () => {
 				await press.Enter();
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			} );
-			it( 'should not automatically update focus when the selected tab is changed by the controlling component', async () => {
-				const { rerender } = render(
-					<ControlledTabs
-						tabs={ TABS }
-						selectedTabId="beta"
-						selectOnMove={ false }
-					/>
-				);
-
-				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
-
-				// Tab key should focus the currently selected tab, which is Beta.
-				await press.Tab();
-				await waitFor( async () =>
-					expect( await getSelectedTab() ).toHaveFocus()
-				);
-
-				rerender(
-					<ControlledTabs
-						tabs={ TABS }
-						selectedTabId="gamma"
-						selectOnMove={ false }
-					/>
-				);
-
-				// When the selected tab is changed, it should not automatically receive focus.
-				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
-				expect(
-					screen.getByRole( 'tab', { name: 'Beta' } )
-				).toHaveFocus();
-			} );
 		} );
 	} );
 	it( 'should associate each `Tab` with the correct `TabPanel`, even if they are not rendered in the same order', async () => {

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

@@ -19,6 +19,7 @@ const meta: Meta< typeof Theme > = {
 		background: { control: { type: 'color' } },
 	},
 	parameters: {
+		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

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

@@ -39,7 +39,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -53,7 +53,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
@@ -366,7 +366,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -380,7 +380,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
@@ -586,7 +586,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -600,7 +600,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
@@ -907,7 +907,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -921,7 +921,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {