@wordpress/components 27.4.0 → 27.6.0

package/src/elevation/test/__snapshots__/index.tsx.snap

@@ -15,13 +15,12 @@ exports[`props should render active 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -57,13 +56,12 @@ exports[`props should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -91,13 +89,12 @@ exports[`props should render hover 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -129,13 +126,12 @@ exports[`props should render isInteractive 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -171,13 +167,12 @@ exports[`props should render offset 1`] = `
   left: -2px;
   right: -2px;
   top: -2px;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -213,13 +208,12 @@ exports[`props should render value 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 

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/flex/test/__snapshots__/index.tsx.snap

@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
+    class="components-flex css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-mw3lhz-View-Item-sx-Base e19lxcc00"
+      class="components-flex-item css-eno349-PolymorphicDiv-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-1mm2cvy-View e19lxcc00"
+-     class="css-161q9d5-PolymorphicDiv e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block e19lxcc00"
+      class="components-flex-item components-flex-block css-10m3u8l-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >

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

@@ -38,7 +38,9 @@ export default function FocalPointPickerControls( {
 		value: Parameters< UnitControlOnChangeCallback >[ 0 ],
 		axis: FocalPointAxis
 	) => {
-		if ( value === undefined ) return;
+		if ( value === undefined ) {
+			return;
+		}
 
 		const num = parseInt( value, 10 );
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -111,7 +111,9 @@ export function FocalPointPicker( {
 
 			// `value` can technically be undefined if getValueWithinDragArea() is
 			// called before dragAreaRef is set, but this shouldn't happen in reality.
-			if ( ! value ) return;
+			if ( ! value ) {
+				return;
+			}
 
 			onDragStart?.( value, event );
 			setPoint( value );
@@ -120,7 +122,9 @@ export function FocalPointPicker( {
 			// Prevents text-selection when dragging.
 			event.preventDefault();
 			const value = getValueWithinDragArea( event );
-			if ( ! value ) return;
+			if ( ! value ) {
+				return;
+			}
 			onDrag?.( value, event );
 			setPoint( value );
 		},
@@ -136,7 +140,9 @@ export function FocalPointPicker( {
 	const dragAreaRef = useRef< HTMLDivElement >( null );
 	const [ bounds, setBounds ] = useState( INITIAL_BOUNDS );
 	const refUpdateBounds = useRef( () => {
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { clientWidth: width, clientHeight: height } =
 			dragAreaRef.current;
@@ -150,7 +156,9 @@ export function FocalPointPicker( {
 
 	useEffect( () => {
 		const updateBounds = refUpdateBounds.current;
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { defaultView } = dragAreaRef.current.ownerDocument;
 		defaultView?.addEventListener( 'resize', updateBounds );
@@ -171,7 +179,9 @@ export function FocalPointPicker( {
 		clientY: number;
 		shiftKey: boolean;
 	} ) => {
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { top, left } = dragAreaRef.current.getBoundingClientRect();
 		let nextX = ( clientX - left ) / bounds.width;
@@ -203,8 +213,9 @@ export function FocalPointPicker( {
 			! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(
 				code
 			)
-		)
+		) {
 			return;
+		}
 
 		event.preventDefault();
 		const value = { x, y };
@@ -221,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 }`;
@@ -253,7 +261,9 @@ export function FocalPointPicker( {
 					onKeyDown={ arrowKeyStep }
 					onMouseDown={ startDrag }
 					onBlur={ () => {
-						if ( isDragging ) endDrag();
+						if ( isDragging ) {
+							endDrag();
+						}
 					} }
 					ref={ dragAreaRef }
 					role="button"

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

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS, CONFIG, reduceMotion } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
@@ -106,10 +106,11 @@ export const GridView = styled.div`
 	position: absolute;
 	top: 50%;
 	transform: translate3d( -50%, -50%, 0 );
-	transition: opacity 100ms linear;
 	z-index: 1;
 
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 100ms linear;
+	}
 
 	opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>
 		showOverlay ? 1 : 0 };

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/focal-point-picker/tooltip/index.native.js

@@ -54,7 +54,7 @@ function Tooltip( { children, onPress, style, visible } ) {
 	);
 }
 
-function Label( { align, text, xOffset, yOffset } ) {
+function Label( { align = 'center', text, xOffset = 0, yOffset = 0 } ) {
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const [ dimensions, setDimensions ] = useState( null );
 	const visible = useContext( TooltipContext );
@@ -139,12 +139,6 @@ function Label( { align, text, xOffset, yOffset } ) {
 	);
 }
 
-Label.defaultProps = {
-	align: 'center',
-	xOffset: 0,
-	yOffset: 0,
-};
-
 Tooltip.Label = Label;
 
 export default Tooltip;

package/src/focal-point-picker/utils.ts

@@ -34,7 +34,9 @@ export function getExtension( filename = '' ): string {
  * @return Whether the file is a video.
  */
 export function isVideoType( filename: string = '' ): boolean {
-	if ( ! filename ) return false;
+	if ( ! filename ) {
+		return false;
+	}
 	return (
 		filename.startsWith( 'data:video/' ) ||
 		VIDEO_EXTENSIONS.includes( getExtension( filename ) )

package/src/font-size-picker/README.md

@@ -92,6 +92,7 @@ Size of the control.
 Available units for custom font size selection.
 
 -   Required: No
+-   Default: `[ 'px', 'em', 'rem' ]`
 
 ### `value`: `number | string`
 

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

@@ -36,6 +36,8 @@ 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 UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -47,14 +49,14 @@ const UnforwardedFontSizePicker = (
 		disableCustomFontSizes = false,
 		onChange,
 		size = 'default',
-		units: unitsProp,
+		units: unitsProp = DEFAULT_UNITS,
 		value,
 		withSlider = false,
 		withReset = true,
 	} = props;
 
 	const units = useCustomUnits( {
-		availableUnits: unitsProp || [ 'px', 'em', 'rem' ],
+		availableUnits: unitsProp,
 	} );
 
 	const shouldUseSelectControl = fontSizes.length > 5;

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

@@ -84,7 +84,6 @@ Default.args = {
 			size: 26,
 		},
 	],
-	units: [ 'px', 'em', 'rem' ],
 	value: 16,
 	withSlider: false,
 };

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

@@ -28,6 +28,8 @@ export type FontSizePickerProps = {
 	) => void;
 	/**
 	 * Available units for custom font size selection.
+	 *
+	 * @default `[ 'px', 'em', 'rem' ]`
 	 */
 	units?: string[];
 	/**

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';
 
 /**
@@ -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;
+		}
+	}
 }