@wordpress/components 27.1.0 → 27.3.0

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;
 		}
 

package/src/palette-edit/index.tsx

@@ -74,7 +74,7 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 }
 
 /**
- * Returns a name for a palette item in the format "Color + id".
+ * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
  * It expects slugs to be in the format: slugPrefix + color- + number.
  * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
@@ -82,9 +82,9 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
  * @param elements   An array of color palette items.
  * @param slugPrefix The slug prefix used to match the element slug.
  *
- * @return A unique name for a palette item.
+ * @return A name and slug for the new palette item.
  */
-export function getNameForPosition(
+export function getNameAndSlugForPosition(
 	elements: PaletteElement[],
 	slugPrefix: string
 ) {
@@ -102,11 +102,14 @@ export function getNameForPosition(
 		return previousValue;
 	}, 1 );
 
-	return sprintf(
-		/* translators: %s: is an id for a custom color */
-		__( 'Color %s' ),
-		position
-	);
+	return {
+		name: sprintf(
+			/* translators: %s: is an id for a custom color */
+			__( 'Color %s' ),
+			position
+		),
+		slug: `${ slugPrefix }color-${ position }`,
+	};
 }
 
 function ColorPickerPopover< T extends Color | Gradient >( {
@@ -434,20 +437,19 @@ export function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const optionName = getNameForPosition(
-									elements,
-									slugPrefix
-								);
+								const { name, slug } =
+									getNameAndSlugForPosition(
+										elements,
+										slugPrefix
+									);
 
 								if ( !! gradients ) {
 									onChange( [
 										...gradients,
 										{
 											gradient: DEFAULT_GRADIENT,
-											name: optionName,
-											slug:
-												slugPrefix +
-												kebabCase( optionName ),
+											name,
+											slug,
 										},
 									] );
 								} else {
@@ -455,10 +457,8 @@ export function PaletteEdit( {
 										...colors,
 										{
 											color: DEFAULT_COLOR,
-											name: optionName,
-											slug:
-												slugPrefix +
-												kebabCase( optionName ),
+											name,
+											slug,
 										},
 									] );
 								}
@@ -480,7 +480,7 @@ export function PaletteEdit( {
 										: __( 'Color options' )
 								}
 								toggleProps={ {
-									isSmall: true,
+									size: 'small',
 								} }
 							>
 								{ ( { onClose }: { onClose: () => void } ) => (

package/src/palette-edit/test/index.tsx

@@ -7,7 +7,7 @@ import { click, type, press } from '@ariakit/test';
 /**
  * Internal dependencies
  */
-import PaletteEdit, { getNameForPosition } from '..';
+import PaletteEdit, { getNameAndSlugForPosition } from '..';
 import type { PaletteElement } from '../types';
 
 const noop = () => {};
@@ -21,17 +21,18 @@ async function clearInput( input: HTMLInputElement ) {
 	}
 }
 
-describe( 'getNameForPosition', () => {
+describe( 'getNameAndSlugForPosition', () => {
 	test( 'should return 1 by default', () => {
 		const slugPrefix = 'test-';
 		const elements: PaletteElement[] = [];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 1'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 1',
+			slug: 'test-color-1',
+		} );
 	} );
 
-	test( 'should return a new color name with an incremented slug id', () => {
+	test( 'should return a new color name and slug with an incremented slug id', () => {
 		const slugPrefix = 'test-';
 		const elements = [
 			{
@@ -41,12 +42,13 @@ describe( 'getNameForPosition', () => {
 			},
 		];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 2'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 2',
+			slug: 'test-color-2',
+		} );
 	} );
 
-	test( 'should ignore user-defined color names', () => {
+	test( 'should ignore user-defined color name and slug', () => {
 		const slugPrefix = 'test-';
 		const elements = [
 			{
@@ -56,12 +58,13 @@ describe( 'getNameForPosition', () => {
 			},
 		];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 1'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 1',
+			slug: 'test-color-1',
+		} );
 	} );
 
-	test( 'should return a new color name with an incremented slug id one higher than the current highest', () => {
+	test( 'should return a new color name and slug with an incremented slug id one higher than the current highest', () => {
 		const slugPrefix = 'test-';
 		const elements = [
 			{
@@ -86,9 +89,10 @@ describe( 'getNameForPosition', () => {
 			},
 		];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 151'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 151',
+			slug: 'test-color-151',
+		} );
 	} );
 } );
 

package/src/placeholder/style.scss

@@ -212,7 +212,11 @@
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
 	@include placeholder-style();
-	overflow: auto;
+
+	overflow: hidden;
+	.is-selected & {
+		overflow: auto;
+	}
 }
 
 // Position the spinner.