@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.2.0

package/src/font-size-picker/types.ts

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type FontSizePickerProps = {
+	/**
+	 * If `true`, it will not be possible to choose a custom fontSize. The user
+	 * will be forced to pick one of the pre-defined sizes passed in fontSizes.
+	 *
+	 * @default false
+	 */
+	disableCustomFontSizes?: boolean;
+	/**
+	 * If no value exists, this prop defines the starting position for the font
+	 * size picker slider. Only relevant if `withSlider` is `true`.
+	 */
+	fallbackFontSize?: number;
+	/**
+	 * An array of font size objects. The object should contain properties size,
+	 * name, and slug.
+	 */
+	fontSizes?: FontSize[];
+	/**
+	 * A function that receives the new font size value.
+	 * If onChange is called without any parameter, it should reset the value,
+	 * attending to what reset means in that context, e.g., set the font size to
+	 * undefined or set the font size a starting value.
+	 */
+	onChange?: ( value: number | string | undefined ) => void;
+	/**
+	 * The current font size value.
+	 */
+	value?: number | string;
+	/**
+	 * If `true`, the UI will contain a slider, instead of a numeric text input
+	 * field. If `false`, no slider will be present.
+	 *
+	 * @default false
+	 */
+	withSlider?: boolean;
+	/**
+	 * If `true`, a reset button will be displayed alongside the input field
+	 * when a custom font size is active. Has no effect when
+	 * `disableCustomFontSizes` or `withSlider` is `true`.
+	 *
+	 * @default true
+	 */
+	withReset?: boolean;
+	/**
+	 * Start opting into the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Size of the control.
+	 *
+	 * @default default
+	 */
+	size?: 'default' | '__unstable-large';
+};
+
+export type FontSize = {
+	/**
+	 * The property `size` contains a number with the font size value, in `px` or
+	 * a string specifying the font size CSS property that should be used eg:
+	 * "13px", "1em", or "clamp(12px, 5vw, 100px)".
+	 */
+	size: number | string;
+	/**
+	 * The `name` property includes a label for that font size e.g.: `Small`.
+	 */
+	name?: string;
+	/**
+	 * The `slug` property is a string with a unique identifier for the font
+	 * size. Used for the class generation process.
+	 */
+	slug: string;
+};
+
+export type FontSizeOption = Omit< FontSize, 'size' > &
+	Partial< Pick< FontSize, 'size' > >;
+
+export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
+	key: string;
+	name?: string;
+	__experimentalHint: ReactNode;
+};
+
+export type FontSizeToggleGroupOption = {
+	key: string;
+	value: number | string;
+	label: string;
+	name: string;
+};

package/src/font-size-picker/{utils.js → utils.ts}

