@wordpress/components 27.5.0 → 28.0.0

package/src/dropdown-menu-v2/stories/index.story.tsx

@@ -59,7 +59,6 @@ const meta: Meta< typeof DropdownMenu > = {
 	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },
@@ -111,7 +110,7 @@ export const Default: StoryFn< typeof DropdownMenu > = ( props ) => (
 			>
 				<DropdownMenuItemLabel>With prefix</DropdownMenuItemLabel>
 			</DropdownMenuItem>
-			<DropdownMenuItem suffix={ '⌘S' }>With suffix</DropdownMenuItem>
+			<DropdownMenuItem suffix="⌘S">With suffix</DropdownMenuItem>
 			<DropdownMenuItem
 				disabled
 				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }

package/src/dropdown-menu-v2/test/index.tsx

@@ -54,9 +54,14 @@ describe( 'DropdownMenu', () => {
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		expect(
-			screen.getByRole( 'menu', { name: toggleButton.textContent ?? '' } )
-		).toHaveFocus();
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'menu', {
+					name: toggleButton.textContent ?? '',
+				} )
+			).toHaveFocus()
+		);
+
 		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
 			'aria-orientation',
 			'horizontal'

package/src/external-link/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -34,7 +34,7 @@ function UnforwardedExternalLink(
 			].filter( Boolean )
 		),
 	].join( ' ' );
-	const classes = classnames( 'components-external-link', className );
+	const classes = clsx( 'components-external-link', className );
 	/* Anchor links are perceived as external links.
 	This constant helps check for on page anchor links,
 	to prevent them from being opened in the editor. */

package/src/focal-point-picker/focal-point.tsx

@@ -6,7 +6,6 @@ import { PointerCircle } from './styles/focal-point-style';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import type { FocalPointProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -15,11 +14,13 @@ export default function FocalPoint( {
 	top = '50%',
 	...props
 }: WordPressComponentProps< FocalPointProps, 'div' > ) {
-	const classes = classnames(
-		'components-focal-point-picker__icon_container'
-	);
-
 	const style = { left, top };
 
-	return <PointerCircle { ...props } className={ classes } style={ style } />;
+	return (
+		<PointerCircle
+			{ ...props }
+			className="components-focal-point-picker__icon_container"
+			style={ style }
+		/>
+	);
 }

package/src/focal-point-picker/index.native.js

@@ -12,7 +12,6 @@ import {
 	setFocalPointPickerTooltipShown,
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
-import { Image, UnitControl } from '@wordpress/components';
 import { useRef, useState, useMemo, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -24,6 +23,8 @@ import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
 import { clamp } from '../utils/math';
+import Image from '../mobile/image';
+import UnitControl from '../unit-control';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;

package/src/focal-point-picker/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -232,10 +232,7 @@ export function FocalPointPicker( {
 		top: y !== undefined ? y * bounds.height : 0.5 * bounds.height,
 	};
 
-	const classes = classnames(
-		'components-focal-point-picker-control',
-		className
-	);
+	const classes = clsx( 'components-focal-point-picker-control', className );
 
 	const instanceId = useInstanceId( FocalPointPicker );
 	const id = `inspector-focal-point-picker-control-${ instanceId }`;

package/src/focal-point-picker/styles/focal-point-style.ts

@@ -3,11 +3,6 @@
  */
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { reduceMotion } from '../../utils';
-
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
@@ -23,9 +18,10 @@ export const PointerCircle = styled.div`
 	border-radius: 50%;
 	backdrop-filter: blur( 16px ) saturate( 180% );
 	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
-	transition: transform 100ms linear;
 
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 100ms linear;
+	}
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
 		isDragging &&

package/src/focal-point-picker/test/{index.js → index.tsx}

@@ -8,6 +8,19 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import Picker from '..';
+import type { FocalPointPickerProps } from '../types';
+
+type Log = { name: string; args: unknown[] };
+type EventLogger = ( name: string, args: unknown[] ) => void;
+
+const props: FocalPointPickerProps = {
+	onChange: jest.fn(),
+	url: 'test-url',
+	value: {
+		x: 0,
+		y: 0,
+	},
+};
 
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
@@ -16,7 +29,7 @@ describe( 'FocalPointPicker', () => {
 
 			const mockOnChange = jest.fn();
 
-			render( <Picker onChange={ mockOnChange } /> );
+			render( <Picker { ...props } onChange={ mockOnChange } /> );
 
 			const draggableArea = screen.getByRole( 'button' );
 
@@ -32,6 +45,7 @@ describe( 'FocalPointPicker', () => {
 
 			render(
 				<Picker
+					{ ...props }
 					onChange={ mockOnChange }
 					onDrag={ mockOnDrag }
 					onDragEnd={ mockOnDragEnd }
@@ -57,15 +71,16 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'drag gestures', () => {
 		it( 'should call onDragStart, onDrag, onDragEnd and onChange in that order', () => {
-			const logs = [];
-			const eventLogger = ( name, args ) => logs.push( { name, args } );
+			const logs: Log[] = [];
+			const eventLogger: EventLogger = ( name, args ) =>
+				logs.push( { name, args } );
 			const events = [ 'onDragStart', 'onDrag', 'onDragEnd', 'onChange' ];
-			const handlers = {};
+			const handlers: { [ key: string ]: EventLogger } = {};
 			events.forEach( ( name ) => {
 				handlers[ name ] = ( ...all ) => eventLogger( name, all );
 			} );
 
-			render( <Picker { ...handlers } /> );
+			render( <Picker { ...props } { ...handlers } /> );
 
 			const dragArea = screen.getByRole( 'button' );
 
@@ -92,6 +107,7 @@ describe( 'FocalPointPicker', () => {
 
 			render(
 				<Picker
+					{ ...props }
 					value={ { x: 0.25, y: 0.25 } }
 					onChange={ spyChange }
 					resolvePoint={ () => {
@@ -118,12 +134,12 @@ describe( 'FocalPointPicker', () => {
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
 			const { rerender } = render(
-				<Picker value={ { x: 0.25, y: 0.5 } } />
+				<Picker { ...props } value={ { x: 0.25, y: 0.5 } } />
 			);
 			const xInput = screen.getByRole( 'spinbutton', {
 				name: 'Focal point left position',
-			} );
-			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
+			} ) as HTMLButtonElement;
+			rerender( <Picker { ...props } value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
@@ -131,7 +147,11 @@ describe( 'FocalPointPicker', () => {
 
 			const spyChange = jest.fn();
 			render(
-				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
+				<Picker
+					{ ...props }
+					value={ { x: 0.14, y: 0.62 } }
+					onChange={ spyChange }
+				/>
 			);
 			// Focus and press arrow up
 			const dragArea = screen.getByRole( 'button' );
@@ -151,20 +171,27 @@ describe( 'FocalPointPicker', () => {
 			const onChangeSpy = jest.fn();
 			render(
 				<Picker
-					value={ { x: '0.1', y: '0.2' } }
+					{ ...props }
+					value={ {
+						x: '0.1' as unknown as number,
+						y: '0.2' as unknown as number,
+					} }
 					onChange={ onChangeSpy }
 				/>
 			);
-
 			expect(
-				screen.getByRole( 'spinbutton', {
-					name: 'Focal point left position',
-				} ).value
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point left position',
+					} ) as HTMLButtonElement
+				 ).value
 			).toBe( '10' );
 			expect(
-				screen.getByRole( 'spinbutton', {
-					name: 'Focal point top position',
-				} ).value
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point top position',
+					} ) as HTMLButtonElement
+				 ).value
 			).toBe( '20' );
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );

package/src/focal-point-picker/test/{media.js → media.tsx}

@@ -7,11 +7,22 @@ import { render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import Media from '../media';
+import type { FocalPointPickerMediaProps } from '../types';
+
+type FocalPointPickerMediaTestProps = FocalPointPickerMediaProps & {
+	'data-testid': string;
+};
+
+const props: FocalPointPickerMediaTestProps = {
+	alt: '',
+	src: '',
+	'data-testid': 'media',
+};
 
 describe( 'FocalPointPicker/Media', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <Media data-testid="media" /> );
+			render( <Media { ...props } /> );
 
 			expect( screen.getByTestId( 'media' ) ).toBeVisible();
 		} );
@@ -19,7 +30,7 @@ describe( 'FocalPointPicker/Media', () => {
 
 	describe( 'Media types', () => {
 		it( 'should render a placeholder by default', () => {
-			render( <Media data-testid="media" /> );
+			render( <Media { ...props } /> );
 
 			expect( screen.getByTestId( 'media' ) ).toHaveClass(
 				'components-focal-point-picker__media--placeholder'
@@ -28,34 +39,28 @@ describe( 'FocalPointPicker/Media', () => {
 
 		it( 'should render an video if src is a video file', () => {
 			const { rerender } = render(
-				<Media src="file.mp4" muted={ false } data-testid="media" />
+				<Media { ...props } src="file.mp4" muted={ false } />
 			);
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender(
-				<Media src="file.ogg" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.ogg" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender(
-				<Media src="file.webm" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.webm" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 		} );
 
 		it( 'should render an image file, if not video', () => {
 			const { rerender } = render(
-				<Media src="file.gif" data-testid="media" />
+				<Media { ...props } src="file.gif" />
 			);
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 
-			rerender(
-				<Media src="file.png" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.png" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 		} );

package/src/font-size-picker/index.native.js

@@ -10,7 +10,6 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,6 +17,7 @@ import { BottomSheet } from '@wordpress/components';
 import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
+import BottomSheet from '../mobile/bottom-sheet';
 
 const DEFAULT_FONT_SIZE = 16;
 
@@ -59,7 +59,7 @@ function FontSizePicker( {
 	const label = __( 'Font Size' );
 
 	const units = useCustomUnits( {
-		availableUnits: [ 'px', 'em', 'rem' ],
+		availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],
 	} );
 
 	const accessibilityLabel = sprintf(
@@ -85,7 +85,7 @@ function FontSizePicker( {
 							: __( 'Default' )
 					}
 					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
 						// translators: %s: Select control button label e.g. Small
@@ -112,8 +112,8 @@ function FontSizePicker( {
 						label={ __( 'Default' ) }
 						onPress={ onChangeValue( undefined ) }
 						leftAlign
-						key={ 'default' }
-						accessibilityRole={ 'button' }
+						key="default"
+						accessibilityRole="button"
 						accessibilityLabel={ __( 'Selected: Default' ) }
 						accessibilityHint={ __(
 							'Double tap to select default font size'
@@ -139,7 +139,7 @@ function FontSizePicker( {
 								onPress={ onChangeValue( item.sizePx ) }
 								leftAlign
 								key={ index }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 								accessibilityLabel={
 									item.sizePx === selectedValue
 										? sprintf(

package/src/font-size-picker/index.tsx

@@ -36,7 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 
-const DEFAULT_UNITS = [ 'px', 'em', 'rem' ];
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
@@ -112,7 +112,7 @@ const UnforwardedFontSizePicker = (
 		units
 	);
 	const isValueUnitRelative =
-		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
 	const isDisabled = value === undefined;
 
 	return (

package/src/form-toggle/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -48,7 +48,7 @@ export function FormToggle(
 		onChange = noop,
 		...additionalProps
 	} = props;
-	const wrapperClasses = classnames( 'components-form-toggle', className, {
+	const wrapperClasses = clsx( 'components-form-toggle', className, {
 		'is-checked': checked,
 		'is-disabled': disabled,
 	} );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';
 
 /**
@@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )
@@ -665,7 +665,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		className,
 		'components-form-token-field__input-container',
 		{
@@ -694,12 +694,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...tokenFieldProps }>
-			<StyledLabel
-				htmlFor={ `components-form-token-input-${ instanceId }` }
-				className="components-form-token-field__label"
-			>
-				{ label }
-			</StyledLabel>
+			{ label && (
+				<StyledLabel
+					htmlFor={ `components-form-token-input-${ instanceId }` }
+					className="components-form-token-field__label"
+				>
+					{ label }
+				</StyledLabel>
+			) }
 			<div
 				ref={ tokensAndInput }
 				className={ classes }

package/src/form-token-field/style.scss

@@ -181,4 +181,13 @@
 		background: $components-color-accent;
 		color: $white;
 	}
+
+	&[aria-disabled="true"] {
+		pointer-events: none;
+		color: $gray-600;
+
+		&.is-selected {
+			background-color: $components-color-accent-transparent-40;
+		}
+	}
 }

package/src/form-token-field/suggestions-list.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
@@ -19,7 +19,9 @@ const handleMouseDown: MouseEventHandler = ( e ) => {
 	e.preventDefault();
 };
 
-export function SuggestionsList< T extends string | { value: string } >( {
+export function SuggestionsList<
+	T extends string | { value: string; disabled?: boolean },
+>( {
 	selectedIndex,
 	scrollIntoView,
 	match,
@@ -103,10 +105,18 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		>
 			{ suggestions.map( ( suggestion, index ) => {
 				const matchText = computeSuggestionMatch( suggestion );
-				const className = classnames(
+				const isSelected = index === selectedIndex;
+				const isDisabled =
+					typeof suggestion === 'object' && suggestion?.disabled;
+				const key =
+					typeof suggestion === 'object' && 'value' in suggestion
+						? suggestion?.value
+						: displayTransform( suggestion );
+
+				const className = clsx(
 					'components-form-token-field__suggestion',
 					{
-						'is-selected': index === selectedIndex,
+						'is-selected': isSelected,
 					}
 				);
 
@@ -134,16 +144,12 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						id={ `components-form-token-suggestions-${ instanceId }-${ index }` }
 						role="option"
 						className={ className }
-						key={
-							typeof suggestion === 'object' &&
-							'value' in suggestion
-								? suggestion?.value
-								: displayTransform( suggestion )
-						}
+						key={ key }
 						onMouseDown={ handleMouseDown }
 						onClick={ handleClick( suggestion ) }
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
+						aria-disabled={ isDisabled }
 					>
 						{ output }
 					</li>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
@@ -64,7 +64,7 @@ export function UnForwardedTokenInput(
 			onFocus={ onFocusHandler }
 			onBlur={ onBlurHandler }
 			size={ size }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'components-form-token-field__input'
 			) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Token( {
 	termsCount,
 }: TokenProps ) {
 	const instanceId = useInstanceId( Token );
-	const tokenClasses = classnames( 'components-form-token-field__token', {
+	const tokenClasses = clsx( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
 		'is-validating': 'validating' === status,

package/src/guide/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -106,7 +106,7 @@ function Guide( {
 
 	return (
 		<Modal
-			className={ classnames( 'components-guide', className ) }
+			className={ clsx( 'components-guide', className ) }
 			contentLabel={ contentLabel }
 			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }

package/src/index.native.js

@@ -111,7 +111,6 @@ export { default as Image } from './mobile/image';
 export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
-export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
 export { default as Gridicons } from './mobile/gridicons';
 
@@ -131,18 +130,5 @@ export {
 	getValueAndUnit,
 } from './mobile/utils/use-unit-converter-to-mobile';
 
-export {
-	default as GlobalStylesContext,
-	useGlobalStyles,
-	withGlobalStyles,
-	getMergedGlobalStyles,
-} from './mobile/global-styles-context';
-export {
-	getGlobalStyles,
-	getColorsAndGradients,
-	useMobileGlobalStylesColors,
-	useEditorColorScheme,
-} from './mobile/global-styles-context/utils';
-
 // Private APIs.
 export { privateApis } from './private-apis';

package/src/index.ts

@@ -132,6 +132,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as ProgressBar } from './progress-bar';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';