@wordpress/components 19.12.0 → 19.13.0

package/src/external-link/README.md

@@ -1,5 +1,7 @@
 # ExternalLink
 
+Link to an external resource.
+
 ## Usage
 
 ```jsx
@@ -9,3 +11,19 @@ const MyExternalLink = () => (
 	<ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
 );
 ```
+
+## Props
+
+The component accepts the following props. Any other props will be passed through to the `a`.
+
+### `children`: `ReactNode`
+
+The content to be displayed within the link.
+
+-   Required: Yes
+
+### `href`: `string`
+
+The URL of the external resource.
+
+-   Required: Yes

package/src/external-link/{index.js → index.tsx}

@@ -3,6 +3,7 @@
  */
 import classnames from 'classnames';
 import { compact, uniq } from 'lodash';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -16,12 +17,18 @@ import { external } from '@wordpress/icons';
  */
 import { VisuallyHidden } from '../visually-hidden';
 import { StyledIcon } from './styles/external-link-styles';
+import type { ExternalLinkProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-export function ExternalLink(
-	{ href, children, className, rel = '', ...additionalProps },
-	ref
+function UnforwardedExternalLink(
+	props: Omit<
+		WordPressComponentProps< ExternalLinkProps, 'a', false >,
+		'target'
+	>,
+	ref: ForwardedRef< HTMLAnchorElement >
 ) {
-	rel = uniq(
+	const { href, children, className, rel = '', ...additionalProps } = props;
+	const optimizedRel = uniq(
 		compact( [ ...rel.split( ' ' ), 'external', 'noreferrer', 'noopener' ] )
 	).join( ' ' );
 	const classes = classnames( 'components-external-link', className );
@@ -32,7 +39,7 @@ export function ExternalLink(
 			className={ classes }
 			href={ href }
 			target="_blank"
-			rel={ rel }
+			rel={ optimizedRel }
 			ref={ ref }
 		>
 			{ children }
@@ -51,4 +58,17 @@ export function ExternalLink(
 	);
 }
 
-export default forwardRef( ExternalLink );
+/**
+ * Link to an external resource.
+ *
+ * ```jsx
+ * import { ExternalLink } from '@wordpress/components';
+ *
+ * const MyExternalLink = () => (
+ *   <ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
+ * );
+ * ```
+ */
+export const ExternalLink = forwardRef( UnforwardedExternalLink );
+
+export default ExternalLink;

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ExternalLink from '..';
+
+const meta: ComponentMeta< typeof ExternalLink > = {
+	component: ExternalLink,
+	title: 'Components/ExternalLink',
+	argTypes: {
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ExternalLink > = ( { ...args } ) => {
+	return <ExternalLink { ...args } />;
+};
+
+export const Default: ComponentStory< typeof ExternalLink > = Template.bind(
+	{}
+);
+Default.args = {
+	children: 'WordPress',
+	href: 'https://wordpress.org',
+};

package/src/external-link/types.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ExternalLinkProps = {
+	/**
+	 * The content to be displayed within the link.
+	 */
+	children: ReactNode;
+	/**
+	 * The URL of the external resource.
+	 */
+	href: string;
+};

package/src/flex/flex/hook.js

@@ -64,6 +64,7 @@ export function useFlex( props ) {
 		typeof direction === 'string' && direction.includes( 'reverse' );
 
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 
 	const classes = useMemo( () => {
 		const sx = {};
@@ -123,6 +124,8 @@ export function useFlex( props ) {
 			isColumn ? styles.ItemsColumn : styles.ItemsRow,
 			className
 		);
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		align,
 		className,
@@ -134,7 +137,7 @@ export function useFlex( props ) {
 		isReverse,
 		justify,
 		wrap,
-		rtl.watch(),
+		rtlWatchResult,
 	] );
 
 	return { ...otherProps, className: classes, isColumn };

package/src/focal-point-picker/controls.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,6 +14,7 @@ import { fractionToPercentage } from './utils';
 
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
+const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	onChange = noop,

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

@@ -272,14 +272,8 @@ export class FocalPointPicker extends Component {
 		};
 	}
 	render() {
-		const {
-			autoPlay,
-			className,
-			help,
-			instanceId,
-			label,
-			url,
-		} = this.props;
+		const { autoPlay, className, help, instanceId, label, url } =
+			this.props;
 		const { bounds, isDragging, percentages } = this.state;
 		const iconCoordinates = this.iconCoordinates();
 

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,8 @@ import { useRef, useLayoutEffect } from '@wordpress/element';
 import { MediaPlaceholder } from './styles/focal-point-picker-style';
 import { isVideoType } from './utils';
 
+const noop = () => {};
+
 export default function Media( {
 	alt,
 	autoPlay,

package/src/font-size-picker/index.js

@@ -103,9 +103,11 @@ function FontSizePicker(
 		return hint;
 	}, [
 		showCustomValueControl,
-		selectedOption?.slug,
+		selectedOption?.name,
+		selectedOption?.size,
 		value,
 		isCustomValue,
+		shouldUseSelectControl,
 		fontSizesContainComplexValues,
 	] );
 

package/src/form-toggle/index.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
+
+export const noop = () => {};
 
 function FormToggle( {
 	className,

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

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
-import FormToggle from '../';
+import FormToggle, { noop } from '../';
 
 describe( 'FormToggle', () => {
 	describe( 'basic rendering', () => {