@wordpress/components 21.2.0 → 22.0.0

package/src/disabled/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,35 +9,6 @@ import { render, screen, waitFor } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../dom/src' ).focus;
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context: Element, options = { sequential: false } ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-									configurable: true,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( context, options );
-				},
-			},
-		},
-	};
-} );
-
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">
@@ -47,18 +18,13 @@ describe( 'Disabled', () => {
 	);
 
 	it( 'will disable all fields', () => {
-		render(
+		const { container } = render(
 			<Disabled>
 				<Form />
 			</Disabled>
 		);
 
-		const input = screen.getByRole( 'textbox' );
-		const contentEditable = screen.getByTitle( 'edit my content' );
-		expect( input ).toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
-		expect( contentEditable ).not.toHaveAttribute( 'tabindex' );
-		expect( contentEditable ).not.toHaveAttribute( 'disabled' );
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {
@@ -71,19 +37,13 @@ describe( 'Disabled', () => {
 				<Form />
 			);
 
-		const { rerender } = render( <MaybeDisable /> );
+		const { container, rerender } = render( <MaybeDisable /> );
 
-		const input = screen.getByRole( 'textbox' );
-		const contentEditable = screen.getByTitle( 'edit my content' );
-
-		expect( input ).toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( input ).not.toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'true' );
-		expect( contentEditable ).toHaveAttribute( 'tabindex' );
+		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
 	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
@@ -93,46 +53,13 @@ describe( 'Disabled', () => {
 			</Disabled>
 		);
 
-		const { rerender } = render( <MaybeDisable /> );
-
-		const input = screen.getByRole( 'textbox' );
-		const contentEditable = screen.getByTitle( 'edit my content' );
+		const { rerender, container } = render( <MaybeDisable /> );
 
-		expect( input ).toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( input ).not.toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'true' );
-	} );
-
-	it( 'will disable all fields on sneaky DOM manipulation', async () => {
-		render(
-			<Disabled>
-				<Form />
-			</Disabled>
-		);
-
-		const form = screen.getByTitle( 'form' );
-		form.insertAdjacentHTML(
-			'beforeend',
-			'<input title="sneaky input" />'
-		);
-		form.insertAdjacentHTML(
-			'beforeend',
-			'<div title="sneaky editable content" contentEditable tabIndex={ 0 } />'
-		);
-		const sneakyInput = screen.getByTitle( 'sneaky input' );
-		const sneakyEditable = screen.getByTitle( 'sneaky editable content' );
-
-		await waitFor( () => expect( sneakyInput ).toBeDisabled() );
-		await waitFor( () =>
-			expect( sneakyEditable ).toHaveAttribute(
-				'contenteditable',
-				'false'
-			)
-		);
+		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {

package/src/dropdown/test/index.js

@@ -28,9 +28,10 @@ describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', () => {
 		const expectButtonExpanded = ( container, expanded ) => {
 			expect( container.querySelectorAll( 'button' ) ).toHaveLength( 1 );
-			expect(
-				getButtonElement( container ).getAttribute( 'aria-expanded' )
-			).toBe( expanded.toString() );
+			expect( getButtonElement( container ) ).toHaveAttribute(
+				'aria-expanded',
+				expanded.toString()
+			);
 		};
 
 		const {

package/src/external-link/index.tsx

@@ -38,22 +38,30 @@ function UnforwardedExternalLink(
 		),
 	].join( ' ' );
 	const classes = classnames( 'components-external-link', className );
-	/* Anchor links are percieved as external links.
+	/* 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. */
 	const isInternalAnchor = !! href?.startsWith( '#' );
 
+	const onClickHandler = (
+		event: React.MouseEvent< HTMLAnchorElement, MouseEvent >
+	) => {
+		if ( isInternalAnchor ) {
+			event.preventDefault();
+		}
+
+		if ( props.onClick ) {
+			props.onClick( event );
+		}
+	};
+
 	return (
 		/* eslint-disable react/jsx-no-target-blank */
 		<a
 			{ ...additionalProps }
 			className={ classes }
 			href={ href }
-			onClick={
-				isInternalAnchor
-					? ( event ) => event.preventDefault()
-					: undefined
-			}
+			onClick={ onClickHandler }
 			target="_blank"
 			rel={ optimizedRel }
 			ref={ ref }

package/src/external-link/test/index.tsx

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { ExternalLink } from '..';
+
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
+describe( 'ExternalLink', () => {
+	test( 'should call function passed in onClick handler when clicking the link', async () => {
+		const user = setupUser();
+		const onClickMock = jest.fn();
+
+		render(
+			<ExternalLink href="https://wordpress.org" onClick={ onClickMock }>
+				WordPress.org
+			</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: 'WordPress.org (opens in a new tab)',
+		} );
+
+		await user.click( link );
+
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	test( 'should prevent default action when clicking an internal anchor link without passing onClick prop', async () => {
+		const user = setupUser();
+
+		render(
+			<ExternalLink href="#test">I&apos;m an anchor link!</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: "I'm an anchor link! (opens in a new tab)",
+		} );
+
+		// We are using this approach so we can test the defaultPrevented
+		// without passing an onClick prop to the component.
+		const onClickMock = jest.fn();
+		link.onclick = onClickMock;
+
+		await user.click( link );
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+		expect( onClickMock ).toHaveBeenLastCalledWith(
+			expect.objectContaining( { defaultPrevented: true } )
+		);
+	} );
+
+	test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => {
+		const user = setupUser();
+		const onClickMock = jest.fn();
+
+		render(
+			<ExternalLink href="#test" onClick={ onClickMock }>
+				I&apos;m an anchor link!
+			</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: "I'm an anchor link! (opens in a new tab)",
+		} );
+
+		await user.click( link );
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+		expect( onClickMock ).toHaveBeenLastCalledWith(
+			expect.objectContaining( { defaultPrevented: true } )
+		);
+	} );
+
+	test( 'should not prevent default action when clicking a non anchor link without passing onClick prop', async () => {
+		const user = setupUser();
+
+		render(
+			<ExternalLink href="https://wordpress.org">
+				I&apos;m not an anchor link!
+			</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: "I'm not an anchor link! (opens in a new tab)",
+		} );
+
+		// We are using this approach so we can test the defaultPrevented
+		// without passing an onClick prop to the component.
+		const onClickMock = jest.fn();
+		link.onclick = onClickMock;
+
+		await user.click( link );
+
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+		expect( onClickMock ).toHaveBeenLastCalledWith(
+			expect.objectContaining( { defaultPrevented: false } )
+		);
+	} );
+} );

package/src/focusable-iframe/index.js

@@ -9,7 +9,6 @@ import deprecated from '@wordpress/deprecated';
  * @param {import('react').Ref<HTMLIFrameElement>} props.iframeRef
  */
 export default function FocusableIframe( { iframeRef, ...props } ) {
-	// @ts-expect-error: Return type for useFocusableIframe() is incorrect.
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
 		since: '5.9',

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

@@ -93,7 +93,7 @@ The current font size value.
 
 ### withSlider
 
-If `true`, the UI will contain a slider, instead of a numeric text input field. If `false`, no slider will be present.
+If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
 -   Type: `Boolean`
 -   Required: no
@@ -101,7 +101,7 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 
 ### withReset
 
-If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
+If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
 -   Type: `Boolean`
 -   Required: no
@@ -113,4 +113,4 @@ Start opting into the new margin-free styles that will become the default in a f
 
 -   Type: `Boolean`
 -   Required: no
--   Default: `false`
+-   Default: `false`