@wordpress/components 27.2.0 → 27.3.0

package/src/custom-select-control-v2/test/index.tsx

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { CustomSelect as UncontrolledCustomSelect, CustomSelectItem } from '..';
+import UncontrolledCustomSelectControlV2 from '..';
 import type { CustomSelectProps } from '../types';
 
 const items = [
@@ -41,14 +41,14 @@ const items = [
 const defaultProps = {
 	label: 'label!',
 	children: items.map( ( { value, key } ) => (
-		<CustomSelectItem value={ value } key={ key } />
+		<UncontrolledCustomSelectControlV2.Item value={ value } key={ key } />
 	) ),
 };
 
-const ControlledCustomSelect = ( props: CustomSelectProps ) => {
+const ControlledCustomSelectControl = ( props: CustomSelectProps ) => {
 	const [ value, setValue ] = useState< string | string[] >();
 	return (
-		<UncontrolledCustomSelect
+		<UncontrolledCustomSelectControlV2
 			{ ...props }
 			onChange={ ( nextValue: string | string[] ) => {
 				setValue( nextValue );
@@ -60,8 +60,8 @@ const ControlledCustomSelect = ( props: CustomSelectProps ) => {
 };
 
 describe.each( [
-	[ 'Uncontrolled', UncontrolledCustomSelect ],
-	[ 'Controlled', ControlledCustomSelect ],
+	[ 'Uncontrolled', UncontrolledCustomSelectControlV2 ],
+	[ 'Controlled', ControlledCustomSelectControl ],
 ] )( 'CustomSelectControlV2 (%s)', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
@@ -175,8 +175,10 @@ describe.each( [
 			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
 
-			await type( 'aq' );
+			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
+			await type( 'a' );
 
 			expect(
 				screen.queryByRole( 'listbox', {
@@ -185,8 +187,10 @@ describe.each( [
 				} )
 			).not.toBeInTheDocument();
 
+			// This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser
 			await press.Enter();
-			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {
@@ -253,9 +257,12 @@ describe.each( [
 						'rose blush',
 						'ultraviolet morning light',
 					].map( ( item ) => (
-						<CustomSelectItem key={ item } value={ item }>
+						<UncontrolledCustomSelectControlV2.Item
+							key={ item }
+							value={ item }
+						>
 							{ item }
-						</CustomSelectItem>
+						</UncontrolledCustomSelectControlV2.Item>
 					) ) }
 				</Component>
 			);
@@ -322,9 +329,12 @@ describe.each( [
 			render(
 				<Component defaultValue={ defaultValues } label="Multi-select">
 					{ defaultValues.map( ( item ) => (
-						<CustomSelectItem key={ item } value={ item }>
+						<UncontrolledCustomSelectControlV2.Item
+							key={ item }
+							value={ item }
+						>
 							{ item }
-						</CustomSelectItem>
+						</UncontrolledCustomSelectControlV2.Item>
 					) ) }
 				</Component>
 			);
@@ -374,12 +384,12 @@ describe.each( [
 
 		render(
 			<Component label="Rendered" renderSelectedValue={ renderValue }>
-				<CustomSelectItem value="april-29">
+				<UncontrolledCustomSelectControlV2.Item value="april-29">
 					{ renderValue( 'april-29' ) }
-				</CustomSelectItem>
-				<CustomSelectItem value="july-9">
+				</UncontrolledCustomSelectControlV2.Item>
+				<UncontrolledCustomSelectControlV2.Item value="july-9">
 					{ renderValue( 'july-9' ) }
-				</CustomSelectItem>
+				</UncontrolledCustomSelectControlV2.Item>
 			</Component>
 		);
 

package/src/dropdown/style.scss

@@ -31,9 +31,9 @@
 		margin-top: 0;
 		border-top: $border-width solid $gray-400;
 		padding: $grid-unit-10;
+	}
 
-		.is-alternate & {
-			border-color: $gray-900;
-		}
+	&.is-alternate .components-menu-group + .components-menu-group {
+		border-color: $gray-900;
 	}
 }

package/src/input-control/input-field.tsx

@@ -24,6 +24,7 @@ import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
 import type { InputFieldProps } from './types';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const noop = () => {};
 
@@ -222,7 +223,7 @@ function InputField(
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onFocus={ handleOnFocus }
-			onKeyDown={ handleOnKeyDown }
+			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }

package/src/mobile/color-settings/palette.screen.native.js

@@ -112,7 +112,11 @@ const PaletteScreen = () => {
 
 	function getClearButton() {
 		return (
-			<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>
+			<TouchableWithoutFeedback
+				accessibilityLabel={ __( 'Clear selected color' ) }
+				onPress={ onClear }
+				hitSlop={ HIT_SLOP }
+			>
 				<View style={ styles.clearButtonContainer }>
 					<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>
 				</View>

package/src/navigable-container/container.tsx

@@ -79,7 +79,7 @@ class NavigableContainer extends Component< NavigableContainerProps > {
 
 		const { onlyBrowserTabstops } = this.props;
 		const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
-		const focusables = finder.find( this.container ) as HTMLElement[];
+		const focusables = finder.find( this.container );
 
 		const index = this.getFocusableIndex( focusables, target );
 		if ( index > -1 && target ) {

package/src/navigator/navigator-provider/component.tsx

@@ -6,14 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import {
-	useMemo,
-	useState,
-	useCallback,
-	useReducer,
-	useRef,
-	useEffect,
-} from '@wordpress/element';
+import { useMemo, useReducer } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -30,26 +23,178 @@ import type {
 	NavigatorProviderProps,
 	NavigatorLocation,
 	NavigatorContext as NavigatorContextType,
+	NavigateOptions,
 	Screen,
+	NavigateToParentOptions,
 } from '../types';
 
 type MatchedPath = ReturnType< typeof patternMatch >;
-type ScreenAction = { type: string; screen: Screen };
+
+type RouterAction =
+	| { type: 'add' | 'remove'; screen: Screen }
+	| { type: 'goback' }
+	| { type: 'goto'; path: string; options?: NavigateOptions }
+	| { type: 'gotoparent'; options?: NavigateToParentOptions };
+
+type RouterState = {
+	screens: Screen[];
+	locationHistory: NavigatorLocation[];
+	matchedPath: MatchedPath;
+};
 
 const MAX_HISTORY_LENGTH = 50;
 
-function screensReducer(
-	state: Screen[] = [],
-	action: ScreenAction
-): Screen[] {
+function addScreen( { screens }: RouterState, screen: Screen ) {
+	return [ ...screens, screen ];
+}
+
+function removeScreen( { screens }: RouterState, screen: Screen ) {
+	return screens.filter( ( s ) => s.id !== screen.id );
+}
+
+function goBack( { locationHistory }: RouterState ) {
+	if ( locationHistory.length <= 1 ) {
+		return locationHistory;
+	}
+	return [
+		...locationHistory.slice( 0, -2 ),
+		{
+			...locationHistory[ locationHistory.length - 2 ],
+			isBack: true,
+			hasRestoredFocus: false,
+		},
+	];
+}
+
+function goTo(
+	state: RouterState,
+	path: string,
+	options: NavigateOptions = {}
+) {
+	const { locationHistory } = state;
+	const {
+		focusTargetSelector,
+		isBack = false,
+		skipFocus = false,
+		replace = false,
+		...restOptions
+	} = options;
+
+	const isNavigatingToPreviousPath =
+		isBack &&
+		locationHistory.length > 1 &&
+		locationHistory[ locationHistory.length - 2 ].path === path;
+
+	if ( isNavigatingToPreviousPath ) {
+		return goBack( state );
+	}
+
+	const newLocation = {
+		...restOptions,
+		path,
+		isBack,
+		hasRestoredFocus: false,
+		skipFocus,
+	};
+
+	if ( locationHistory.length === 0 ) {
+		return replace ? [] : [ newLocation ];
+	}
+
+	const newLocationHistory = locationHistory.slice(
+		locationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0,
+		-1
+	);
+
+	if ( ! replace ) {
+		newLocationHistory.push(
+			// Assign `focusTargetSelector` to the previous location in history
+			// (the one we just navigated from).
+			{
+				...locationHistory[ locationHistory.length - 1 ],
+				focusTargetSelector,
+			}
+		);
+	}
+
+	newLocationHistory.push( newLocation );
+
+	return newLocationHistory;
+}
+
+function goToParent(
+	state: RouterState,
+	options: NavigateToParentOptions = {}
+) {
+	const { locationHistory, screens } = state;
+	const currentPath = locationHistory[ locationHistory.length - 1 ].path;
+	if ( currentPath === undefined ) {
+		return locationHistory;
+	}
+	const parentPath = findParent( currentPath, screens );
+	if ( parentPath === undefined ) {
+		return locationHistory;
+	}
+	return goTo( state, parentPath, {
+		...options,
+		isBack: true,
+	} );
+}
+
+function routerReducer(
+	state: RouterState,
+	action: RouterAction
+): RouterState {
+	let { screens, locationHistory, matchedPath } = state;
+
 	switch ( action.type ) {
 		case 'add':
-			return [ ...state, action.screen ];
+			screens = addScreen( state, action.screen );
+			break;
 		case 'remove':
-			return state.filter( ( s: Screen ) => s.id !== action.screen.id );
+			screens = removeScreen( state, action.screen );
+			break;
+		case 'goback':
+			locationHistory = goBack( state );
+			break;
+		case 'goto':
+			locationHistory = goTo( state, action.path, action.options );
+			break;
+		case 'gotoparent':
+			locationHistory = goToParent( state, action.options );
+			break;
+	}
+
+	// Return early in case there is no change
+	if (
+		screens === state.screens &&
+		locationHistory === state.locationHistory
+	) {
+		return state;
 	}
 
-	return state;
+	// Compute the matchedPath
+	const currentPath =
+		locationHistory.length > 0
+			? locationHistory[ locationHistory.length - 1 ].path
+			: undefined;
+	matchedPath =
+		currentPath !== undefined
+			? patternMatch( currentPath, screens )
+			: undefined;
+
+	// If the new match is the same as the previous match,
+	// return the previous one to keep immutability.
+	if (
+		matchedPath &&
+		state.matchedPath &&
+		matchedPath.id === state.matchedPath.id &&
+		isShallowEqual( matchedPath.params, state.matchedPath.params )
+	) {
+		matchedPath = state.matchedPath;
+	}
+
+	return { screens, locationHistory, matchedPath };
 }
 
 function UnconnectedNavigatorProvider(
@@ -59,167 +204,33 @@ function UnconnectedNavigatorProvider(
 	const { initialPath, children, className, ...otherProps } =
 		useContextSystem( props, 'NavigatorProvider' );
 
-	const [ locationHistory, setLocationHistory ] = useState<
-		NavigatorLocation[]
-	>( [
-		{
-			path: initialPath,
-		},
-	] );
-	const currentLocationHistory = useRef< NavigatorLocation[] >( [] );
-	const [ screens, dispatch ] = useReducer( screensReducer, [] );
-	const currentScreens = useRef< Screen[] >( [] );
-	useEffect( () => {
-		currentScreens.current = screens;
-	}, [ screens ] );
-	useEffect( () => {
-		currentLocationHistory.current = locationHistory;
-	}, [ locationHistory ] );
-	const currentMatch = useRef< MatchedPath >();
-	const matchedPath = useMemo( () => {
-		let currentPath: string | undefined;
-		if (
-			locationHistory.length === 0 ||
-			( currentPath =
-				locationHistory[ locationHistory.length - 1 ].path ) ===
-				undefined
-		) {
-			currentMatch.current = undefined;
-			return undefined;
-		}
-
-		const resolvePath = ( path: string ) => {
-			const newMatch = patternMatch( path, screens );
-
-			// If the new match is the same as the current match,
-			// return the previous one for performance reasons.
-			if (
-				currentMatch.current &&
-				newMatch &&
-				isShallowEqual(
-					newMatch.params,
-					currentMatch.current.params
-				) &&
-				newMatch.id === currentMatch.current.id
-			) {
-				return currentMatch.current;
-			}
-
-			return newMatch;
-		};
-
-		const newMatch = resolvePath( currentPath );
-		currentMatch.current = newMatch;
-		return newMatch;
-	}, [ screens, locationHistory ] );
-
-	const addScreen = useCallback(
-		( screen: Screen ) => dispatch( { type: 'add', screen } ),
-		[]
+	const [ routerState, dispatch ] = useReducer(
+		routerReducer,
+		initialPath,
+		( path ) => ( {
+			screens: [],
+			locationHistory: [ { path } ],
+			matchedPath: undefined,
+		} )
 	);
 
-	const removeScreen = useCallback(
-		( screen: Screen ) => dispatch( { type: 'remove', screen } ),
+	// The methods are constant forever, create stable references to them.
+	const methods = useMemo(
+		() => ( {
+			goBack: () => dispatch( { type: 'goback' } ),
+			goTo: ( path: string, options?: NavigateOptions ) =>
+				dispatch( { type: 'goto', path, options } ),
+			goToParent: ( options: NavigateToParentOptions | undefined ) =>
+				dispatch( { type: 'gotoparent', options } ),
+			addScreen: ( screen: Screen ) =>
+				dispatch( { type: 'add', screen } ),
+			removeScreen: ( screen: Screen ) =>
+				dispatch( { type: 'remove', screen } ),
+		} ),
 		[]
 	);
 
-	const goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {
-		setLocationHistory( ( prevLocationHistory ) => {
-			if ( prevLocationHistory.length <= 1 ) {
-				return prevLocationHistory;
-			}
-			return [
-				...prevLocationHistory.slice( 0, -2 ),
-				{
-					...prevLocationHistory[ prevLocationHistory.length - 2 ],
-					isBack: true,
-					hasRestoredFocus: false,
-				},
-			];
-		} );
-	}, [] );
-
-	const goTo: NavigatorContextType[ 'goTo' ] = useCallback(
-		( path, options = {} ) => {
-			const {
-				focusTargetSelector,
-				isBack = false,
-				skipFocus = false,
-				replace = false,
-				...restOptions
-			} = options;
-
-			const isNavigatingToPreviousPath =
-				isBack &&
-				currentLocationHistory.current.length > 1 &&
-				currentLocationHistory.current[
-					currentLocationHistory.current.length - 2
-				].path === path;
-
-			if ( isNavigatingToPreviousPath ) {
-				goBack();
-				return;
-			}
-
-			setLocationHistory( ( prevLocationHistory ) => {
-				const newLocation = {
-					...restOptions,
-					path,
-					isBack,
-					hasRestoredFocus: false,
-					skipFocus,
-				};
-
-				if ( prevLocationHistory.length === 0 ) {
-					return replace ? [] : [ newLocation ];
-				}
-
-				const newLocationHistory = prevLocationHistory.slice(
-					prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0,
-					-1
-				);
-
-				if ( ! replace ) {
-					newLocationHistory.push(
-						// Assign `focusTargetSelector` to the previous location in history
-						// (the one we just navigated from).
-						{
-							...prevLocationHistory[
-								prevLocationHistory.length - 1
-							],
-							focusTargetSelector,
-						}
-					);
-				}
-
-				newLocationHistory.push( newLocation );
-
-				return newLocationHistory;
-			} );
-		},
-		[ goBack ]
-	);
-
-	const goToParent: NavigatorContextType[ 'goToParent' ] = useCallback(
-		( options = {} ) => {
-			const currentPath =
-				currentLocationHistory.current[
-					currentLocationHistory.current.length - 1
-				].path;
-			if ( currentPath === undefined ) {
-				return;
-			}
-			const parentPath = findParent(
-				currentPath,
-				currentScreens.current
-			);
-			if ( parentPath === undefined ) {
-				return;
-			}
-			goTo( parentPath, { ...options, isBack: true } );
-		},
-		[ goTo ]
-	);
+	const { locationHistory, matchedPath } = routerState;
 
 	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {
@@ -227,23 +238,11 @@ function UnconnectedNavigatorProvider(
 				...locationHistory[ locationHistory.length - 1 ],
 				isInitial: locationHistory.length === 1,
 			},
-			params: matchedPath ? matchedPath.params : {},
-			match: matchedPath ? matchedPath.id : undefined,
-			goTo,
-			goBack,
-			goToParent,
-			addScreen,
-			removeScreen,
+			params: matchedPath?.params ?? {},
+			match: matchedPath?.id,
+			...methods,
 		} ),
-		[
-			locationHistory,
-			matchedPath,
-			goTo,
-			goBack,
-			goToParent,
-			addScreen,
-			removeScreen,
-		]
+		[ locationHistory, matchedPath, methods ]
 	);
 
 	const cx = useCx();

package/src/navigator/navigator-screen/component.tsx

@@ -106,7 +106,7 @@ function UnconnectedNavigatorScreen(
 
 		// When navigating back, if a selector is provided, use it to look for the
 		// target element (assumed to be a node inside the current NavigatorScreen)
-		if ( location.isBack && location?.focusTargetSelector ) {
+		if ( location.isBack && location.focusTargetSelector ) {
 			elementToFocus = wrapperRef.current.querySelector(
 				location.focusTargetSelector
 			);
@@ -115,9 +115,7 @@ function UnconnectedNavigatorScreen(
 		// If the previous query didn't run or find any element to focus, fallback
 		// to the first tabbable element in the screen (or the screen itself).
 		if ( ! elementToFocus ) {
-			const firstTabbable = (
-				focus.tabbable.find( wrapperRef.current ) as HTMLElement[]
-			 )[ 0 ];
+			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}