@wordpress/components 19.3.0 → 19.4.0

package/src/card/card/hook.js

@@ -61,7 +61,7 @@ export function useCard( props ) {
 			isRounded && styles.rounded,
 			className
 		);
-	}, [ className, isBorderless, isRounded ] );
+	}, [ className, cx, isBorderless, isRounded ] );
 
 	const surfaceProps = useSurface( { ...otherProps, className: classes } );
 

package/src/card/card-body/hook.js

@@ -35,7 +35,7 @@ export function useCardBody( props ) {
 				'components-card__body',
 				className
 			),
-		[ className, isShady, size ]
+		[ className, cx, isShady, size ]
 	);
 
 	return {

package/src/card/card-divider/hook.js

@@ -30,7 +30,7 @@ export function useCardDivider( props ) {
 				'components-card__divider',
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return {

package/src/card/card-footer/hook.js

@@ -38,7 +38,7 @@ export function useCardFooter( props ) {
 				'components-card__footer',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className, cx, isBorderless, isShady, size ]
 	);
 
 	return {

package/src/card/card-header/hook.js

@@ -37,7 +37,7 @@ export function useCardHeader( props ) {
 				'components-card__header',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className, cx, isBorderless, isShady, size ]
 	);
 
 	return {

package/src/card/card-media/hook.js

@@ -27,7 +27,7 @@ export function useCardMedia( props ) {
 				'components-card__media',
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return {

package/src/circular-option-picker/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

package/src/color-indicator/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */

package/src/color-palette/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -391,7 +391,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                           fill="#000"
                           focusable={false}
                           height={24}
-                          role="img"
                           viewBox="0 0 24 24"
                           width={24}
                           xmlns="http://www.w3.org/2000/svg"

package/src/color-picker/color-display.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * WordPress dependencies

package/src/color-picker/color-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * Internal dependencies

package/src/color-picker/component.tsx

@@ -73,7 +73,7 @@ const ColorPicker = (
 	} );
 
 	const safeColordColor = useMemo( () => {
-		return colord( color );
+		return colord( color || '' );
 	}, [ color ] );
 
 	const debouncedSetColor = useDebounce( setColor );

package/src/color-picker/use-deprecated-props.ts

@@ -83,6 +83,8 @@ function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
 	if ( props.color.hex ) {
 		return props.color.hex;
 	}
+
+	return undefined;
 }
 
 const transformColorStringToLegacyColor = memoize(

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

@@ -266,7 +266,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl() {
+function CountryCodeComboboxControl( { allowReset } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -276,9 +276,13 @@ function CountryCodeComboboxControl() {
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
+				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = () => <CountryCodeComboboxControl />;
+export const _default = CountryCodeComboboxControl.bind( {} );
+_default.args = {
+	allowReset: false,
+};

package/src/combobox-control/style.scss

@@ -40,7 +40,7 @@ input.components-combobox-control__input[type="text"] {
 
 .components-combobox-control__reset.components-button {
 	display: flex;
-	height: $grid-unit-30;
-	min-width: $grid-unit-30;
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
 	padding: 0;
 }

package/src/date-time/README.md

@@ -28,7 +28,7 @@ const MyDateTimePicker = () => {
 			is12Hour={ true }
 		/>
 	);
-}
+};
 ```
 
 ## Props
@@ -52,7 +52,7 @@ The function called when a new date or time has been selected. It is passed the
 
 ### is12Hour
 
-Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY.
+Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed to the default format `DD-MM-YYYY`).
 
 -   Type: `bool`
 -   Required: No
@@ -69,5 +69,5 @@ A callback function which receives a Date object representing a day as an argume
 
 A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
 
-- Type: `Function`
-- Required: No
+-   Type: `Function`
+-   Required: No

package/src/date-time/test/time.js

@@ -278,7 +278,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex < dayInputIndex ).toBe( true );
+		expect( monthInputIndex > dayInputIndex ).toBe( true );
 
 		rerender(
 			<form aria-label="form">
@@ -299,7 +299,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex > dayInputIndex ).toBe( true );
+		expect( monthInputIndex < dayInputIndex ).toBe( true );
 	} );
 
 	it( 'Should set a time when passed a null currentTime', () => {

package/src/date-time/time.js

@@ -196,13 +196,13 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 	const dayMonthFormat = is12Hour ? (
 		<>
-			{ dayFormat }
 			{ monthFormat }
+			{ dayFormat }
 		</>
 	) : (
 		<>
-			{ monthFormat }
 			{ dayFormat }
+			{ monthFormat }
 		</>
 	);
 

package/src/dropdown/index.js

@@ -27,19 +27,20 @@ function useObservableState( initialState, onStateChange ) {
 	];
 }
 
-export default function Dropdown( {
-	renderContent,
-	renderToggle,
-	position = 'bottom right',
-	className,
-	contentClassName,
-	expandOnMobile,
-	headerTitle,
-	focusOnMount,
-	popoverProps,
-	onClose,
-	onToggle,
-} ) {
+export default function Dropdown( props ) {
+	const {
+		renderContent,
+		renderToggle,
+		position = 'bottom right',
+		className,
+		contentClassName,
+		expandOnMobile,
+		headerTitle,
+		focusOnMount,
+		popoverProps,
+		onClose,
+		onToggle,
+	} = props;
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 

package/src/elevation/hook.js

@@ -112,6 +112,7 @@ export function useElevation( props ) {
 		active,
 		borderRadius,
 		className,
+		cx,
 		focus,
 		hover,
 		isInteractive,

package/src/flex/flex/hook.js

@@ -126,6 +126,7 @@ export function useFlex( props ) {
 	}, [
 		align,
 		className,
+		cx,
 		direction,
 		expanded,
 		gap,

package/src/grid/hook.js

@@ -71,6 +71,7 @@ export default function useGrid( props ) {
 		alignment,
 		className,
 		columnGap,
+		cx,
 		gap,
 		gridTemplateColumns,
 		gridTemplateRows,

package/src/item-group/item/hook.ts

@@ -48,7 +48,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 				spacedAround && styles.spacedAround,
 				className
 			),
-		[ as, className, size, spacedAround ]
+		[ as, className, cx, size, spacedAround ]
 	);
 
 	const wrapperClassName = cx( styles.itemWrapper );

package/src/item-group/stories/index.js

@@ -145,7 +145,7 @@ const ItemWithChevron = ( {
 
 	const itemClassName = useMemo(
 		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className ]
+		[ alwaysVisible, className, cx ]
 	);
 
 	const chevronIconClassName = useMemo(
@@ -155,7 +155,7 @@ const ItemWithChevron = ( {
 				fill: currentColor;
 				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
 			` ),
-		[ isRtlLayout ]
+		[ cx, isRtlLayout ]
 	);
 
 	return (

package/src/mobile/link-settings/test/edit.native.js

@@ -72,7 +72,7 @@ describe.each( [
 	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async () => {
 		// Arrange
 		const url = 'https://tonytahmouchtest.files.wordpress.com';
-		const subject = initializeEditor( { initialHtml } );
+		const subject = await initializeEditor( { initialHtml } );
 		Clipboard.getString.mockReturnValue( url );
 
 		// Act
@@ -109,7 +109,7 @@ describe.each( [
 			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
 				// Arrange
 				const url = 'tonytahmouchtest.files.wordpress.com';
-				const subject = initializeEditor( { initialHtml } );
+				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act
@@ -162,7 +162,7 @@ describe.each( [
 			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
 				// Arrange
 				const url = 'https://tonytahmouchtest.files.wordpress.com';
-				const subject = initializeEditor( { initialHtml } );
+				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act
@@ -241,7 +241,7 @@ describe.each( [
 				async () => {
 					// Arrange
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const subject = initializeEditor( { initialHtml } );
+					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act
@@ -308,7 +308,7 @@ describe.each( [
 				async () => {
 					// Arrange
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const subject = initializeEditor( { initialHtml } );
+					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act

package/src/modal/index.js

@@ -22,7 +22,6 @@ import {
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
-import deprecated from '@wordpress/deprecated';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -45,8 +44,7 @@ function Modal( props, forwardedRef ) {
 		focusOnMount = true,
 		shouldCloseOnEsc = true,
 		shouldCloseOnClickOutside = true,
-		isDismissable, // Deprecated
-		isDismissible = isDismissable || true,
+		isDismissible = true,
 		/* accessibility */
 		aria = {
 			labelledby: null,
@@ -93,13 +91,6 @@ function Modal( props, forwardedRef ) {
 		};
 	}, [] );
 
-	if ( isDismissable ) {
-		deprecated( 'isDismissable prop of the Modal component', {
-			since: '5.4',
-			alternative: 'isDismissible prop (renamed) of the Modal component',
-		} );
-	}
-
 	function handleEscapeKeyDown( event ) {
 		if (
 			shouldCloseOnEsc &&

package/src/navigator/context.ts

@@ -10,7 +10,7 @@ import type { NavigatorContext as NavigatorContextType } from './types';
 
 const initialContextValue: NavigatorContextType = {
 	location: {},
-	push: () => {},
-	pop: () => {},
+	goTo: () => {},
+	goBack: () => {},
 };
 export const NavigatorContext = createContext( initialContextValue );

package/src/navigator/navigator-provider/README.md

@@ -16,19 +16,19 @@ import {
 } from '@wordpress/components';
 
 function NavigatorButton( { path, ...props } ) {
-	const { push } = useNavigator();
+	const { goTo } = useNavigator();
 	return (
 		<Button
 		 variant="primary"
-		 onClick={ () => push( path ) }
+		 onClick={ () => goTo( path ) }
 		 { ...props }
 	 />
  );
 }
 
 function NavigatorBackButton( props ) {
-	const { pop } = useNavigator();
-	return <Button variant="secondary" onClick={ () => pop() } { ...props } />;
+	const { goBack } = useNavigator();
+	return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
 }
 
 const MyNavigation = () => (
@@ -64,15 +64,17 @@ You can retrieve a `navigator` instance by using the `useNavigator` hook.
 
 The `navigator` instance has a few properties:
 
-### `push`: `( path: string, options: NavigateOptions ) => void`
+### `goTo`: `( path: string, options: NavigateOptions ) => void`
 
-The `push` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
+The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
 
-There currently aren't any available options.
+The available options are:
 
-### `pop`: `() => void`
+- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back.
 
-The `pop` function allows navigating to the previous path.
+### `goBack`: `() => void`
+
+The `goBack` function allows navigating to the previous path.
 
 ### `location`: `NavigatorLocation`
 

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

@@ -42,37 +42,25 @@ function NavigatorProvider(
 	>( [
 		{
 			path: initialPath,
-			isBack: false,
-			isInitial: true,
 		},
 	] );
 
-	const push: NavigatorContextType[ 'push' ] = useCallback(
-		( path, options ) => {
-			// Force the `isBack` flag to `false` when navigating forward on both the
-			// previous and the new location.
-			// Also force the `isInitial` flag to `false` for the new location, to make
-			// sure it doesn't get overridden by mistake.
+	const goTo: NavigatorContextType[ 'goTo' ] = useCallback(
+		( path, options = {} ) => {
 			setLocationHistory( [
-				...locationHistory.slice( 0, -1 ),
-				{
-					...locationHistory[ locationHistory.length - 1 ],
-					isBack: false,
-				},
+				...locationHistory,
 				{
 					...options,
 					path,
 					isBack: false,
-					isInitial: false,
 				},
 			] );
 		},
 		[ locationHistory ]
 	);
 
-	const pop: NavigatorContextType[ 'pop' ] = useCallback( () => {
+	const goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {
 		if ( locationHistory.length > 1 ) {
-			// Force the `isBack` flag to `true` when navigating back.
 			setLocationHistory( [
 				...locationHistory.slice( 0, -2 ),
 				{
@@ -85,18 +73,21 @@ function NavigatorProvider(
 
 	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {
-			location: locationHistory[ locationHistory.length - 1 ],
-			push,
-			pop,
+			location: {
+				...locationHistory[ locationHistory.length - 1 ],
+				isInitial: locationHistory.length === 1,
+			},
+			goTo,
+			goBack,
 		} ),
-		[ locationHistory, push, pop ]
+		[ locationHistory, goTo, goBack ]
 	);
 
 	const cx = useCx();
 	const classes = useMemo(
 		// Prevents horizontal overflow while animating screen transitions
 		() => cx( css( { overflowX: 'hidden' } ), className ),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return (
@@ -120,19 +111,19 @@ function NavigatorProvider(
  * } from '@wordpress/components';
  *
  * function NavigatorButton( { path, ...props } ) {
- *  const { push } = useNavigator();
+ *  const { goTo } = useNavigator();
  *  return (
  *    <Button
  *      variant="primary"
- *      onClick={ () => push( path ) }
+ *      onClick={ () => goTo( path ) }
  *      { ...props }
  *    />
  *  );
  * }
  *
  * function NavigatorBackButton( props ) {
- *   const { pop } = useNavigator();
- *   return <Button variant="secondary" onClick={ () => pop() } { ...props } />;
+ *   const { goBack } = useNavigator();
+ *   return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
  * }
  *
  * const MyNavigation = () => (

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

@@ -9,8 +9,13 @@ import { css } from '@emotion/react';
 /**
  * WordPress dependencies
  */
-import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
-import { useReducedMotion, useFocusOnMount } from '@wordpress/compose';
+import { focus } from '@wordpress/dom';
+import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
+import {
+	useReducedMotion,
+	useMergeRefs,
+	usePrevious,
+} from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -47,7 +52,9 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	const prefersReducedMotion = useReducedMotion();
 	const { location } = useContext( NavigatorContext );
 	const isMatch = location.path === path;
-	const ref = useFocusOnMount();
+	const wrapperRef = useRef< HTMLDivElement >( null );
+
+	const previousLocation = usePrevious( location );
 
 	const cx = useCx();
 	const classes = useMemo(
@@ -61,15 +68,44 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 				} ),
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
-	// This flag is used to only apply the focus on mount when the actual path changes.
-	// It avoids the focus to happen on the first render.
-	const [ hasPathChanged, setHasPathChanged ] = useState( false );
+	// Focus restoration
+	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
-		setHasPathChanged( true );
-	}, [ path ] );
+		// Only attempt to restore focus:
+		// - if the current location is not the initial one (to avoid moving focus on page load)
+		// - when the screen becomes visible
+		// - if the wrapper ref has been assigned
+		if ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {
+			return;
+		}
+
+		let elementToFocus: HTMLElement | null = null;
+
+		// 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 && previousLocation?.focusTargetSelector ) {
+			elementToFocus = wrapperRef.current.querySelector(
+				previousLocation.focusTargetSelector
+			);
+		}
+
+		// 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 ];
+
+			elementToFocus = firstTabbable ?? wrapperRef.current;
+		}
+
+		elementToFocus.focus();
+	}, [ isInitialLocation, isMatch ] );
+
+	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
 
 	if ( ! isMatch ) {
 		return null;
@@ -77,7 +113,11 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 
 	if ( prefersReducedMotion ) {
 		return (
-			<View ref={ forwardedRef } className={ classes } { ...otherProps }>
+			<View
+				ref={ mergedWrapperRef }
+				className={ classes }
+				{ ...otherProps }
+			>
 				{ children }
 			</View>
 		);
@@ -120,7 +160,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 
 	return (
 		<motion.div
-			ref={ hasPathChanged ? ref : undefined }
+			ref={ mergedWrapperRef }
 			className={ classes }
 			{ ...otherProps }
 			{ ...animatedProps }
@@ -142,19 +182,19 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
  * } from '@wordpress/components';
  *
  * function NavigatorButton( { path, ...props } ) {
- *  const { push } = useNavigator();
+ *  const { goTo } = useNavigator();
  *  return (
  *    <Button
  *      variant="primary"
- *      onClick={ () => push( path ) }
+ *      onClick={ () => goTo( path ) }
  *      { ...props }
  *    />
  *  );
  * }
  *
  * function NavigatorBackButton( props ) {
- *   const { pop } = useNavigator();
- *   return <Button variant="secondary" onClick={ () => pop() } { ...props } />;
+ *   const { goBack } = useNavigator();
+ *   return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
  * }
  *
  * const MyNavigation = () => (