@wordpress/components 22.1.0 → 23.0.0

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

@@ -79,6 +79,8 @@ export default function CustomSelectControl( props ) {
 		value: _selectedItem,
 		onMouseOver,
 		onMouseOut,
+		onFocus,
+		onBlur,
 		__experimentalShowSelectedHint = false,
 	} = props;
 
@@ -103,6 +105,16 @@ export default function CustomSelectControl( props ) {
 
 	const [ isFocused, setIsFocused ] = useState( false );
 
+	function handleOnFocus( e ) {
+		setIsFocused( true );
+		onFocus?.( e );
+	}
+
+	function handleOnBlur( e ) {
+		setIsFocused( false );
+		onBlur?.( e );
+	}
+
 	if ( ! __nextUnconstrainedWidth ) {
 		deprecated(
 			'Constrained width styles for wp.components.CustomSelectControl',
@@ -182,8 +194,8 @@ export default function CustomSelectControl( props ) {
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					as="button"
-					onFocus={ () => setIsFocused( true ) }
-					onBlur={ () => setIsFocused( false ) }
+					onFocus={ handleOnFocus }
+					onBlur={ handleOnBlur }
 					selectSize={ size }
 					__next36pxDefaultSize={ __next36pxDefaultSize }
 					{ ...getToggleButtonProps( {

package/src/dashicon/{index.js → index.tsx}

@@ -5,14 +5,20 @@
  * @property {string}                    [className] Class name
  * @property {number}                    [size]      Size of the icon
  */
-/** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */
 
 /**
- * @param {Props} props
- * @return {JSX.Element} Element
+ * Internal dependencies
  */
+import type { WordPressComponentProps } from '../ui/context';
+import type { DashiconProps } from './types';
 
-function Dashicon( { icon, className, size = 20, style = {}, ...extraProps } ) {
+function Dashicon( {
+	icon,
+	className,
+	size = 20,
+	style = {},
+	...extraProps
+}: WordPressComponentProps< DashiconProps, 'span', false > ) {
 	const iconClass = [
 		'dashicon',
 		'dashicons',

package/src/dashicon/types.ts

@@ -1,3 +1,20 @@
+export type DashiconProps = {
+	/**
+	 * The icon name
+	 */
+	icon: IconKey;
+
+	/**
+	 * Class name
+	 */
+	className?: string;
+
+	/**
+	 * Size of the icon
+	 */
+	size?: number;
+};
+
 export type IconKey =
 	| 'admin-appearance'
 	| 'admin-collapse'

package/src/date-time/date-time/index.tsx

@@ -43,14 +43,14 @@ function UnforwardedDateTimePicker(
 	if ( ! __nextRemoveHelpButton ) {
 		deprecated( 'Help button in wp.components.DateTimePicker', {
 			since: '13.4',
-			version: '14.6', // Six months of plugin releases.
+			version: '15.8', // One year of plugin releases.
 			hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}
 	if ( ! __nextRemoveResetButton ) {
 		deprecated( 'Reset button in wp.components.DateTimePicker', {
 			since: '13.4',
-			version: '14.6', // Six months of plugin releases.
+			version: '15.8', // One year of plugin releases.
 			hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -37,7 +37,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -175,7 +174,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -309,7 +308,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -447,7 +445,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -591,7 +589,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -729,7 +726,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -885,7 +882,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -1023,7 +1019,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;

package/src/disabled/test/index.tsx

@@ -18,48 +18,58 @@ describe( 'Disabled', () => {
 	);
 
 	it( 'will disable all fields', () => {
-		const { container } = render(
-			<Disabled>
+		render(
+			<Disabled data-testid="disabled-wrapper">
 				<Form />
 			</Disabled>
 		);
 
-		expect( container.firstChild ).toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
+			'inert'
+		);
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {
 		const MaybeDisable = ( { isDisabled = true } ) =>
 			isDisabled ? (
-				<Disabled>
+				<Disabled data-testid="disabled-wrapper">
 					<Form />
 				</Disabled>
 			) : (
 				<Form />
 			);
 
-		const { container, rerender } = render( <MaybeDisable /> );
+		const { rerender } = render( <MaybeDisable /> );
 
-		expect( container.firstChild ).toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
+			'inert'
+		);
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
+		expect(
+			screen.queryByTestId( 'disabled-wrapper' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
 		const MaybeDisable = ( { isDisabled = true } ) => (
-			<Disabled isDisabled={ isDisabled }>
+			<Disabled isDisabled={ isDisabled } data-testid="disabled-wrapper">
 				<Form />
 			</Disabled>
 		);
 
-		const { rerender, container } = render( <MaybeDisable /> );
+		const { rerender } = render( <MaybeDisable /> );
 
-		expect( container.firstChild ).toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
+			'inert'
+		);
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).not.toHaveAttribute(
+			'inert'
+		);
 	} );
 
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {

package/src/dropdown/test/index.js

@@ -1,68 +1,57 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Dropdown from '../';
 
-function getButtonElement( container ) {
-	return container.querySelector( 'button' );
-}
-function getOpenCloseButton( container, selector ) {
-	return container.querySelector( selector );
-}
-
 describe( 'Dropdown', () => {
-	function expectPopoverVisible( container, value ) {
-		const popover = container.querySelector( '.components-popover' );
-		if ( value ) {
-			expect( popover ).toBeTruthy();
-		} else {
-			expect( popover ).toBeFalsy();
-		}
-	}
-
-	it( 'should toggle the dropdown properly', () => {
-		const expectButtonExpanded = ( container, expanded ) => {
-			expect( container.querySelectorAll( 'button' ) ).toHaveLength( 1 );
-			expect( getButtonElement( container ) ).toHaveAttribute(
-				'aria-expanded',
-				expanded.toString()
-			);
-		};
-
-		const {
-			container: { firstChild: dropdownContainer },
-		} = render(
+	it( 'should toggle the dropdown properly', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const { unmount } = render(
 			<Dropdown
 				className="container"
 				contentClassName="content"
 				renderToggle={ ( { isOpen, onToggle } ) => (
 					<button aria-expanded={ isOpen } onClick={ onToggle }>
-						Toggleee
+						Toggle
 					</button>
 				) }
 				renderContent={ () => <span>test</span> }
+				popoverProps={ { 'data-testid': 'popover' } }
 			/>
 		);
 
-		expectButtonExpanded( dropdownContainer, false );
-		expectPopoverVisible( dropdownContainer, false );
+		const button = screen.getByRole( 'button', { expanded: false } );
+
+		expect( button ).toBeVisible();
+		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
 
-		const button = getButtonElement( dropdownContainer );
-		fireEvent.click( button );
+		await user.click( button );
 
-		expectButtonExpanded( dropdownContainer, true );
-		expectPopoverVisible( dropdownContainer, true );
+		expect(
+			screen.getByRole( 'button', { expanded: true } )
+		).toBeVisible();
+
+		await waitFor( () =>
+			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
+		);
+
+		// Cleanup remaining effects, like the delayed popover positioning
+		unmount();
 	} );
 
-	it( 'should close the dropdown when calling onClose', () => {
-		const {
-			container: { firstChild: dropdownContainer },
-		} = render(
+	it( 'should close the dropdown when calling onClose', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render(
 			<Dropdown
 				className="container"
 				contentClassName="content"
@@ -73,26 +62,27 @@ describe( 'Dropdown', () => {
 						aria-expanded={ isOpen }
 						onClick={ onToggle }
 					>
-						Toggleee
+						Toggle
 					</button>,
 					<button key="close" className="close" onClick={ onClose }>
-						closee
+						close
 					</button>,
 				] }
 				renderContent={ () => null }
+				popoverProps={ { 'data-testid': 'popover' } }
 			/>
 		);
 
-		expectPopoverVisible( dropdownContainer, false );
+		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
 
-		const openButton = getOpenCloseButton( dropdownContainer, '.open' );
-		fireEvent.click( openButton );
+		await user.click( screen.getByRole( 'button', { name: 'Toggle' } ) );
 
-		expectPopoverVisible( dropdownContainer, true );
+		await waitFor( () =>
+			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
+		);
 
-		const closeButton = getOpenCloseButton( dropdownContainer, '.close' );
-		fireEvent.click( closeButton );
+		await user.click( screen.getByRole( 'button', { name: 'close' } ) );
 
-		expectPopoverVisible( dropdownContainer, false );
+		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -65,11 +65,14 @@ describe( 'DropdownMenu', () => {
 
 		await user.keyboard( '[ArrowDown]' );
 
-		let menu;
-		await waitFor( () => {
-			menu = screen.getByRole( 'menu' );
-			return expect( menu ).toBeVisible();
-		} );
+		// Wait for the `floating-ui` effects in `Dropdown`/`Popover` to finish running
+		// See also: https://floating-ui.com/docs/react-dom#testing
+		await act( () => Promise.resolve() );
+
+		const menu = screen.getByRole( 'menu' );
+
+		// we need to wait because showing the dropdown is animated
+		await waitFor( () => expect( menu ).toBeVisible() );
 
 		expect( within( menu ).getAllByRole( 'menuitem' ) ).toHaveLength(
 			controls.length
@@ -88,15 +91,18 @@ describe( 'DropdownMenu', () => {
 		);
 
 		const button = screen.getByRole( 'button' );
-		button.focus();
+		act( () => button.focus() );
 
 		await user.keyboard( '[ArrowDown]' );
 
-		let menu;
-		await waitFor( () => {
-			menu = screen.getByRole( 'menu' );
-			return expect( menu ).toBeVisible();
-		} );
+		// Wait for the `floating-ui` effects in `Dropdown`/`Popover` to finish running
+		// See also: https://floating-ui.com/docs/react-dom#testing
+		await act( () => Promise.resolve() );
+
+		const menu = screen.getByRole( 'menu' );
+
+		// we need to wait because showing the dropdown is animated
+		await waitFor( () => expect( menu ).toBeVisible() );
 
 		// Clicking the menu item will close the dropdown menu
 		await user.click( within( menu ).getByRole( 'menuitem' ) );

package/src/duotone-picker/duotone-picker.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ function DuotonePicker( {
 					name
 			  )
 			: tooltipText;
-		const isSelected = isEqual( colors, value );
+		const isSelected = fastDeepEqual( colors, value );
 
 		return (
 			<CircularOptionPicker.Option

package/src/focal-point-picker/test/media.js

@@ -1,58 +1,63 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import Media from '../media';
 
-const getMedia = ( container ) =>
-	container.querySelector( '.components-focal-point-picker__media' );
-
 describe( 'FocalPointPicker/Media', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
+			render( <Media data-testid="media" /> );
 
-			expect( el ).toBeTruthy();
+			expect( screen.getByTestId( 'media' ) ).toBeVisible();
 		} );
 	} );
 
 	describe( 'Media types', () => {
 		it( 'should render a placeholder by default', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
+			render( <Media data-testid="media" /> );
 
-			expect( el.outerHTML ).toContain( 'placeholder' );
+			expect( screen.getByTestId( 'media' ) ).toHaveClass(
+				'components-focal-point-picker__media--placeholder'
+			);
 		} );
 
 		it( 'should render an video if src is a video file', () => {
-			const { container, rerender } = render(
-				<Media src="file.mp4" muted={ false } />
+			const { rerender } = render(
+				<Media src="file.mp4" muted={ false } data-testid="media" />
 			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender( <Media src="file.ogg" muted={ false } /> );
+			rerender(
+				<Media src="file.ogg" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender( <Media src="file.webm" muted={ false } /> );
+			rerender(
+				<Media src="file.webm" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 		} );
 
 		it( 'should render an image file, if not video', () => {
-			const { container, rerender } = render( <Media src="file.gif" /> );
+			const { rerender } = render(
+				<Media src="file.gif" data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 
-			rerender( <Media src="file.png" muted={ false } /> );
+			rerender(
+				<Media src="file.png" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 		} );
 	} );
 } );

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

@@ -169,7 +169,7 @@
 	transition: all 0.15s ease-in-out;
 	@include reduce-motion("transition");
 	list-style: none;
-	border-top: $border-width solid $gray-700;
+	border-top: $border-width solid $components-color-border;
 	margin: 0;
 	padding: 0;
 }

package/src/gradient-picker/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,7 +23,7 @@ function SingleOrigin( {
 	actions,
 } ) {
 	const gradientOptions = useMemo( () => {
-		return map( gradients, ( { gradient, name } ) => (
+		return gradients.map( ( { gradient, name }, index ) => (
 			<CircularOptionPicker.Option
 				key={ gradient }
 				value={ gradient }
@@ -42,7 +37,7 @@ function SingleOrigin( {
 				onClick={
 					value === gradient
 						? clearGradient
-						: () => onChange( gradient )
+						: () => onChange( gradient, index )
 				}
 				aria-label={
 					name
@@ -80,7 +75,9 @@ function MultipleOrigin( {
 						<SingleOrigin
 							clearGradient={ clearGradient }
 							gradients={ gradientSet }
-							onChange={ onChange }
+							onChange={ ( gradient ) =>
+								onChange( gradient, index )
+							}
 							value={ value }
 							{ ...( gradients.length === index + 1
 								? { actions }