@wordpress/components 20.0.0 → 21.0.0

package/src/combobox-control/test/index.js

@@ -0,0 +1,311 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ComboboxControl from '../';
+
+const timezones = [
+	{ label: 'Greenwich Mean Time', value: 'GMT' },
+	{ label: 'Universal Coordinated Time', value: 'UTC' },
+	{ label: 'European Central Time', value: 'ECT' },
+	{ label: '(Arabic) Egypt Standard Time', value: 'ART' },
+	{ label: 'Eastern African Time', value: 'EAT' },
+	{ label: 'Middle East Time', value: 'MET' },
+	{ label: 'Near East Time', value: 'NET' },
+	{ label: 'Pakistan Lahore Time', value: 'PLT' },
+	{ label: 'India Standard Time', value: 'IST' },
+	{ label: 'Bangladesh Standard Time', value: 'BST' },
+	{ label: 'Vietnam Standard Time', value: 'VST' },
+	{ label: 'China Taiwan Time', value: 'CTT' },
+	{ label: 'Japan Standard Time', value: 'JST' },
+	{ label: 'Australia Central Time', value: 'ACT' },
+	{ label: 'Australia Eastern Time', value: 'AET' },
+	{ label: 'Solomon Standard Time', value: 'SST' },
+	{ label: 'New Zealand Standard Time', value: 'NST' },
+	{ label: 'Midway Islands Time', value: 'MIT' },
+	{ label: 'Hawaii Standard Time', value: 'HST' },
+	{ label: 'Alaska Standard Time', value: 'AST' },
+	{ label: 'Pacific Standard Time', value: 'PST' },
+	{ label: 'Phoenix Standard Time', value: 'PNT' },
+	{ label: 'Mountain Standard Time', value: 'MST' },
+	{ label: 'Central Standard Time', value: 'CST' },
+	{ label: 'Eastern Standard Time', value: 'EST' },
+	{ label: 'Indiana Eastern Standard Time', value: 'IET' },
+	{ label: 'Puerto Rico and US Virgin Islands Time', value: 'PRT' },
+	{ label: 'Canada Newfoundland Time', value: 'CNT' },
+	{ label: 'Argentina Standard Time', value: 'AGT' },
+	{ label: 'Brazil Eastern Time', value: 'BET' },
+	{ label: 'Central African Time', value: 'CAT' },
+];
+
+const defaultLabelText = 'Select a timezone';
+const getLabel = ( labelText ) => screen.getByText( labelText );
+const getInput = ( name ) => screen.getByRole( 'combobox', { name } );
+const getOption = ( name ) => screen.getByRole( 'option', { name } );
+const getAllOptions = () => screen.getAllByRole( 'option' );
+const getOptionSearchString = ( option ) => option.label.substring( 0, 11 );
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
+const ControlledComboboxControl = ( {
+	value: valueProp,
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] = useState( valueProp );
+	const handleOnChange = ( newValue ) => {
+		setValue( newValue );
+		onChange?.( newValue );
+	};
+	return (
+		<>
+			<ComboboxControl
+				{ ...props }
+				value={ value }
+				onChange={ handleOnChange }
+			/>
+		</>
+	);
+};
+
+describe.each( [
+	[ 'uncontrolled', ComboboxControl ],
+	[ 'controlled', ControlledComboboxControl ],
+] )( 'ComboboxControl %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'should render with visible label', () => {
+		render(
+			<Component options={ timezones } label={ defaultLabelText } />
+		);
+		const label = getLabel( defaultLabelText );
+		expect( label ).toBeInTheDocument();
+		expect( label ).toBeVisible();
+	} );
+
+	it( 'should render with hidden label', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				hideLabelFromVision={ true }
+			/>
+		);
+		const label = getLabel( defaultLabelText );
+
+		expect( label ).toBeInTheDocument();
+		expect( label ).toHaveAttribute(
+			'data-wp-component',
+			'VisuallyHidden'
+		);
+	} );
+
+	it( 'should render with the correct options', async () => {
+		const user = setupUser();
+		render(
+			<Component options={ timezones } label={ defaultLabelText } />
+		);
+		const input = getInput( defaultLabelText );
+
+		// Clicking on the input shows the options
+		await user.click( input );
+
+		const renderedOptions = getAllOptions();
+
+		// Confirm the rendered options match the provided dataset.
+		expect( renderedOptions ).toHaveLength( timezones.length );
+		renderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent(
+				timezones[ optionIndex ].label
+			);
+		} );
+	} );
+
+	it( 'should select the correct option via click events', async () => {
+		const user = setupUser();
+		const targetOption = timezones[ 2 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Clicking on the input shows the options
+		await user.click( input );
+
+		// Select the target option
+		await user.click( getOption( targetOption.label ) );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'should select the correct option via keypress events', async () => {
+		const user = setupUser();
+		const targetIndex = 4;
+		const targetOption = timezones[ targetIndex ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		// Navigate the options using the down arrow
+		for ( let i = 0; i < targetIndex; i++ ) {
+			await user.keyboard( '{ArrowDown}' );
+		}
+
+		// Pressing Enter/Return selects the currently focused option
+		await user.keyboard( '{Enter}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'should select the correct option from a search', async () => {
+		const user = setupUser();
+		const targetOption = timezones[ 13 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		// Type enough characters to ensure a predictable search result
+		await user.keyboard( getOptionSearchString( targetOption ) );
+
+		// Pressing Enter/Return selects the currently focused option
+		await user.keyboard( '{Enter}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'should render aria-live announcement upon selection', async () => {
+		const user = setupUser();
+		const targetOption = timezones[ 9 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		// Type enough characters to ensure a predictable search result
+		await user.keyboard( getOptionSearchString( targetOption ) );
+
+		// Pressing Enter/Return selects the currently focused option
+		await user.keyboard( '{Enter}' );
+
+		expect(
+			screen.getByText( 'Item selected.', {
+				selector: '[aria-live]',
+			} )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should process multiple entries in a single session', async () => {
+		const user = setupUser();
+		const unmatchedString = 'Mordor';
+		const targetOption = timezones[ 6 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		const initialRenderedOptions = getAllOptions();
+
+		// Rendered options match the provided dataset.
+		expect( initialRenderedOptions ).toHaveLength( timezones.length );
+		initialRenderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent(
+				timezones[ optionIndex ].label
+			);
+		} );
+
+		// No options are rendered if no match is found
+		await user.keyboard( unmatchedString );
+		expect( screen.queryByRole( 'option' ) ).toBeNull();
+
+		// Clearing the input renders all options again
+		await user.clear( input );
+
+		const postClearRenderedOptions = getAllOptions();
+
+		expect( postClearRenderedOptions ).toHaveLength( timezones.length );
+		postClearRenderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent(
+				timezones[ optionIndex ].label
+			);
+		} );
+
+		// Run a second search with a valid string.
+		const searchString = getOptionSearchString( targetOption );
+		await user.keyboard( searchString );
+		const validSearchRenderedOptions = getAllOptions();
+
+		// Find option that match the search string.
+		const matches = timezones.filter( ( option ) =>
+			option.label.includes( searchString )
+		);
+
+		// Confirm the rendered options match the provided dataset based on the current string.
+		expect( validSearchRenderedOptions ).toHaveLength( matches.length );
+		validSearchRenderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent( matches[ optionIndex ].label );
+		} );
+
+		// Confirm that the corrent option is selected
+		await user.keyboard( '{Enter}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+} );

package/src/custom-gradient-picker/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -125,9 +126,20 @@ export default function CustomGradientPicker( {
 		position: parseInt( colorStop.length.value ),
 	} ) );
 
+	if ( ! __nextHasNoMargin ) {
+		deprecated(
+			'Outer margin styles for wp.components.CustomGradientPicker',
+			{
+				since: '6.1',
+				version: '6.4',
+				hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	return (
 		<VStack
-			spacing={ 5 }
+			spacing={ 4 }
 			className={ classnames( 'components-custom-gradient-picker', {
 				'is-next-has-no-margin': __nextHasNoMargin,
 			} ) }

package/src/custom-gradient-picker/stories/index.js

@@ -28,3 +28,6 @@ const CustomGradientPickerWithState = ( props ) => {
 };
 
 export const Default = CustomGradientPickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMargin: true,
+};

package/src/date-time/date/index.tsx

@@ -13,6 +13,8 @@ import {
 	subWeeks,
 	addWeeks,
 	isSameMonth,
+	startOfWeek,
+	endOfWeek,
 } from 'date-fns';
 
 /**
@@ -20,7 +22,7 @@ import {
  */
 import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
-import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
+import { dateI18n, getSettings } from '@wordpress/date';
 import { useState, useRef, useEffect } from '@wordpress/element';
 
 /**
@@ -28,6 +30,7 @@ import { useState, useRef, useEffect } from '@wordpress/element';
  */
 import type { DatePickerProps } from '../types';
 import {
+	Wrapper,
 	Navigator,
 	NavigatorHeading,
 	Calendar,
@@ -63,7 +66,7 @@ export function DatePicker( {
 	events = [],
 	isInvalidDate,
 	onMonthPreviewed,
-	startOfWeek = 0,
+	startOfWeek: weekStartsOn = 0,
 }: DatePickerProps ) {
 	const date = currentDate ? inputToDate( currentDate ) : new Date();
 
@@ -78,7 +81,7 @@ export function DatePicker( {
 	} = useLilius( {
 		selected: [ startOfDay( date ) ],
 		viewing: startOfDay( date ),
-		weekStartsOn: startOfWeek,
+		weekStartsOn,
 	} );
 
 	// Used to implement a roving tab index. Tracks the day that receives focus
@@ -101,7 +104,7 @@ export function DatePicker( {
 	}
 
 	return (
-		<div
+		<Wrapper
 			className="components-datetime__date"
 			role="application"
 			aria-label={ __( 'Calendar' ) }
@@ -218,7 +221,22 @@ export function DatePicker( {
 									if ( event.key === 'ArrowDown' ) {
 										nextFocusable = addWeeks( day, 1 );
 									}
+									if ( event.key === 'PageUp' ) {
+										nextFocusable = subMonths( day, 1 );
+									}
+									if ( event.key === 'PageDown' ) {
+										nextFocusable = addMonths( day, 1 );
+									}
+									if ( event.key === 'Home' ) {
+										nextFocusable = startOfWeek( day );
+									}
+									if ( event.key === 'End' ) {
+										nextFocusable = startOfDay(
+											endOfWeek( day )
+										);
+									}
 									if ( nextFocusable ) {
+										event.preventDefault();
 										setFocusable( nextFocusable );
 										if (
 											! isSameMonth(
@@ -241,7 +259,7 @@ export function DatePicker( {
 					} )
 				) }
 			</Calendar>
-		</div>
+		</Wrapper>
 	);
 }
 
@@ -274,12 +292,14 @@ function Day( {
 
 	// Focus the day when it becomes focusable, e.g. because an arrow key is
 	// pressed. Only do this if focus is allowed - this stops us stealing focus
-	// from e.g. a TimePicker input. Note that isFocusAllowed is not a dep as
-	// there is no point calling focus() on an already focused element.
+	// from e.g. a TimePicker input.
 	useEffect( () => {
 		if ( ref.current && isFocusable && isFocusAllowed ) {
 			ref.current.focus();
 		}
+		// isFocusAllowed is not a dep as there is no point calling focus() on
+		// an already focused element.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isFocusable ] );
 
 	return (
@@ -302,7 +322,7 @@ function Day( {
 }
 
 function getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {
-	const { formats } = __experimentalGetSettings();
+	const { formats } = getSettings();
 	const localizedDate = dateI18n(
 		formats.date,
 		date,

package/src/date-time/date/styles.ts

@@ -12,6 +12,10 @@ import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { space } from '../../ui/utils/space';
 
+export const Wrapper = styled.div`
+	box-sizing: border-box;
+`;
+
 export const Navigator = styled( HStack )`
 	margin-bottom: ${ space( 4 ) };
 `;
@@ -35,6 +39,8 @@ export const Calendar = styled.div`
 
 export const DayOfWeek = styled.div`
 	color: ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
+	line-height: ${ CONFIG.fontLineHeightBase };
 
 	&:nth-of-type( 1 ) {
 		justify-self: start;

package/src/date-time/date/test/index.tsx

@@ -31,7 +31,9 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onChange when a day is selected', async () => {
-		const user = userEvent.setup( { delay: null } );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
 		const onChange = jest.fn();
 
@@ -50,7 +52,9 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
-		const user = userEvent.setup( { delay: null } );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
 		const onMonthPreviewed = jest.fn();
 		const onChange = jest.fn();

package/src/date-time/date-time/index.tsx

@@ -17,11 +17,10 @@ import Button from '../../button';
 import { default as DatePicker } from '../date';
 import { default as TimePicker } from '../time';
 import type { DateTimePickerProps } from '../types';
-import { CalendarHelp } from './styles';
+import { Wrapper, CalendarHelp } from './styles';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { Spacer } from '../../spacer';
-import { VStack } from '../../v-stack';
 
 export { DatePicker, TimePicker };
 
@@ -64,7 +63,7 @@ function UnforwardedDateTimePicker(
 	}
 
 	return (
-		<VStack ref={ ref } className="components-datetime" spacing={ 4 }>
+		<Wrapper ref={ ref } className="components-datetime" spacing={ 4 }>
 			{ ! calendarHelpIsVisible && (
 				<>
 					<TimePicker
@@ -187,7 +186,7 @@ function UnforwardedDateTimePicker(
 					) }
 				</HStack>
 			) }
-		</VStack>
+		</Wrapper>
 	);
 }
 

package/src/date-time/date-time/styles.ts

@@ -3,6 +3,15 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { VStack } from '../../v-stack';
+
+export const Wrapper = styled( VStack )`
+	box-sizing: border-box;
+`;
+
 export const CalendarHelp = styled.div`
 	min-width: 260px;
 `;

package/src/date-time/time/styles.ts

@@ -18,6 +18,7 @@ import SelectControl from '../../select-control';
 import { Select } from '../../select-control/styles/select-control-styles';
 
 export const Wrapper = styled.div`
+	box-sizing: border-box;
 	font-size: ${ CONFIG.fontSize };
 `;
 

package/src/date-time/time/timezone.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalGetSettings as getDateSettings } from '@wordpress/date';
+import { getSettings as getDateSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies