@wordpress/components 21.3.0 → 22.0.0

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

@@ -1,8 +1,6 @@
 /**
  * External dependencies
  */
-
-import { some } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -91,7 +89,7 @@ export default function CustomGradientBar( {
 
 		// If the insert point is close to an existing control point don't show it.
 		if (
-			some( controlPoints, ( { position } ) => {
+			controlPoints.some( ( { position } ) => {
 				return (
 					Math.abs( insertPosition - position ) <
 					MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT

package/src/custom-select-control/README.md

@@ -131,6 +131,20 @@ Start opting into the unconstrained width style that will become the default in
 -   Required: No
 -   Default: `false`
 
+#### onMouseOver
+
+A handler for onMouseOver events.
+
+-   Type: `Function`
+-   Required: No
+
+#### onMouseOut
+
+A handler for onMouseOut events.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

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

@@ -61,21 +61,26 @@ const stateReducer = (
 			return changes;
 	}
 };
-export default function CustomSelectControl( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next36pxDefaultSize = false,
-	/** Start opting into the unconstrained width that will become the default in a future version. */
-	__nextUnconstrainedWidth = false,
-	className,
-	hideLabelFromVision,
-	label,
-	describedBy,
-	options: items,
-	onChange: onSelectedItemChange,
-	/** @type {import('../select-control/types').SelectControlProps.size} */
-	size = 'default',
-	value: _selectedItem,
-} ) {
+
+export default function CustomSelectControl( props ) {
+	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next36pxDefaultSize = false,
+		/** Start opting into the unconstrained width that will become the default in a future version. */
+		__nextUnconstrainedWidth = false,
+		className,
+		hideLabelFromVision,
+		label,
+		describedBy,
+		options: items,
+		onChange: onSelectedItemChange,
+		/** @type {import('../select-control/types').SelectControlProps.size} */
+		size = 'default',
+		value: _selectedItem,
+		onMouseOver,
+		onMouseOut,
+	} = props;
+
 	const {
 		getLabelProps,
 		getToggleButtonProps,
@@ -173,6 +178,8 @@ export default function CustomSelectControl( {
 				suffix={ <SelectControlChevronDown /> }
 			>
 				<SelectControlSelect
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 					as="button"
 					onFocus={ () => setIsFocused( true ) }
 					onBlur={ () => setIsFocused( false ) }

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

@@ -207,6 +207,8 @@ function UnforwardedDateTimePicker(
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
  *       is12Hour
+ *       __nextRemoveHelpButton
+ *       __nextRemoveResetButton
  *     />
  *   );
  * };

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

@@ -52,6 +52,10 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
 );
+Default.args = {
+	__nextRemoveHelpButton: true,
+	__nextRemoveResetButton: true,
+};
 
 export const WithEvents: ComponentStory< typeof DateTimePicker > =
 	Template.bind( {} );

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

@@ -180,7 +180,7 @@ export function TimePicker( {
 			min={ 1 }
 			max={ 31 }
 			required
-			hideHTMLArrows
+			spinControls="none"
 			isPressEnterToChange
 			isDragEnabled={ false }
 			isShiftStepEnabled={ false }
@@ -246,7 +246,7 @@ export function TimePicker( {
 							min={ is12Hour ? 1 : 0 }
 							max={ is12Hour ? 12 : 23 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -273,7 +273,7 @@ export function TimePicker( {
 							min={ 0 }
 							max={ 59 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -344,7 +344,7 @@ export function TimePicker( {
 						min={ 1 }
 						max={ 9999 }
 						required
-						hideHTMLArrows
+						spinControls="none"
 						isPressEnterToChange
 						isDragEnabled={ false }
 						isShiftStepEnabled={ false }

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

@@ -38,6 +38,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -309,6 +310,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -590,6 +592,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -883,6 +886,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;

package/src/disabled/README.md

@@ -47,6 +47,8 @@ function CustomButton( props ) {
 }
 ```
 
+_Note: this component may not behave as expected in browsers that don't support [the `inert` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert). We recommend adding [the official WICG polyfill](https://github.com/WICG/inert) when using this component in your project._
+
 ### Props
 
 The component accepts the following props:

package/src/disabled/index.tsx

@@ -15,7 +15,14 @@ const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
 /**
- * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
+ * `Disabled` is a component which disables descendant tabbable elements and
+ * prevents pointer interaction.
+ *
+ * _Note: this component may not behave as expected in browsers that don't
+ * support the `inert` HTML attribute. We recommend adding the official WICG
+ * polyfill when using this component in your project._
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
  *
  * ```jsx
  * import { Button, Disabled, TextControl } from '@wordpress/components';

package/src/disabled/test/index.tsx

@@ -24,7 +24,6 @@ describe( 'Disabled', () => {
 			</Disabled>
 		);
 
-		// @ts-ignore
 		expect( container.firstChild ).toHaveAttribute( 'inert' );
 	} );
 
@@ -40,12 +39,10 @@ describe( 'Disabled', () => {
 
 		const { container, rerender } = render( <MaybeDisable /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
@@ -58,12 +55,10 @@ describe( 'Disabled', () => {
 
 		const { rerender, container } = render( <MaybeDisable /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 

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`