@wordpress/components 23.7.0 → 23.9.0

package/src/navigator/stories/index.tsx

@@ -298,3 +298,71 @@ export const NestedNavigator: ComponentStory< typeof NavigatorProvider > =
 NestedNavigator.args = {
 	initialPath: '/child2/grandchild',
 };
+
+const NavigatorButtonWithSkipFocus = ( {
+	path,
+	onClick,
+	...props
+}: React.ComponentProps< typeof NavigatorButton > ) => {
+	const { goTo } = useNavigator();
+
+	return (
+		<Button
+			{ ...props }
+			onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+				goTo( path, { skipFocus: true } );
+				onClick?.( e );
+			} }
+		/>
+	);
+};
+
+export const SkipFocus: ComponentStory< typeof NavigatorProvider > = (
+	args
+) => {
+	return <NavigatorProvider { ...args } />;
+};
+SkipFocus.args = {
+	initialPath: '/',
+	children: (
+		<>
+			<div
+				style={ {
+					height: 250,
+					border: '1px solid black',
+				} }
+			>
+				<NavigatorScreen
+					path="/"
+					style={ {
+						height: '100%',
+					} }
+				>
+					<h1>Home screen</h1>
+					<NavigatorButton variant="secondary" path="/child">
+						Go to child screen.
+					</NavigatorButton>
+				</NavigatorScreen>
+				<NavigatorScreen
+					path="/child"
+					style={ {
+						height: '100%',
+					} }
+				>
+					<h2>Child screen</h2>
+					<NavigatorToParentButton variant="secondary">
+						Go to parent screen.
+					</NavigatorToParentButton>
+				</NavigatorScreen>
+			</div>
+
+			<NavigatorButtonWithSkipFocus
+				variant="secondary"
+				path="/child"
+				style={ { margin: '1rem 2rem' } }
+			>
+				Go to child screen, but keep focus on this button
+			</NavigatorButtonWithSkipFocus>
+		</>
+	),
+};

package/src/navigator/test/index.tsx

@@ -22,6 +22,7 @@ import {
 	NavigatorToParentButton,
 	useNavigator,
 } from '..';
+import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
 	raw: ' "\'><=invalid_path',
@@ -57,6 +58,7 @@ const BUTTON_TEXT = {
 		'Navigate to screen with an invalid HTML value as a path.',
 	back: 'Go back',
 	backUsingGoTo: 'Go back using goTo',
+	goToWithSkipFocus: 'Go to with skipFocus',
 };
 
 type CustomTestOnClickHandler = (
@@ -64,6 +66,7 @@ type CustomTestOnClickHandler = (
 		| {
 				type: 'goTo';
 				path: string;
+				options?: NavigateOptions;
 		  }
 		| { type: 'goBack' }
 		| { type: 'goToParent' }
@@ -108,6 +111,26 @@ function CustomNavigatorGoToBackButton( {
 	);
 }
 
+function CustomNavigatorGoToSkipFocusButton( {
+	path,
+	onClick,
+	...props
+}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goTo } = useNavigator();
+	return (
+		<Button
+			onClick={ () => {
+				goTo( path, { skipFocus: true } );
+				// Used to spy on the values passed to `navigator.goTo`.
+				onClick?.( { type: 'goTo', path } );
+			} }
+			{ ...props }
+		/>
+	);
+}
+
 function CustomNavigatorBackButton( {
 	onClick,
 	...props
@@ -342,6 +365,12 @@ const MyHierarchicalNavigation = ( {
 						{ BUTTON_TEXT.backUsingGoTo }
 					</CustomNavigatorGoToBackButton>
 				</NavigatorScreen>
+				<CustomNavigatorGoToSkipFocusButton
+					path={ PATHS.NESTED }
+					onClick={ onNavigatorButtonClick }
+				>
+					{ BUTTON_TEXT.goToWithSkipFocus }
+				</CustomNavigatorGoToSkipFocusButton>
 			</NavigatorProvider>
 		</>
 	);
@@ -716,6 +745,29 @@ describe( 'Navigator', () => {
 			await user.click( getNavigationButton( 'back' ) );
 			expect( getNavigationButton( 'toChildScreen' ) ).toHaveFocus();
 		} );
+
+		it( 'should skip focus based on location `skipFocus` option', async () => {
+			const user = userEvent.setup();
+			render( <MyHierarchicalNavigation /> );
+
+			// Navigate to child screen with skipFocus.
+			await user.click( getNavigationButton( 'goToWithSkipFocus' ) );
+			expect( queryScreen( 'home' ) ).not.toBeInTheDocument();
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+
+			// The clicked button should remain focused.
+			expect( getNavigationButton( 'goToWithSkipFocus' ) ).toHaveFocus();
+
+			// Navigate back to parent screen.
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			// The first tabbable element receives focus.
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
+		} );
 	} );
 
 	describe( 'animation', () => {

package/src/navigator/types.ts

@@ -10,9 +10,10 @@ import type { ButtonAsButtonProps } from '../button/types';
 
 export type MatchParams = Record< string, string | string[] >;
 
-type NavigateOptions = {
+export type NavigateOptions = {
 	focusTargetSelector?: string;
 	isBack?: boolean;
+	skipFocus?: boolean;
 };
 
 export type NavigatorLocation = NavigateOptions & {

package/src/popover/index.tsx

@@ -109,10 +109,6 @@ const AnimatedWrapper = forwardRef(
 		}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
 		forwardedRef: ForwardedRef< any >
 	) => {
-		// When animating, animate only once (i.e. when the popover is opened), and
-		// do not animate on subsequent prop changes (as it conflicts with
-		// floating-ui's positioning updates).
-		const [ hasAnimatedOnce, setHasAnimatedOnce ] = useState( false );
 		const shouldReduceMotion = useReducedMotion();
 
 		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
@@ -120,11 +116,6 @@ const AnimatedWrapper = forwardRef(
 			[ placement ]
 		);
 
-		const onAnimationComplete = useCallback(
-			() => setHasAnimatedOnce( true ),
-			[]
-		);
-
 		const computedAnimationProps: HTMLMotionProps< 'div' > =
 			shouldAnimate && ! shouldReduceMotion
 				? {
@@ -133,10 +124,6 @@ const AnimatedWrapper = forwardRef(
 							...receivedInlineStyles,
 						},
 						...otherMotionProps,
-						onAnimationComplete,
-						animate: hasAnimatedOnce
-							? false
-							: otherMotionProps.animate,
 				  }
 				: {
 						animate: false,
@@ -160,8 +147,8 @@ const UnforwardedPopover = (
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
 		// expected by `framer-motion`, omit all framer motion props from popover
-		// props (except for `animate`, which is re-defined in `PopoverProps`).
-		keyof Omit< MotionProps, 'animate' >
+		// props (except for `animate` and `children`, which are re-defined in `PopoverProps`).
+		keyof Omit< MotionProps, 'animate' | 'children' >
 	>,
 	forwardedRef: ForwardedRef< any >
 ) => {

package/src/{private-apis.js → private-apis.ts}

@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
  */
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
+import { createPrivateSlotFill } from './slot-fill';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -19,4 +20,5 @@ export const privateApis = {};
 lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
+	createPrivateSlotFill,
 } );

package/src/query-controls/author-select.tsx

@@ -27,6 +27,7 @@ export default function AuthorSelect( {
 					? String( selectedAuthorId )
 					: undefined
 			}
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/query-controls/category-select.tsx

@@ -36,6 +36,7 @@ export default function CategorySelect( {
 					: undefined
 			}
 			{ ...props }
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/query-controls/index.tsx

@@ -11,6 +11,7 @@ import CategorySelect from './category-select';
 import FormTokenField from '../form-token-field';
 import RangeControl from '../range-control';
 import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
 import type {
 	QueryControlsProps,
 	QueryControlsWithMultipleCategorySelectionProps,
@@ -75,7 +76,7 @@ export function QueryControls( {
 	...props
 }: QueryControlsProps ) {
 	return (
-		<>
+		<VStack spacing="4" className="components-query-controls">
 			{ [
 				onOrderChange && onOrderByChange && (
 					<SelectControl
@@ -142,6 +143,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
+							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
 							value={
@@ -185,7 +187,7 @@ export function QueryControls( {
 					/>
 				),
 			] }
-		</>
+		</VStack>
 	);
 }
 

package/src/sandbox/index.native.js

@@ -14,6 +14,8 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	forwardRef,
+	useCallback,
 } from '@wordpress/element';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
@@ -98,7 +100,6 @@ const observeAndResizeJS = `
 		// get an DOM mutations for that, so do the resize when the window is resized, too.
 		window.addEventListener( 'resize', sendResize, true );
 		window.addEventListener( 'orientationchange', sendResize, true );
-		widow.addEventListener( 'click', sendResize, true );
 	})();
 `;
 
@@ -171,20 +172,24 @@ const style = `
 
 const EMPTY_ARRAY = [];
 
-function Sandbox( {
-	containerStyle,
-	customJS,
-	html = '',
-	lang = 'en',
-	providerUrl = '',
-	scripts = EMPTY_ARRAY,
-	styles = EMPTY_ARRAY,
-	title = '',
-	type,
-	url,
-} ) {
+const Sandbox = forwardRef( function Sandbox(
+	{
+		containerStyle,
+		customJS,
+		html = '',
+		lang = 'en',
+		providerUrl = '',
+		scripts = EMPTY_ARRAY,
+		styles = EMPTY_ARRAY,
+		title = '',
+		type,
+		url,
+		onWindowEvents = {},
+		viewportProps = '',
+	},
+	ref
+) {
 	const colorScheme = usePreferredColorScheme();
-	const ref = useRef();
 	const [ height, setHeight ] = useState( 0 );
 	const [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );
 
@@ -209,13 +214,19 @@ function Sandbox( {
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram
 		// that expect the scripts to be part of the body.
+
+		// Avoid comma issues with props.viewportProps.
+		const addViewportProps = viewportProps
+			.trim()
+			.replace( /(^[^,])/, ', $1' );
+
 		const htmlDoc = (
 			<html lang={ lang }>
 				<head>
 					<title>{ title }</title>
 					<meta
 						name="viewport"
-						content="width=device-width, initial-scale=1"
+						content={ `width=device-width, initial-scale=1${ addViewportProps }` }
 					></meta>
 					<style dangerouslySetInnerHTML={ { __html: style } } />
 					{ styles.map( ( rules, i ) => (
@@ -239,6 +250,21 @@ function Sandbox( {
 		return '<!DOCTYPE html>' + renderToString( htmlDoc );
 	}
 
+	const getInjectedJavaScript = useCallback( () => {
+		// Allow parent to override the resize observers with prop.customJS (legacy support)
+		let injectedJS = customJS || observeAndResizeJS;
+
+		// Add any event listeners that were passed in.
+		Object.keys( onWindowEvents ).forEach( ( eventType ) => {
+			injectedJS += `
+				window.addEventListener( '${ eventType }', function( event ) {
+					window.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );
+				});`;
+		} );
+
+		return injectedJS;
+	}, [ customJS, onWindowEvents ] );
+
 	function updateContentHtml( forceRerender = false ) {
 		const newContentHtml = getHtmlDoc();
 
@@ -253,25 +279,6 @@ function Sandbox( {
 		}
 	}
 
-	function checkMessageForResize( event ) {
-		// Attempt to parse the message data as JSON if passed as string.
-		let data = event.nativeEvent.data || {};
-
-		if ( 'string' === typeof data ) {
-			try {
-				data = JSON.parse( data );
-			} catch ( e ) {}
-		}
-
-		// Update the state only if the message is formatted as we expect,
-		// i.e. as an object with a 'resize' action.
-		if ( 'resize' !== data.action ) {
-			return;
-		}
-
-		setHeight( data.height );
-	}
-
 	function getSizeStyle() {
 		const contentHeight = Math.ceil( height );
 
@@ -282,6 +289,39 @@ function Sandbox( {
 		setIsLandscape( dimensions.window.width >= dimensions.window.height );
 	}
 
+	const onMessage = useCallback(
+		( message ) => {
+			let data = message?.nativeEvent?.data;
+
+			try {
+				data = JSON.parse( data );
+			} catch ( e ) {
+				return;
+			}
+
+			// check for resize event
+			if ( 'resize' === data?.action ) {
+				setHeight( data.height );
+			}
+
+			// Forward the event to parent event listeners
+			Object.keys( onWindowEvents ).forEach( ( eventType ) => {
+				if ( data?.type === eventType ) {
+					try {
+						onWindowEvents[ eventType ]( data );
+					} catch ( e ) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							`Error handling event ${ eventType }`,
+							e
+						);
+					}
+				}
+			} );
+		},
+		[ onWindowEvents ]
+	);
+
 	useEffect( () => {
 		const dimensionsChangeSubscription = Dimensions.addEventListener(
 			'change',
@@ -314,7 +354,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
-			injectedJavaScript={ customJS || observeAndResizeJS }
+			injectedJavaScript={ getInjectedJavaScript() }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }
@@ -326,14 +366,15 @@ function Sandbox( {
 				getSizeStyle(),
 				Platform.isAndroid && workaroundStyles.webView,
 			] }
-			onMessage={ checkMessageForResize }
+			onMessage={ onMessage }
 			scrollEnabled={ false }
 			setBuiltInZoomControls={ false }
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
+			mediaPlaybackRequiresUserAction={ false }
 		/>
 	);
-}
+} );
 
 const workaroundStyles = StyleSheet.create( {
 	webView: {

package/src/slot-fill/index.js

@@ -44,13 +44,14 @@ export function Provider( { children, ...props } ) {
 	);
 }
 
-export function createSlotFill( name ) {
-	const FillComponent = ( props ) => <Fill name={ name } { ...props } />;
-	FillComponent.displayName = name + 'Fill';
+export function createSlotFill( key ) {
+	const baseName = typeof key === 'symbol' ? key.description : key;
+	const FillComponent = ( props ) => <Fill name={ key } { ...props } />;
+	FillComponent.displayName = `${ baseName }Fill`;
 
-	const SlotComponent = ( props ) => <Slot name={ name } { ...props } />;
-	SlotComponent.displayName = name + 'Slot';
-	SlotComponent.__unstableName = name;
+	const SlotComponent = ( props ) => <Slot name={ key } { ...props } />;
+	SlotComponent.displayName = `${ baseName }Slot`;
+	SlotComponent.__unstableName = key;
 
 	return {
 		Fill: FillComponent,
@@ -58,4 +59,11 @@ export function createSlotFill( name ) {
 	};
 }
 
+export const createPrivateSlotFill = ( name ) => {
+	const privateKey = Symbol( name );
+	const privateSlotFill = createSlotFill( privateKey );
+
+	return { privateKey, ...privateSlotFill };
+};
+
 export { useSlot };

package/src/snackbar/style.scss

@@ -64,7 +64,8 @@
 		}
 
 		&:hover {
-			color: $components-color-accent;
+			text-decoration: none;
+			color: $white;
 		}
 	}
 }

package/src/spinner/styles.ts

@@ -26,6 +26,8 @@ export const StyledSpinner = styled.svg`
 	position: relative;
 	color: ${ COLORS.ui.theme };
 	overflow: visible;
+	opacity: 1;
+	background-color: transparent;
 `;
 
 const commonPathProps = css`

package/src/tree-grid/index.tsx

@@ -91,7 +91,8 @@ function UnforwardedTreeGrid(
 			const canExpandCollapse = 0 === currentColumnIndex;
 			const cannotFocusNextColumn =
 				canExpandCollapse &&
-				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				( activeRow.getAttribute( 'data-expanded' ) === 'false' ||
+					activeRow.getAttribute( 'aria-expanded' ) === 'false' ) &&
 				keyCode === RIGHT;
 
 			if ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {
@@ -112,6 +113,8 @@ function UnforwardedTreeGrid(
 						// Left:
 						// If a row is focused, and it is expanded, collapses the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'true' ||
 							activeRow.getAttribute( 'aria-expanded' ) === 'true'
 						) {
 							onCollapseRow( activeRow );
@@ -151,8 +154,10 @@ function UnforwardedTreeGrid(
 						// Right:
 						// If a row is focused, and it is collapsed, expands the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'false' ||
 							activeRow.getAttribute( 'aria-expanded' ) ===
-							'false'
+								'false'
 						) {
 							onExpandRow( activeRow );
 							event.preventDefault();

package/src/ui/context/wordpress-component.ts

@@ -44,7 +44,7 @@ export type WordPressComponent<
 	 * We restrict it to a class to align with the already existing class names that
 	 * are generated by the context system.
 	 */
-	selector: `.${ string }`;
+	selector?: `.${ string }`;
 };
 
 export type WordPressComponentFromProps<

package/src/view/component.tsx

@@ -27,10 +27,10 @@ import type { ViewProps } from './types';
  * }
  * ```
  */
-// @ts-expect-error
 export const View: WordPressComponent<
 	'div',
-	ViewProps & RefAttributes< any >
+	ViewProps & RefAttributes< any >,
+	true
 > = styled.div``;
 
 View.selector = '.components-view';

package/tsconfig.json

@@ -12,8 +12,8 @@
 			"snapshot-diff",
 			"@wordpress/jest-console"
 		],
-		// Some errors in Reakit types with TypeScript 4.3
-		// Remove the following line when they've been addressed.
+		// TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable
+		// between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`.
 		"skipLibCheck": true,
 		"strictNullChecks": true
 	},
@@ -43,7 +43,6 @@
 		"src/**/*.native.js",
 		"src/**/react-native-*",
 		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
-		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
-		"src/index.js"
+		"src/**/test/**/*.js" // only exclude js files, ts{x} files should be checked
 	]
 }