@wordpress/components 19.12.0 → 19.15.0

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { compact, uniq } from 'lodash';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -16,14 +16,27 @@ 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(
-		compact( [ ...rel.split( ' ' ), 'external', 'noreferrer', 'noopener' ] )
-	).join( ' ' );
+	const { href, children, className, rel = '', ...additionalProps } = props;
+	const optimizedRel = [
+		...new Set(
+			[
+				...rel.split( ' ' ),
+				'external',
+				'noreferrer',
+				'noopener',
+			].filter( Boolean )
+		),
+	].join( ' ' );
 	const classes = classnames( 'components-external-link', className );
 	return (
 		/* eslint-disable react/jsx-no-target-blank */
@@ -32,7 +45,7 @@ export function ExternalLink(
 			className={ classes }
 			href={ href }
 			target="_blank"
-			rel={ rel }
+			rel={ optimizedRel }
 			ref={ ref }
 		>
 			{ children }
@@ -51,4 +64,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/README.md

@@ -1,9 +1,5 @@
 # Flex
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `Flex` is a primitive layout component that adaptively aligns child content horizontally or vertically. `Flex` powers components like `HStack` and `VStack`.
 
 ## Usage
@@ -12,20 +8,19 @@ This feature is still experimental. “Experimental” means this is an early im
 
 ```jsx
 import {
-	__experimentalFlex as Flex,
-	__experimentalFlexBlock as FlexBlock,
-	__experimentalFlexItem as FlexItem,
-	__experimentalText as Text,
+	Flex,
+	FlexBlock,
+	FlexItem,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<Flex>
 			<FlexItem>
-				<Text>Code</Text>
+				<p>Code</p>
 			</FlexItem>
 			<FlexBlock>
-				<Text>Poetry</Text>
+				<p>Poetry</p>
 			</FlexBlock>
 		</Flex>
 	);

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/flex/flex-item/README.md

@@ -8,7 +8,7 @@ A layout component to contain items of a fixed width within `Flex`.
 
 ## Usage
 
-See [`flex/README.md#usage`](/packages/components/src/flex/README.md#usage) for how to use `FlexItem`.
+See [`flex/README.md#usage`](/packages/components/src/flex/flex/README.md#usage) for how to use `FlexItem`.
 
 ## Props
 

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/grid.js

@@ -13,9 +13,6 @@ import {
 } from './styles/focal-point-picker-style';
 import { useUpdateEffect } from '../utils/hooks';
 
-const { clearTimeout, setTimeout } =
-	typeof window !== 'undefined' ? window : {};
-
 export default function FocalPointPickerGrid( {
 	bounds = {},
 	value,
@@ -52,11 +49,11 @@ function useRevealAnimation( value ) {
 
 	useUpdateEffect( () => {
 		setIsActive( true );
-		const timeout = setTimeout( () => {
+		const timeout = window.setTimeout( () => {
 			setIsActive( false );
 		}, 600 );
 
-		return () => clearTimeout( timeout );
+		return () => window.clearTimeout( timeout );
 	}, [ value ] );
 
 	return {

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/index.native.js

@@ -3,7 +3,6 @@
  */
 import { Animated, PanResponder, View } from 'react-native';
 import Video from 'react-native-video';
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -24,6 +23,7 @@ import FocalPoint from './focal-point';
 import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
+import { clamp } from '../utils/math';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
@@ -40,8 +40,8 @@ function FocalPointPicker( props ) {
 	const [ videoNaturalSize, setVideoNaturalSize ] = useState( null );
 	const [ tooltipVisible, setTooltipVisible ] = useState( false );
 
-	let locationPageOffsetX = useRef().current;
-	let locationPageOffsetY = useRef().current;
+	const locationPageOffsetX = useRef();
+	const locationPageOffsetY = useRef();
 	const videoRef = useRef( null );
 
 	useEffect( () => {
@@ -67,7 +67,7 @@ function FocalPointPicker( props ) {
 				y: focalPoint.y * containerSize.height,
 			} );
 		}
-	}, [ focalPoint, containerSize ] );
+	}, [ focalPoint, containerSize, pan ] );
 
 	// Pan responder to manage drag handle interactivity.
 	const panResponder = useMemo(
@@ -86,8 +86,8 @@ function FocalPointPicker( props ) {
 						pageX,
 						pageY,
 					} = event.nativeEvent;
-					locationPageOffsetX = pageX - x;
-					locationPageOffsetY = pageY - y;
+					locationPageOffsetX.current = pageX - x;
+					locationPageOffsetY.current = pageY - y;
 					pan.setValue( { x, y } ); // Set cursor to tap location.
 					pan.extractOffset(); // Set offset to current value.
 				},
@@ -106,8 +106,8 @@ function FocalPointPicker( props ) {
 					// Specifically, dragging the handle outside the bounds of the image
 					// results in inaccurate locationX and locationY coordinates to be
 					// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944
-					const x = pageX - locationPageOffsetX;
-					const y = pageY - locationPageOffsetY;
+					const x = pageX - locationPageOffsetX.current;
+					const y = pageY - locationPageOffsetY.current;
 					onChange( {
 						x: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),
 						y: clamp( y / containerSize?.height, 0, 1 ).toFixed(
@@ -120,7 +120,7 @@ function FocalPointPicker( props ) {
 					setSliderKey( ( prevState ) => prevState + 1 );
 				},
 			} ),
-		[ containerSize ]
+		[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]
 	);
 
 	const mediaBackground = usePreferredColorSchemeStyle(

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/focal-point-picker/tooltip/index.native.js

@@ -66,18 +66,17 @@ function Label( { align, text, xOffset, yOffset } ) {
 	}
 
 	useEffect( () => {
+		const startAnimation = () => {
+			Animated.timing( animationValue, {
+				toValue: visible ? 1 : 0,
+				duration: visible ? 300 : 150,
+				useNativeDriver: true,
+				delay: visible ? 500 : 0,
+				easing: Easing.out( Easing.quad ),
+			} ).start();
+		};
 		startAnimation();
-	}, [ visible ] );
-
-	const startAnimation = () => {
-		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
-			useNativeDriver: true,
-			delay: visible ? 500 : 0,
-			easing: Easing.out( Easing.quad ),
-		} ).start();
-	};
+	}, [ animationValue, visible ] );
 
 	// Transforms rely upon onLayout to enable custom offsets additions.
 	let tooltipTransforms;

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/README.md

@@ -60,10 +60,12 @@ import { useState } from '@wordpress/element';
 const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );
 
-	<FormToggle
-		checked={ isChecked }
-		onChange={ () => setChecked( ( state ) => ! state ) }
-	/>
+	return (
+		<FormToggle
+			checked={ isChecked }
+			onChange={ () => setChecked( ( state ) => ! state ) }
+		/>
+	);
 };
 ```
 
@@ -71,26 +73,23 @@ const MyFormToggle = () => {
 
 The component accepts the following props:
 
-#### checked
+#### `checked`: `boolean`
 
 If checked is true the toggle will be checked. If checked is false the toggle will be unchecked.
 If no value is passed the toggle will be unchecked.
 
--   Type: `Boolean`
 -   Required: No
 
-#### disabled
+#### `disabled`: `boolean`
 
 If disabled is true the toggle will be disabled and apply the appropriate styles.
 
--   Type: `Boolean`
 -   Required: No
 
-#### onChange
+#### `onChange`: `( event: ChangeEvent<HTMLInputElement> ) => void`
 
-A function that receives the checked state (boolean) as input.
+A callback function invoked when the toggle is clicked.
 
--   Type: `function`
 -   Required: Yes
 
 ## Related components

package/src/form-toggle/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { FormToggleProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+export const noop = () => {};
+
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function FormToggle(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to FormToggle.
+	props: Omit<
+		WordPressComponentProps< FormToggleProps, 'input', false >,
+		'ref'
+	>
+) {
+	const {
+		className,
+		checked,
+		id,
+		disabled,
+		onChange = noop,
+		...additionalProps
+	} = props;
+	const wrapperClasses = classnames( 'components-form-toggle', className, {
+		'is-checked': checked,
+		'is-disabled': disabled,
+	} );
+
+	return (
+		<span className={ wrapperClasses }>
+			<input
+				className="components-form-toggle__input"
+				id={ id }
+				type="checkbox"
+				checked={ checked }
+				onChange={ onChange }
+				disabled={ disabled }
+				{ ...additionalProps }
+			/>
+			<span className="components-form-toggle__track"></span>
+			<span className="components-form-toggle__thumb"></span>
+		</span>
+	);
+}
+
+export default FormToggle;

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

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FormToggle } from '..';
+
+const meta: ComponentMeta< typeof FormToggle > = {
+	component: FormToggle,
+	title: 'Components/FormToggle',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof FormToggle > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<FormToggle
+			{ ...args }
+			checked={ isChecked }
+			onChange={ ( e ) => {
+				setChecked( ( state ) => ! state );
+				onChange( e );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+Default.args = {};

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
+<span
+  class="components-form-toggle"
+>
+  <input
+    class="components-form-toggle__input"
+    type="checkbox"
+  />
+  <span
+    class="components-form-toggle__track"
+  />
+  <span
+    class="components-form-toggle__thumb"
+  />
+</span>
+`;
+
+exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -2,10 +2,11 @@
+    <span
+      class="components-form-toggle"
+    >
+      <input
+        class="components-form-toggle__input"
++       id="test"
+        type="checkbox"
+      />
+      <span
+        class="components-form-toggle__track"
+      />
+`;
+
+exports[`FormToggle basic rendering should render with an additional className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,8 +1,8 @@
+  <div>
+    <span
+-     class="components-form-toggle"
++     class="components-form-toggle testing"
+    >
+      <input
+        class="components-form-toggle__input"
+        type="checkbox"
+      />
+`;