@wordpress/components 21.1.0 → 21.2.0

package/src/mobile/segmented-control/index.native.js

@@ -74,12 +74,18 @@ const SegmentedControls = ( {
 	useEffect( () => {
 		setActiveSegmentIndex( selectedSegmentIndex );
 		segmentHandler( segments[ selectedSegmentIndex ] );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useEffect( () => {
 		positionAnimationValue.setValue(
 			calculateEndValue( activeSegmentIndex )
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ segmentsDimensions ] );
 
 	const containerStyle = usePreferredColorSchemeStyle(

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -78,6 +78,9 @@ const useConvertUnitToMobile = ( value, unit ) => {
 		return () => {
 			dimensionsChangeSubscription.remove();
 		};
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const onDimensionsChange = useCallback( ( { window } ) => {
@@ -94,6 +97,9 @@ const useConvertUnitToMobile = ( value, unit ) => {
 			valueToConvert,
 			valueUnit
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ windowSizes, value, unit ] );
 };
 

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

@@ -83,6 +83,14 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 			return;
 		}
 
+		const activeElement = wrapperRef.current.ownerDocument.activeElement;
+
+		// If an element is already focused within the wrapper do not focus the
+		// element. This prevents inputs or buttons from losing focus unecessarily.
+		if ( wrapperRef.current.contains( activeElement ) ) {
+			return;
+		}
+
 		let elementToFocus: HTMLElement | null = null;
 
 		// When navigating back, if a selector is provided, use it to look for the
@@ -99,7 +107,6 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 			const firstTabbable = (
 				focus.tabbable.find( wrapperRef.current ) as HTMLElement[]
 			 )[ 0 ];
-
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 

package/src/navigator/test/index.js

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -86,60 +92,74 @@ function CustomNavigatorBackButton( { onClick, ...props } ) {
 const MyNavigation = ( {
 	initialPath = PATHS.HOME,
 	onNavigatorButtonClick,
-} ) => (
-	<NavigatorProvider initialPath={ initialPath }>
-		<NavigatorScreen path={ PATHS.HOME }>
-			<p>This is the home screen.</p>
-			<CustomNavigatorButton
-				path={ PATHS.NOT_FOUND }
-				onClick={ onNavigatorButtonClick }
-			>
-				Navigate to non-existing screen.
-			</CustomNavigatorButton>
-			<CustomNavigatorButton
-				path={ PATHS.CHILD }
-				onClick={ onNavigatorButtonClick }
-			>
-				Navigate to child screen.
-			</CustomNavigatorButton>
-			<CustomNavigatorButton
-				path={ PATHS.INVALID_HTML_ATTRIBUTE }
-				onClick={ onNavigatorButtonClick }
-			>
-				Navigate to screen with an invalid HTML value as a path.
-			</CustomNavigatorButton>
-		</NavigatorScreen>
-
-		<NavigatorScreen path={ PATHS.CHILD }>
-			<p>This is the child screen.</p>
-			<CustomNavigatorButtonWithFocusRestoration
-				path={ PATHS.NESTED }
-				onClick={ onNavigatorButtonClick }
-			>
-				Navigate to nested screen.
-			</CustomNavigatorButtonWithFocusRestoration>
-			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
-				Go back
-			</CustomNavigatorBackButton>
-		</NavigatorScreen>
-
-		<NavigatorScreen path={ PATHS.NESTED }>
-			<p>This is the nested screen.</p>
-			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
-				Go back
-			</CustomNavigatorBackButton>
-		</NavigatorScreen>
-
-		<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
-			<p>This is the screen with an invalid HTML value as a path.</p>
-			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
-				Go back
-			</CustomNavigatorBackButton>
-		</NavigatorScreen>
-
-		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-	</NavigatorProvider>
-);
+} ) => {
+	const [ inputValue, setInputValue ] = useState( '' );
+	return (
+		<NavigatorProvider initialPath={ initialPath }>
+			<NavigatorScreen path={ PATHS.HOME }>
+				<p>This is the home screen.</p>
+				<CustomNavigatorButton
+					path={ PATHS.NOT_FOUND }
+					onClick={ onNavigatorButtonClick }
+				>
+					Navigate to non-existing screen.
+				</CustomNavigatorButton>
+				<CustomNavigatorButton
+					path={ PATHS.CHILD }
+					onClick={ onNavigatorButtonClick }
+				>
+					Navigate to child screen.
+				</CustomNavigatorButton>
+				<CustomNavigatorButton
+					path={ PATHS.INVALID_HTML_ATTRIBUTE }
+					onClick={ onNavigatorButtonClick }
+				>
+					Navigate to screen with an invalid HTML value as a path.
+				</CustomNavigatorButton>
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ PATHS.CHILD }>
+				<p>This is the child screen.</p>
+				<CustomNavigatorButtonWithFocusRestoration
+					path={ PATHS.NESTED }
+					onClick={ onNavigatorButtonClick }
+				>
+					Navigate to nested screen.
+				</CustomNavigatorButtonWithFocusRestoration>
+				<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
+					Go back
+				</CustomNavigatorBackButton>
+
+				<label htmlFor="test-input">This is a test input</label>
+				<input
+					name="test-input"
+					// eslint-disable-next-line no-restricted-syntax
+					id="test-input"
+					onChange={ ( e ) => {
+						setInputValue( e.target.value );
+					} }
+					value={ inputValue }
+				/>
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ PATHS.NESTED }>
+				<p>This is the nested screen.</p>
+				<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
+					Go back
+				</CustomNavigatorBackButton>
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+				<p>This is the screen with an invalid HTML value as a path.</p>
+				<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
+					Go back
+				</CustomNavigatorBackButton>
+			</NavigatorScreen>
+
+			{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
+		</NavigatorProvider>
+	);
+};
 
 const getNavigationScreenByText = ( text, { throwIfNotFound = true } = {} ) => {
 	const fnName = throwIfNotFound ? 'getByText' : 'queryByText';
@@ -194,6 +214,28 @@ const getBackButton = ( { throwIfNotFound } = {} ) =>
 	} );
 
 describe( 'Navigator', () => {
+	const originalGetClientRects = window.Element.prototype.getClientRects;
+
+	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
+	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
+	const mockedGetClientRects = jest.fn( () => [
+		{
+			x: 0,
+			y: 0,
+			width: 100,
+			height: 100,
+		},
+	] );
+
+	beforeAll( () => {
+		window.Element.prototype.getClientRects =
+			jest.fn( mockedGetClientRects );
+	} );
+
+	afterAll( () => {
+		window.Element.prototype.getClientRects = originalGetClientRects;
+	} );
+
 	it( 'should render', () => {
 		render( <MyNavigation /> );
 
@@ -404,4 +446,27 @@ describe( 'Navigator', () => {
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToInvalidHTMLPathScreenButton() ).toHaveFocus();
 	} );
+
+	it( 'should keep focus on the element that is being interacted with, while re-rendering', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render( <MyNavigation /> );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect( getToChildScreenButton() ).toBeInTheDocument();
+
+		// Navigate to child screen.
+		await user.click( getToChildScreenButton() );
+
+		expect( getChildScreen() ).toBeInTheDocument();
+		expect( getBackButton() ).toBeInTheDocument();
+		expect( getToNestedScreenButton() ).toHaveFocus();
+
+		// Interact with the input, the focus should stay on the input element.
+		const input = screen.getByLabelText( 'This is a test input' );
+		await user.type( input, 'd' );
+		expect( input ).toHaveFocus();
+	} );
 } );

package/src/notice/index.native.js

@@ -14,7 +14,7 @@ import { BlurView } from '@react-native-community/blur';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, Platform } from '@wordpress/element';
+import { useEffect, useRef, useCallback, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -30,40 +30,37 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 	const timer = useRef( null );
 
 	useEffect( () => {
-		startAnimation();
-
-		return () => {
-			clearTimeout( timer?.current );
-		};
-	}, [] );
-
-	function onHide() {
+		// start animation
 		Animated.timing( animationValue, {
-			toValue: 0,
-			duration: 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
 		} ).start( ( { finished } ) => {
 			if ( finished && onNoticeHidden ) {
-				onNoticeHidden( id );
+				timer.current = setTimeout( () => {
+					onHide();
+				}, HIDE_TIMER );
 			}
 		} );
-	}
 
-	function startAnimation() {
+		return () => {
+			clearTimeout( timer?.current );
+		};
+	}, [ animationValue, onHide, onNoticeHidden ] );
+
+	const onHide = useCallback( () => {
 		Animated.timing( animationValue, {
-			toValue: 1,
-			duration: 300,
+			toValue: 0,
+			duration: 150,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
 		} ).start( ( { finished } ) => {
 			if ( finished && onNoticeHidden ) {
-				timer.current = setTimeout( () => {
-					onHide();
-				}, HIDE_TIMER );
+				onNoticeHidden( id );
 			}
 		} );
-	}
+	}, [ animationValue, onNoticeHidden, id ] );
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,

package/src/notice/list.native.js

@@ -14,6 +14,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import Notice from './';
 import styles from './style.scss';
+import { useCallback } from '@wordpress/element';
 
 function NoticeList() {
 	const { notices } = useSelect( ( select ) => {
@@ -25,9 +26,12 @@ function NoticeList() {
 
 	const { removeNotice } = useDispatch( noticesStore );
 
-	function onRemoveNotice( id ) {
-		removeNotice( id );
-	}
+	const onRemoveNotice = useCallback(
+		( id ) => {
+			removeNotice( id );
+		},
+		[ removeNotice ]
+	);
 
 	if ( ! notices.length ) {
 		return null;

package/src/palette-edit/index.js

@@ -316,7 +316,7 @@ export default function PaletteEdit( {
 			<PaletteHStackHeader>
 				<PaletteHeading>{ paletteLabel }</PaletteHeading>
 				<PaletteActionsContainer>
-					{ isEditing && (
+					{ hasElements && isEditing && (
 						<DoneButton
 							isSmall
 							onClick={ () => {

package/src/placeholder/style.scss

@@ -178,9 +178,9 @@
 	min-width: 100px;
 
 	// Blur the background so layered dashed placeholders are still visually separate.
-	// We also provide a semitransparent background so as to allow duotones to sheen through.
+	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
 	backdrop-filter: blur(100px);
-	background-color: rgba($white, 0.1);
+	background-color: transparent;
 
 	// Invert the colors in themes deemed dark.
 	.is-dark-theme & {
@@ -234,5 +234,5 @@
 	width: 100%;
 	height: 100%;
 	stroke: currentColor;
-	stroke-dasharray: 3;
+	opacity: 0.25;
 }

package/src/popover/index.tsx

@@ -10,9 +10,9 @@ import {
 	autoUpdate,
 	arrow,
 	offset as offsetMiddleware,
-	limitShift,
 	size,
 	Middleware,
+	MiddlewareArguments,
 } from '@floating-ui/react-dom';
 // eslint-disable-next-line no-restricted-imports
 import {
@@ -34,7 +34,6 @@ import {
 	useMemo,
 	useState,
 	useCallback,
-	useEffect,
 } from '@wordpress/element';
 import {
 	useViewportMatch,
@@ -65,6 +64,7 @@ import type {
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
+import { limitShift as customLimitShift } from './limit-shift';
 
 /**
  * Name of slot in which popover should fill.
@@ -281,42 +281,31 @@ const UnforwardedPopover = (
 	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
 	 */
 	const frameOffsetRef = useRef( getFrameOffset( referenceOwnerDocument ) );
-	/**
-	 * Store the offset prop in a ref, due to constraints with floating-ui:
-	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
-	 */
-	const offsetRef = useRef( offsetProp );
 
 	const middleware = [
-		offsetMiddleware( ( { placement: currentPlacement } ) => {
-			if ( ! frameOffsetRef.current ) {
-				return offsetRef.current;
-			}
-
-			const isTopBottomPlacement =
-				currentPlacement.includes( 'top' ) ||
-				currentPlacement.includes( 'bottom' );
-
-			// The main axis should represent the gap between the
-			// floating element and the reference element. The cross
-			// axis is always perpendicular to the main axis.
-			const mainAxis = isTopBottomPlacement ? 'y' : 'x';
-			const crossAxis = mainAxis === 'x' ? 'y' : 'x';
-
-			// When the popover is before the reference, subtract the offset,
-			// of the main axis else add it.
-			const hasBeforePlacement =
-				currentPlacement.includes( 'top' ) ||
-				currentPlacement.includes( 'left' );
-			const mainAxisModifier = hasBeforePlacement ? -1 : 1;
-
-			return {
-				mainAxis:
-					offsetRef.current +
-					frameOffsetRef.current[ mainAxis ] * mainAxisModifier,
-				crossAxis: frameOffsetRef.current[ crossAxis ],
-			};
-		} ),
+		// Custom middleware which adjusts the popover's position by taking into
+		// account the offset of the anchor's iframe (if any) compared to the page.
+		{
+			name: 'frameOffset',
+			fn( { x, y }: MiddlewareArguments ) {
+				if ( ! frameOffsetRef.current ) {
+					return {
+						x,
+						y,
+					};
+				}
+
+				return {
+					x: x + frameOffsetRef.current.x,
+					y: y + frameOffsetRef.current.y,
+					data: {
+						// This will be used in the customLimitShift() function.
+						amount: frameOffsetRef.current,
+					},
+				};
+			},
+		},
+		offsetMiddleware( offsetProp ),
 		computedFlipProp ? flipMiddleware() : undefined,
 		computedResizeProp
 			? size( {
@@ -339,7 +328,7 @@ const UnforwardedPopover = (
 		shouldShift
 			? shiftMiddleware( {
 					crossAxis: true,
-					limiter: limitShift(),
+					limiter: customLimitShift(),
 					padding: 1, // Necessary to avoid flickering at the edge of the viewport.
 			  } )
 			: undefined,
@@ -395,11 +384,6 @@ const UnforwardedPopover = (
 			} ),
 	} );
 
-	useEffect( () => {
-		offsetRef.current = offsetProp;
-		update();
-	}, [ offsetProp, update ] );
-
 	const arrowCallbackRef = useCallback(
 		( node ) => {
 			arrowRef.current = node;