@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

package/src/query-controls/index.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useCallback, memo } from '@wordpress/element';
 
 /**
@@ -23,12 +23,12 @@ const options = [
 		value: 'date/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in ascending order */
+		/* translators: Label for ordering posts by title in ascending order. */
 		label: __( 'A → Z' ),
 		value: 'title/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in descending order */
+		/* translators: Label for ordering posts by title in descending order. */
 		label: __( 'Z → A' ),
 		value: 'title/desc',
 	},
@@ -76,7 +76,7 @@ const QueryControls = memo(
 					<CategorySelect
 						categoriesList={ categoriesList }
 						label={ __( 'Category' ) }
-						noOptionLabel={ __( 'All' ) }
+						noOptionLabel={ _x( 'All', 'categories' ) }
 						selectedCategoryId={ selectedCategoryId }
 						onChange={ onCategoryChange }
 						hideCancelButton={ true }

package/src/query-controls/index.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -96,12 +96,12 @@ export function QueryControls( {
 								value: 'date/asc',
 							},
 							{
-								/* translators: label for ordering posts by title in ascending order */
+								/* translators: Label for ordering posts by title in ascending order. */
 								label: __( 'A → Z' ),
 								value: 'title/asc',
 							},
 							{
-								/* translators: label for ordering posts by title in descending order */
+								/* translators: Label for ordering posts by title in descending order. */
 								label: __( 'Z → A' ),
 								value: 'title/desc',
 							},
@@ -137,7 +137,7 @@ export function QueryControls( {
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
-							noOptionLabel={ __( 'All' ) }
+							noOptionLabel={ _x( 'All', 'categories' ) }
 							selectedCategoryId={ props.selectedCategoryId }
 							onChange={ props.onCategoryChange }
 						/>
@@ -174,7 +174,7 @@ export function QueryControls( {
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
-						noOptionLabel={ __( 'All' ) }
+						noOptionLabel={ _x( 'All', 'authors' ) }
 						selectedAuthorId={ selectedAuthorId }
 						onChange={ onAuthorChange }
 					/>

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts

@@ -30,12 +30,12 @@ export const TooltipWrapper = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
+	background: ${ COLORS.theme.foreground };
 	border-radius: 2px;
 	box-sizing: border-box;
 	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: 12px;
-	color: ${ COLORS.ui.textDark };
+	color: ${ COLORS.theme.foregroundInverted };
 	padding: 4px 8px;
 	position: relative;
 `;
@@ -45,7 +45,7 @@ export const Tooltip = styled.div`
 
 export const LabelText = styled( Text )`
 	&&& {
-		color: ${ COLORS.ui.textDark };
+		color: ${ COLORS.theme.foregroundInverted };
 		display: block;
 		font-size: 13px;
 		line-height: 1.4;

package/src/search-control/README.md

@@ -20,6 +20,7 @@ function MySearchControl( { className, setState } ) {
 
     return (
         <SearchControl
+            __nextHasNoMarginBottom
             label={ __( 'Search posts' ) }
             value={ searchInput }
             onChange={ setSearchInput }
@@ -35,13 +36,14 @@ Props not included in this set will be applied to the input element.
 
 #### label
 
-If this property is added, a label will be generated using label property as the content.
+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`.
 
 -   Type: `String`
--   Required: Yes
+-   Required: No
+-   Default: `__( 'Search' )`
 
 #### placeholder
 
@@ -72,6 +74,15 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### onClose
+
+When an `onClose` callback is provided, the search control will render a close button that will trigger the given callback.
+
+Use this if you want the button to trigger your own logic to close the search field entirely, rather than just clearing the input value.
+
+-   Type: `function`
+-   Required: No
+
 #### help
 
 If this property is added, a help text will be generated using help property as the content.
@@ -79,12 +90,21 @@ If this property is added, a help text will be generated using help property as
 -   Type: `String|Element`
 -   Required: No
 
-### hideLabelFromVision
+#### hideLabelFromVision
 
 If true, the label will not be visible, but will be read by screen readers. Defaults to `true`.
 
 -   Type: `Boolean`
 -   Required: No
+-   Default: `true`
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
 
 #### `size`: `'default'` | `'compact'`
 

package/src/search-control/index.tsx

@@ -9,100 +9,117 @@ import classnames from 'classnames';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
-import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context/wordpress-component';
-import type { SearchControlProps } from './types';
+import type { SearchControlProps, SuffixItemProps } from './types';
 import type { ForwardedRef } from 'react';
+import { ContextSystemProvider } from '../context';
+import { StyledInputControl, SuffixItemWrapper } from './styles';
+
+function SuffixItem( {
+	searchRef,
+	value,
+	onChange,
+	onClose,
+}: SuffixItemProps ) {
+	if ( ! onClose && ! value ) {
+		return <Icon icon={ search } />;
+	}
+
+	const onReset = () => {
+		onChange( '' );
+		searchRef.current?.focus();
+	};
+
+	return (
+		<Button
+			size="small"
+			icon={ closeSmall }
+			label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }
+			onClick={ onClose ?? onReset }
+		/>
+	);
+}
 
 function UnforwardedSearchControl(
 	{
-		__nextHasNoMarginBottom,
-		__next40pxDefaultSize = false,
+		__nextHasNoMarginBottom = false,
 		className,
 		onChange,
-		onKeyDown,
 		value,
-		label,
+		label = __( 'Search' ),
 		placeholder = __( 'Search' ),
 		hideLabelFromVision = true,
-		help,
 		onClose,
 		size = 'default',
 		...restProps
-	}: WordPressComponentProps< SearchControlProps, 'input', false >,
+	}: Omit<
+		WordPressComponentProps< SearchControlProps, 'input', false >,
+		// TODO: Background styling currently doesn't support a disabled state. Needs design work.
+		'disabled'
+	>,
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
-	const searchRef = useRef< HTMLInputElement >();
-	const instanceId = useInstanceId( SearchControl );
-	const id = `components-search-control-${ instanceId }`;
-
-	const renderRightButton = () => {
-		if ( onClose ) {
-			return (
-				<Button
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					icon={ closeSmall }
-					label={ __( 'Close search' ) }
-					onClick={ onClose }
-					size={ size }
-				/>
-			);
-		}
+	// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
+	// Work with the design team (@WordPress/gutenberg-design) if you need this feature.
+	delete restProps.disabled;
 
-		if ( !! value ) {
-			return (
-				<Button
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					icon={ closeSmall }
-					label={ __( 'Reset search' ) }
-					onClick={ () => {
-						onChange( '' );
-						searchRef.current?.focus();
-					} }
-					size={ size }
-				/>
-			);
-		}
+	const searchRef = useRef< HTMLInputElement >( null );
+	const instanceId = useInstanceId(
+		SearchControl,
+		'components-search-control'
+	);
 
-		return <Icon icon={ search } />;
-	};
+	const contextValue = useMemo(
+		() => ( {
+			// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
+			// to provide backwards compatibile margin for SearchControl.
+			// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
+			BaseControl: { _overrides: { __nextHasNoMarginBottom } },
+			// `isBorderless` is still experimental and not a public prop for InputControl yet.
+			InputBase: { isBorderless: true },
+		} ),
+		[ __nextHasNoMarginBottom ]
+	);
 
 	return (
-		<BaseControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			label={ label }
-			id={ id }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			className={ classnames( className, 'components-search-control', {
-				'is-next-40px-default-size': __next40pxDefaultSize,
-				'is-size-compact': size === 'compact',
-			} ) }
-		>
-			<div className="components-search-control__input-wrapper">
-				<input
-					{ ...restProps }
-					ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
-					className="components-search-control__input"
-					id={ id }
-					type="search"
-					placeholder={ placeholder }
-					onChange={ ( event ) => onChange( event.target.value ) }
-					onKeyDown={ onKeyDown }
-					autoComplete="off"
-					value={ value || '' }
-				/>
-				<div className="components-search-control__icon">
-					{ renderRightButton() }
-				</div>
-			</div>
-		</BaseControl>
+		<ContextSystemProvider value={ contextValue }>
+			<StyledInputControl
+				__next40pxDefaultSize
+				id={ instanceId }
+				hideLabelFromVision={ hideLabelFromVision }
+				label={ label }
+				ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
+				type="search"
+				size={ size }
+				className={ classnames(
+					'components-search-control',
+					className
+				) }
+				onChange={ ( nextValue?: string ) =>
+					onChange( nextValue ?? '' )
+				}
+				autoComplete="off"
+				placeholder={ placeholder }
+				value={ value ?? '' }
+				suffix={
+					<SuffixItemWrapper size={ size }>
+						<SuffixItem
+							searchRef={ searchRef }
+							value={ value }
+							onChange={ onChange }
+							onClose={ onClose }
+						/>
+					</SuffixItemWrapper>
+				}
+				{ ...restProps }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
@@ -118,6 +135,7 @@ function UnforwardedSearchControl(
  *
  *   return (
  *     <SearchControl
+ *       __nextHasNoMarginBottom
  *       value={ searchInput }
  *       onChange={ setSearchInput }
  *     />

package/src/search-control/stories/index.story.tsx

@@ -18,6 +18,7 @@ const meta: Meta< typeof SearchControl > = {
 	component: SearchControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -46,7 +47,6 @@ const Template: StoryFn< typeof SearchControl > = ( {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	label: 'Label Text',
 	help: 'Help text to explain the input.',
 };
 

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/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -19,6 +19,6 @@ export default function useSlotFills( name: SlotKey ) {
 	const fills = useSnapshot( registry.fills, { sync: true } );
 	// The important bit here is that this call ensures that the hook
 	// only causes a re-render if the "fills" of a given slot name
-	// change change, not any fills.
+	// change, not any fills.
 	return fills.get( name );
 }