@wordpress/components 27.5.0 → 27.6.0

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { colord } from 'colord';
 
 /**
@@ -66,7 +66,7 @@ function ControlPointButton( {
 				aria-describedby={ descriptionId }
 				aria-haspopup="true"
 				aria-expanded={ isOpen }
-				className={ classnames(
+				className={ clsx(
 					'components-custom-gradient-picker__control-point-button',
 					{
 						'is-active': isOpen,
@@ -102,7 +102,7 @@ function GradientColorPickerDropdown( {
 		[]
 	);
 
-	const mergedClassName = classnames(
+	const mergedClassName = clsx(
 		'components-custom-gradient-picker__control-point-dropdown',
 		className
 	);

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function CustomGradientBar( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'components-custom-gradient-picker__gradient-bar',
 				{ 'has-gradient': hasGradient }
 			) }

package/src/custom-gradient-picker/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type gradientParser from 'gradient-parser';
+import { type LinearGradientNode } from 'gradient-parser';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ const GradientTypePicker = ( {
 					? undefined
 					: HORIZONTAL_GRADIENT_ORIENTATION,
 				type: 'linear-gradient',
-			} as gradientParser.LinearGradientNode )
+			} satisfies LinearGradientNode )
 		);
 	};
 

package/src/custom-select-control/index.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { useSelect } from 'downshift';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -135,10 +135,7 @@ export default function CustomSelectControl( props ) {
 	}
 	return (
 		<div
-			className={ classnames(
-				'components-custom-select-control',
-				className
-			) }
+			className={ clsx( 'components-custom-select-control', className ) }
 		>
 			{ hideLabelFromVision ? (
 				<VisuallyHidden as="label" { ...getLabelProps() }>
@@ -194,7 +191,7 @@ export default function CustomSelectControl( props ) {
 										item,
 										index,
 										key: item.key,
-										className: classnames(
+										className: clsx(
 											item.className,
 											'components-custom-select-control__item',
 											{

package/src/dimension-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -87,10 +87,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 	return (
 		<SelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			className={ classnames(
-				className,
-				'block-editor-dimension-control'
-			) }
+			className={ clsx( className, 'block-editor-dimension-control' ) }
 			label={ selectLabel }
 			hideLabelFromVision={ false }
 			value={ value }

package/src/drop-zone/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -181,7 +181,7 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const classes = classnames( 'components-drop-zone', className, {
+	const classes = clsx( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
 			( ( type === 'file' && onFilesDrop ) ||

package/src/dropdown/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -142,7 +142,7 @@ const UnconnectedDropdown = (
 					}
 					variant={ variant }
 					{ ...popoverProps }
-					className={ classnames(
+					className={ clsx(
 						'components-dropdown__content',
 						popoverProps?.className,
 						contentClassName

package/src/dropdown-menu/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Platform } from 'react-native';
 /**
  * WordPress dependencies
@@ -23,10 +23,7 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -72,17 +69,14 @@ function DropdownMenu( {
 
 	return (
 		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
+			className={ clsx( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					toggleProps
 				);

package/src/dropdown-menu/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,10 +30,7 @@ function mergeProps<
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -113,12 +110,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					restToggleProps
 				);
@@ -157,10 +151,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 				const mergedMenuProps = mergeProps(
 					{
 						'aria-label': label,
-						className: classnames(
-							'components-dropdown-menu__menu',
-							{ 'no-icons': noIcons }
-						),
+						className: clsx( 'components-dropdown-menu__menu', {
+							'no-icons': noIcons,
+						} ),
 					},
 					menuProps
 				);
@@ -182,7 +175,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 											control.onClick();
 										}
 									} }
-									className={ classnames(
+									className={ clsx(
 										'components-dropdown-menu__menu-item',
 										{
 											'has-separator':

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

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'
 			) }