@@ -3,6 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type {
+	FontSize,
+	FontSizeOption,
+	FontSizeSelectOption,
+	FontSizeToggleGroupOption,
+	FontSizePickerProps,
+} from './types';
+
 const DEFAULT_FONT_SIZE = 'default';
 const DEFAULT_FONT_SIZE_OPTION = {
 	slug: DEFAULT_FONT_SIZE,
@@ -36,13 +47,18 @@ const FONT_SIZES_ALIASES = [
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
  *
- * @param {string|number} size Font size.
- * @return {[number, string]} An array with the numeric value and the unit if exists.
+ * @param  size Font size.
+ * @return An array with the numeric value and the unit if exists.
  */
-export function splitValueAndUnitFromSize( size ) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g );
+export function splitValueAndUnitFromSize(
+	size: NonNullable< FontSizePickerProps[ 'value' ] >
+) {
+	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
 
-	if ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {
+	if (
+		! isNaN( parseFloat( numericValue ) ) &&
+		isFinite( Number( numericValue ) )
+	) {
 		return [ numericValue, unit ];
 	}
 
@@ -53,28 +69,30 @@ export function splitValueAndUnitFromSize( size ) {
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
  *
- * @param {string|number} value The value that is checked.
- * @return {boolean} Whether the value is a simple css value.
+ * @param  value The value that is checked.
+ * @return Whether the value is a simple css value.
  */
-export function isSimpleCssValue( value ) {
+export function isSimpleCssValue(
+	value: NonNullable< FontSizePickerProps[ 'value' ] >
+) {
 	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
-	return sizeRegex.test( value );
+	return sizeRegex.test( String( value ) );
 }
 
 /**
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl       Whether to use a select control.
- * @param {Object[]} optionsArray           Array of available font sizes objects.
- * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
- * @return {Object[]|null}                  Array of font sizes in proper format for the used control.
+ * @param  useSelectControl       Whether to use a select control.
+ * @param  optionsArray           Array of available font sizes objects.
+ * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
-	useSelectControl,
-	optionsArray,
-	disableCustomFontSizes
-) {
+	useSelectControl: boolean,
+	optionsArray: FontSize[],
+	disableCustomFontSizes: boolean
+): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
@@ -83,8 +101,11 @@ export function getFontSizeOptions(
 		: getToggleGroupOptions( optionsArray );
 }
 
-function getSelectOptions( optionsArray, disableCustomFontSizes ) {
-	const options = [
+function getSelectOptions(
+	optionsArray: FontSize[],
+	disableCustomFontSizes: boolean
+): FontSizeSelectOption[] {
+	const options: FontSizeOption[] = [
 		DEFAULT_FONT_SIZE_OPTION,
 		...optionsArray,
 		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
@@ -94,21 +115,21 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 		name,
 		size,
 		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseFloat( size ),
+			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
 	} ) );
 }
 
 /**
  * Build options for the toggle group options.
  *
- * @param {Array}    optionsArray An array of font size options.
- * @param {string[]} labelAliases An array of alternative labels.
- * @return {Array}   Remapped optionsArray.
+ * @param  optionsArray An array of font size options.
+ * @param  labelAliases An array of alternative labels.
+ * @return Remapped optionsArray.
  */
 export function getToggleGroupOptions(
-	optionsArray,
-	labelAliases = FONT_SIZES_ALIASES
-) {
+	optionsArray: FontSize[],
+	labelAliases: string[] = FONT_SIZES_ALIASES
+): FontSizeToggleGroupOption[] {
 	return optionsArray.map( ( { slug, size, name }, index ) => {
 		return {
 			key: slug,
@@ -119,7 +140,10 @@ export function getToggleGroupOptions(
 	} );
 }
 
-export function getSelectedOption( fontSizes, value ) {
+export function getSelectedOption(
+	fontSizes: FontSize[],
+	value: FontSizePickerProps[ 'value' ]
+): FontSizeOption {
 	if ( ! value ) {
 		return DEFAULT_FONT_SIZE_OPTION;
 	}

package/src/form-token-field/test/index.tsx

@@ -2057,7 +2057,12 @@ describe( 'FormTokenField', () => {
 
 			const suggestions = [ 'Pine', 'Pistachio', 'Sage' ];
 
-			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+			render(
+				<>
+					<FormTokenFieldWithState suggestions={ suggestions } />
+					<button>Click me</button>
+				</>
+			);
 
 			// No suggestions visible
 			const input = screen.getByRole( 'combobox' );
@@ -2093,6 +2098,22 @@ describe( 'FormTokenField', () => {
 				pineSuggestion.id
 			);
 
+			// Blur the input and make sure that the `aria-activedescendant`
+			// is removed
+			const button = screen.getByRole( 'button', { name: 'Click me' } );
+
+			await user.click( button );
+
+			expect( input ).not.toHaveAttribute( 'aria-activedescendant' );
+
+			// Focus the input again, `aria-activedescendant` should be added back.
+			await user.click( input );
+
+			expect( input ).toHaveAttribute(
+				'aria-activedescendant',
+				pineSuggestion.id
+			);
+
 			// Add the suggestion, which hides the list
 			await user.keyboard( '[Enter]' );
 

package/src/form-token-field/token-input.tsx

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ChangeEvent, ForwardedRef } from 'react';
+import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,9 +26,13 @@ export function UnForwardedTokenInput(
 		selectedSuggestionIndex,
 		className,
 		onChange,
+		onFocus,
+		onBlur,
 		...restProps
 	} = props;
 
+	const [ hasFocus, setHasFocus ] = useState( false );
+
 	const size = value ? value.length + 1 : 0;
 
 	const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
@@ -39,6 +43,18 @@ export function UnForwardedTokenInput(
 		}
 	};
 
+	const onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
+		setHasFocus( true );
+		onFocus?.( e );
+	};
+
+	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
+		e
+	) => {
+		setHasFocus( false );
+		onBlur?.( e );
+	};
+
 	return (
 		<input
 			ref={ ref }
@@ -47,6 +63,8 @@ export function UnForwardedTokenInput(
 			{ ...restProps }
 			value={ value || '' }
 			onChange={ onChangeHandler }
+			onFocus={ onFocusHandler }
+			onBlur={ onBlurHandler }
 			size={ size }
 			className={ classnames(
 				className,
@@ -62,7 +80,11 @@ export function UnForwardedTokenInput(
 					: undefined
 			}
 			aria-activedescendant={
-				selectedSuggestionIndex !== -1
+				// Only add the `aria-activedescendant` attribute when:
+				// - the user is actively interacting with the input (`hasFocus`)
+				// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
+				// - the list of suggestions are rendered in the DOM (`isExpanded`)
+				hasFocus && selectedSuggestionIndex !== -1 && isExpanded
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}

package/src/index.js

@@ -188,6 +188,7 @@ export {
 	Fill,
 	Provider as SlotFillProvider,
 	useSlot as __experimentalUseSlot,
+	useSlotFills as __experimentalUseSlotFills,
 } from './slot-fill';
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';

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/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 & {

package/src/resizable-box/resize-tooltip/utils.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
 const noop = () => {};
@@ -84,23 +84,23 @@ export function useResizeLabel( {
 	 */
 	const moveTimeoutRef = useRef< number >();
 
-	const unsetMoveXY = () => {
-		/*
-		 * If axis is controlled, we will avoid resetting the moveX and moveY values.
-		 * This will allow for the preferred axis values to persist in the label.
-		 */
-		if ( isAxisControlled ) return;
-		setMoveX( false );
-		setMoveY( false );
-	};
+	const debounceUnsetMoveXY = useCallback( () => {
+		const unsetMoveXY = () => {
+			/*
+			 * If axis is controlled, we will avoid resetting the moveX and moveY values.
+			 * This will allow for the preferred axis values to persist in the label.
+			 */
+			if ( isAxisControlled ) return;
+			setMoveX( false );
+			setMoveY( false );
+		};
 
-	const debounceUnsetMoveXY = () => {
 		if ( moveTimeoutRef.current ) {
 			window.clearTimeout( moveTimeoutRef.current );
 		}
 
 		moveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );
-	};
+	}, [ fadeTimeout, isAxisControlled ] );
 
 	useEffect( () => {
 		/*
@@ -143,7 +143,7 @@ export function useResizeLabel( {
 
 		onResize( { width, height } );
 		debounceUnsetMoveXY();
-	}, [ width, height ] );
+	}, [ width, height, onResize, debounceUnsetMoveXY ] );
 
 	const label = getSizeLabel( {
 		axis,