@wordpress/components 22.1.0 → 23.1.0

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';
 
 /**
@@ -15,6 +15,8 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
+jest.useFakeTimers();
+
 describe( 'DropdownMenu', () => {
 	it( 'should not render when neither controls nor children are assigned', () => {
 		render( <DropdownMenu /> );
@@ -65,11 +67,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 +93,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/external-link/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,

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

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Picker from '..';
 
+jest.useFakeTimers();
+
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
 		it( 'clicking the draggable area should focus it', async () => {

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/font-size-picker/test/index.tsx

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
+jest.useFakeTimers();
+
 describe( 'FontSizePicker', () => {
 	test.each( [
 		// Use units when initial value uses units.

package/src/form-file-upload/test/index.tsx

@@ -14,6 +14,8 @@ import FormFileUpload from '..';
  */
 const { File } = window;
 
+jest.useFakeTimers();
+
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {

package/src/form-toggle/test/index.tsx

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import FormToggle, { noop } from '..';
 import type { FormToggleProps } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {

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/form-token-field/test/index.tsx

@@ -21,6 +21,8 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
+jest.useFakeTimers();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
@@ -486,6 +488,7 @@ describe( 'FormTokenField', () => {
 
 			// This is testing implementation details, but I'm not sure there's
 			// a better way.
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( input.parentElement?.parentElement ).toHaveClass(
 				'test-classname'
 			);

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 }
@@ -102,7 +99,6 @@ export default function GradientPicker( {
 	value,
 	clearable = true,
 	disableCustomGradients = false,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 } ) {
 	const clearGradient = useCallback(
@@ -110,7 +106,7 @@ export default function GradientPicker( {
 		[ onChange ]
 	);
 	const Component =
-		__experimentalHasMultipleOrigins && gradients?.length
+		gradients?.length && gradients[ 0 ].gradients
 			? MultipleOrigin
 			: SingleOrigin;
 

package/src/gradient-picker/stories/index.js

@@ -87,7 +87,6 @@ WithNoExistingGradients.args = {
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
 	...Default.args,
-	__experimentalHasMultipleOrigins: true,
 	gradients: [
 		{ name: 'Origin 1', gradients: GRADIENTS },
 		{ name: 'Origin 2', gradients: GRADIENTS },

package/src/grid/test/grid.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,14 +12,14 @@ import CONFIG from '../../utils/config-values';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
-			<Grid>
+		render(
+			<Grid data-testid="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
@@ -27,15 +27,15 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render gap', () => {
-		const { container } = render(
-			<Grid columns={ 3 } gap={ 4 }>
+		render(
+			<Grid columns={ 3 } gap={ 4 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
@@ -43,60 +43,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render custom columns', () => {
-		const { container } = render(
-			<Grid columns={ 7 }>
+		render(
+			<Grid columns={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom rows', () => {
-		const { container } = render(
-			<Grid rows={ 7 }>
+		render(
+			<Grid rows={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
-			<Grid align="flex-start">
+		render(
+			<Grid align="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
 	} );
 
 	test( 'should render alignment spaced', () => {
-		const { container } = render(
-			<Grid alignment="spaced">
+		render(
+			<Grid alignment="spaced" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -104,60 +104,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render justify', () => {
-		const { container } = render(
-			<Grid justify="flex-start">
+		render(
+			<Grid justify="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
 	} );
 
 	test( 'should render isInline', () => {
-		const { container } = render(
-			<Grid columns={ 3 } isInline>
+		render(
+			<Grid columns={ 3 } isInline data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom templateColumns', () => {
-		const { container } = render(
-			<Grid templateColumns="1fr auto 1fr">
+		render(
+			<Grid templateColumns="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
 	} );
 
 	test( 'should render custom templateRows', () => {
-		const { container } = render(
-			<Grid templateRows="1fr auto 1fr">
+		render(
+			<Grid templateRows="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );

package/src/guide/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Guide from '../';
 
+jest.useFakeTimers();
+
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide pages={ [] } /> );

package/src/higher-order/navigate-regions/index.js

@@ -42,14 +42,17 @@ export function useNavigateRegions( shortcuts = defaultShortcuts ) {
 
 	function focusRegion( offset ) {
 		const regions = Array.from(
-			ref.current.querySelectorAll( '[role="region"]' )
+			ref.current.querySelectorAll( '[role="region"][tabindex="-1"]' )
 		);
 		if ( ! regions.length ) {
 			return;
 		}
 		let nextRegion = regions[ 0 ];
+		// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
 		const selectedIndex = regions.indexOf(
-			ref.current.ownerDocument.activeElement
+			ref.current.ownerDocument.activeElement.closest(
+				'[role="region"][tabindex="-1"]'
+			)
 		);
 		if ( selectedIndex !== -1 ) {
 			let nextIndex = selectedIndex + offset;

package/src/higher-order/navigate-regions/style.scss

@@ -4,14 +4,17 @@
 }
 
 .is-focusing-regions {
-	[role="region"]:focus {
+	[role="region"]:focus::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		pointer-events: none;
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
-
-		.interface-navigable-region__stacker {
-			position: relative;
-			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
-		}
+		z-index: z-index(".is-focusing-regions {region} :focus::after");
 	}
 
 	// Fixes for edge cases.
@@ -25,60 +28,11 @@
 	// regardles of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
-	&.is-distraction-free .interface-interface-skeleton__header {
-		.interface-navigable-region__stacker,
-		.edit-post-header {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__sidebar {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-sidebar-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__actions {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-publish-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar.
-	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
-
-	// Edit site Navigation Drawer.
-	.interface-interface-skeleton__drawer {
-		z-index: z-index(".edit-site-navigation-toggle");
-
-		.interface-navigable-region__stacker,
-		.edit-site-navigation-toggle {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-
-		.edit-site-navigation-toggle.is-open {
-			outline: none;
-		}
-
-		.edit-site-navigation-toggle__button {
-			z-index: -1;
-		}
-	}
-}
-
-// Fixes for edge cases.
-// Edit site Drawer.
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
-	height: 100%;
 }

package/src/higher-order/with-fallback-styles/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,9 @@ export default ( mapNodeToProps ) =>
 						this.props
 					);
 
-					if ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {
+					if (
+						! fastDeepEqual( newFallbackStyles, fallbackStyles )
+					) {
 						this.setState( {
 							fallbackStyles: newFallbackStyles,
 							grabStylesCompleted: