@wordpress/components 19.14.0 → 19.15.0

package/src/dropdown-menu/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty } from 'lodash';
 import { Platform } from 'react-native';
 /**
  * WordPress dependencies
@@ -53,13 +52,13 @@ function DropdownMenu( {
 	popoverProps,
 	toggleProps,
 } ) {
-	if ( isEmpty( controls ) && ! isFunction( children ) ) {
+	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
 	}
 
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets;
-	if ( ! isEmpty( controls ) ) {
+	if ( controls?.length ) {
 		controlSets = controls;
 		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
 			controlSets = [ controlSets ];
@@ -131,8 +130,7 @@ function DropdownMenu( {
 							title={ label }
 							style={ { paddingLeft: 0, paddingRight: 0 } }
 						>
-							{ flatMap(
-								controlSets,
+							{ controlSets?.flatMap(
 								( controlSet, indexOfSet ) =>
 									controlSet.map(
 										( control, indexOfControl ) => (

package/src/elevation/hook.js

@@ -103,9 +103,9 @@ export function useElevation( props ) {
 		return cx(
 			styles.Elevation,
 			sx.Base,
-			sx.hover && sx.hover,
-			sx.focus && sx.focus,
-			sx.active && sx.active,
+			sx.hover,
+			sx.focus,
+			sx.active,
 			className
 		);
 	}, [

package/src/external-link/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { compact, uniq } from 'lodash';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -28,9 +27,16 @@ function UnforwardedExternalLink(
 	ref: ForwardedRef< HTMLAnchorElement >
 ) {
 	const { href, children, className, rel = '', ...additionalProps } = props;
-	const optimizedRel = uniq(
-		compact( [ ...rel.split( ' ' ), 'external', 'noreferrer', 'noopener' ] )
-	).join( ' ' );
+	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 */

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

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, clone, uniq, map, difference, identity, some } from 'lodash';
+import { last, clone, uniq, map, difference, some } from 'lodash';
 import classnames from 'classnames';
 import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
 
@@ -30,8 +30,12 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  */
 import Token from './token';
 import TokenInput from './token-input';
+import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
+import { FlexItem } from '../flex';
+
+const identity = ( value: string ) => value;
 
 /**
  * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
@@ -71,6 +75,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
+		__next36pxDefaultSize = false,
 	} = props;
 
 	const instanceId = useInstanceId( FormTokenField );
@@ -566,28 +571,35 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		const termsCount = tokens.length;
 
 		return (
-			<Token
-				key={ 'token-' + _value }
-				value={ _value }
-				status={ status }
-				title={ typeof token !== 'string' ? token.title : undefined }
-				displayTransform={ displayTransform }
-				onClickRemove={ onTokenClickRemove }
-				isBorderless={
-					( typeof token !== 'string' && token.isBorderless ) ||
-					isBorderless
-				}
-				onMouseEnter={
-					typeof token !== 'string' ? token.onMouseEnter : undefined
-				}
-				onMouseLeave={
-					typeof token !== 'string' ? token.onMouseLeave : undefined
-				}
-				disabled={ 'error' !== status && disabled }
-				messages={ messages }
-				termsCount={ termsCount }
-				termPosition={ termPosition }
-			/>
+			<FlexItem key={ 'token-' + _value }>
+				<Token
+					value={ _value }
+					status={ status }
+					title={
+						typeof token !== 'string' ? token.title : undefined
+					}
+					displayTransform={ displayTransform }
+					onClickRemove={ onTokenClickRemove }
+					isBorderless={
+						( typeof token !== 'string' && token.isBorderless ) ||
+						isBorderless
+					}
+					onMouseEnter={
+						typeof token !== 'string'
+							? token.onMouseEnter
+							: undefined
+					}
+					onMouseLeave={
+						typeof token !== 'string'
+							? token.onMouseLeave
+							: undefined
+					}
+					disabled={ 'error' !== status && disabled }
+					messages={ messages }
+					termsCount={ termsCount }
+					termPosition={ termPosition }
+				/>
+			</FlexItem>
 		);
 	}
 
@@ -660,7 +672,16 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				onMouseDown={ onContainerTouched }
 				onTouchStart={ onContainerTouched }
 			>
-				{ renderTokensAndInput() }
+				<TokensAndInputWrapperFlex
+					justify="flex-start"
+					align="center"
+					gap={ 1 }
+					wrap={ true }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					hasTokens={ !! value.length }
+				>
+					{ renderTokensAndInput() }
+				</TokensAndInputWrapperFlex>
 				{ isExpanded && (
 					<SuggestionsList
 						instanceId={ instanceId }

package/src/form-token-field/style.scss

@@ -1,14 +1,10 @@
 .components-form-token-field__input-container {
 	@include input-control();
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05*0.5 $grid-unit-05;
+	padding: 0;
 	cursor: text;
 
-
 	&.is-disabled {
 		background: $gray-300;
 		border-color: $gray-300;
@@ -67,7 +63,6 @@
 .components-form-token-field__token {
 	font-size: $default-font-size;
 	display: flex;
-	margin: 2px 4px 2px 0;
 	color: $gray-900;
 	max-width: 100%;
 
@@ -180,7 +175,7 @@
 	@include reduce-motion("transition");
 	list-style: none;
 	border-top: $border-width solid $gray-700;
-	margin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05);
+	margin: 0;
 	padding: 0;
 }
 

package/src/form-token-field/styles.ts

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+type TokensAndInputWrapperProps = {
+	__next36pxDefaultSize: boolean;
+	hasTokens: boolean;
+};
+
+const deprecatedPaddings = ( {
+	__next36pxDefaultSize,
+	hasTokens,
+}: TokensAndInputWrapperProps ) =>
+	! __next36pxDefaultSize &&
+	css`
+		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
+		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
+	`;
+
+export const TokensAndInputWrapperFlex = styled( Flex )`
+	padding: 5px ${ space( 1 ) };
+
+	${ deprecatedPaddings }
+`;

package/src/form-token-field/suggestions-list.tsx

@@ -17,8 +17,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import type { SuggestionsListProps } from './types';
 
-const { setTimeout, clearTimeout } = window;
-
 const handleMouseDown: MouseEventHandler = ( e ) => {
 	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
@@ -54,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = setTimeout( () => {
+				id = window.setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
 
 			return () => {
 				if ( id !== undefined ) {
-					clearTimeout( id );
+					window.clearTimeout( id );
 				}
 			};
 		},

package/src/form-token-field/types.ts

@@ -147,6 +147,13 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next36pxDefaultSize?: boolean;
 }
 
 export interface SuggestionsListProps< T = string | { value: string } > {

package/src/grid/README.md

@@ -27,56 +27,70 @@ function Example() {
 
 ## Props
 
-##### align
-
-**Type**: `CSS['alignItems']`
+##### `align`: `CSS['alignItems']`
 
 Adjusts the block alignment of children.
 
-##### alignment
+-   Required: No
 
-**Type**: `GridAlignment`
+##### `alignment`: `GridAlignment`
 
 Adjusts the horizontal and vertical alignment of children.
 
-##### columns
+-   Required: No
+
+##### `columnGap`: `CSSProperties['gridColumnGap']`
+
+Adjusts the `grid-column-gap`.
+
+-   Required: No
 
-**Type**: `number`,`(number`,`null)[]`
+##### `columns`: `number`
 
 Adjusts the number of columns of the `Grid`.
 
-##### gap
+-   Required: No
+-   Default: `2`
 
-**Type**: `number`
+##### `gap`: `number`
 
 Gap between each child.
 
-##### isInline
+-   Required: No
+-   Default: `3`
 
-**Type**: `boolean`
+##### `isInline`: `boolean`
 
 Changes the CSS display from `grid` to `inline-grid`.
 
-##### justify
+-   Required: No
 
-**Type**: `CSS['justifyContent']`
+##### `justify`: `CSS['justifyContent']`
 
 Adjusts the inline alignment of children.
 
-##### rows
+-   Required: No
 
-**Type**: `number`,`(number`,`null)[]`
+##### `rowGap`: `CSSProperties['gridRowGap']`
+
+Adjusts the `grid-row-gap`.
+
+-   Required: No
+
+##### `rows`: `number`
 
 Adjusts the number of rows of the `Grid`.
 
-##### templateColumns
+-   Required: No
 
-**Type**: `CSS['gridTemplateColumns']`
+##### `templateColumns`: `CSS['gridTemplateColumns']`
 
 Adjusts the CSS grid `template-columns`.
 
-##### templateRows
+-   Required: No
 
-**Type**: `CSS['gridTemplateRows']`
+##### `templateRows`: `CSS['gridTemplateRows']`
 
 Adjusts the CSS grid `template-rows`.
+
+-   Required: No

package/src/grid/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../ui/context';
+import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
 import useGrid from './hook';
+import type { GridProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function Grid( props, forwardedRef ) {
+function UnconnectedGrid(
+	props: WordPressComponentProps< GridProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const gridProps = useGrid( props );
 
 	return <View { ...gridProps } ref={ forwardedRef } />;
@@ -18,7 +23,6 @@ function Grid( props, forwardedRef ) {
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.
  *
- * @example
  * ```jsx
  * import {
  * 	__experimentalGrid as Grid,
@@ -36,6 +40,6 @@ function Grid( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedGrid = contextConnect( Grid, 'Grid' );
+export const Grid = contextConnect( UnconnectedGrid, 'Grid' );
 
-export default ConnectedGrid;
+export default Grid;

package/src/grid/{hook.js → hook.ts}

@@ -11,16 +11,16 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import { getAlignmentProps } from './utils';
 import { useResponsiveValue } from '../ui/utils/use-responsive-value';
 import CONFIG from '../utils/config-values';
 import { useCx } from '../utils/hooks/use-cx';
+import type { GridProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export default function useGrid( props ) {
+export default function useGrid(
+	props: WordPressComponentProps< GridProps, 'div' >
+) {
 	const {
 		align,
 		alignment,

package/src/grid/stories/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Grid } from '..';
+
+const meta: ComponentMeta< typeof Grid > = {
+	component: Grid,
+	title: 'Components (Experimental)/Grid',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		align: { control: { type: 'text' } },
+		children: { control: { type: null } },
+		columnGap: { control: { type: 'text' } },
+		columns: {
+			table: { type: { summary: 'number' } },
+			control: { type: 'number' },
+		},
+		justify: { control: { type: 'text' } },
+		rowGap: { control: { type: 'text' } },
+		rows: {
+			table: { type: { summary: 'number' } },
+			control: { type: 'number' },
+		},
+		templateColumns: { control: { type: 'text' } },
+		templateRows: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Item = ( props: { children: string } ) => (
+	<View
+		style={ {
+			borderRadius: 8,
+			background: '#eee',
+			padding: 8,
+			textAlign: 'center',
+		} }
+		{ ...props }
+	/>
+);
+
+const Template: ComponentStory< typeof Grid > = ( props ) => (
+	<Grid { ...props }>
+		<Item>One</Item>
+		<Item>Two</Item>
+		<Item>Three</Item>
+		<Item>Four</Item>
+		<Item>Five</Item>
+		<Item>Six</Item>
+		<Item>Seven</Item>
+		<Item>Eight</Item>
+	</Grid>
+);
+
+export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
+Default.args = {
+	alignment: 'bottom',
+	columns: 4,
+	gap: 2,
+};

package/src/grid/test/{grid.js → grid.tsx}

@@ -28,7 +28,7 @@ describe( 'props', () => {
 
 	test( 'should render gap', () => {
 		const { container } = render(
-			<Grid columns="3" gap={ 4 }>
+			<Grid columns={ 3 } gap={ 4 }>
 				<View />
 				<View />
 				<View />
@@ -44,7 +44,7 @@ describe( 'props', () => {
 
 	test( 'should render custom columns', () => {
 		const { container } = render(
-			<Grid columns="7">
+			<Grid columns={ 7 }>
 				<View />
 				<View />
 				<View />
@@ -59,7 +59,7 @@ describe( 'props', () => {
 
 	test( 'should render custom rows', () => {
 		const { container } = render(
-			<Grid rows="7">
+			<Grid rows={ 7 }>
 				<View />
 				<View />
 				<View />
@@ -120,7 +120,7 @@ describe( 'props', () => {
 
 	test( 'should render isInline', () => {
 		const { container } = render(
-			<Grid columns="3" isInline>
+			<Grid columns={ 3 } isInline>
 				<View />
 				<View />
 				<View />