@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

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

@@ -2,157 +2,146 @@
  * External dependencies
  */
 import { map } from 'lodash';
-import scrollIntoView from 'dom-scroll-into-view';
+import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSafeTimeout } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
 
-class SuggestionsList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.handleMouseDown = this.handleMouseDown.bind( this );
-		this.bindList = this.bindList.bind( this );
-	}
+const emptyList = Object.freeze( [] );
 
-	componentDidUpdate() {
-		// only have to worry about scrolling selected suggestion into view
-		// when already expanded
-		if (
-			this.props.selectedIndex > -1 &&
-			this.props.scrollIntoView &&
-			this.list.children[ this.props.selectedIndex ]
-		) {
-			this.scrollingIntoView = true;
-			scrollIntoView(
-				this.list.children[ this.props.selectedIndex ],
-				this.list,
-				{
-					onlyScrollIfNeeded: true,
-				}
-			);
+const handleMouseDown = ( e ) => {
+	// By preventing default here, we will not lose focus of <input> when clicking a suggestion
+	e.preventDefault();
+};
 
-			this.props.setTimeout( () => {
-				this.scrollingIntoView = false;
-			}, 100 );
-		}
-	}
+function SuggestionsList( {
+	selectedIndex,
+	scrollIntoView,
+	match = '',
+	onHover,
+	onSelect,
+	suggestions = emptyList,
+	displayTransform,
+	instanceId,
+	setTimeout,
+} ) {
+	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
-	bindList( ref ) {
-		this.list = ref;
-	}
+	const listRef = useRefEffect(
+		( listNode ) => {
+			// only have to worry about scrolling selected suggestion into view
+			// when already expanded
+			if (
+				selectedIndex > -1 &&
+				scrollIntoView &&
+				listNode.children[ selectedIndex ]
+			) {
+				setScrollingIntoView( true );
+				scrollView( listNode.children[ selectedIndex ], listNode, {
+					onlyScrollIfNeeded: true,
+				} );
+				setTimeout( () => {
+					setScrollingIntoView( false );
+				}, 100 );
+			}
+		},
+		[ selectedIndex, scrollIntoView ]
+	);
 
-	handleHover( suggestion ) {
+	const handleHover = ( suggestion ) => {
 		return () => {
-			if ( ! this.scrollingIntoView ) {
-				this.props.onHover( suggestion );
+			if ( ! scrollingIntoView ) {
+				onHover?.( suggestion );
 			}
 		};
-	}
+	};
 
-	handleClick( suggestion ) {
+	const handleClick = ( suggestion ) => {
 		return () => {
-			this.props.onSelect( suggestion );
+			onSelect?.( suggestion );
 		};
-	}
+	};
 
-	handleMouseDown( e ) {
-		// By preventing default here, we will not lose focus of <input> when clicking a suggestion
-		e.preventDefault();
-	}
-
-	computeSuggestionMatch( suggestion ) {
-		const match = this.props
-			.displayTransform( this.props.match || '' )
-			.toLocaleLowerCase();
-		if ( match.length === 0 ) {
+	const computeSuggestionMatch = ( suggestion ) => {
+		const matchText = displayTransform( match || '' ).toLocaleLowerCase();
+		if ( matchText.length === 0 ) {
 			return null;
 		}
 
-		suggestion = this.props.displayTransform( suggestion );
-		const indexOfMatch = suggestion.toLocaleLowerCase().indexOf( match );
+		suggestion = displayTransform( suggestion );
+		const indexOfMatch = suggestion
+			.toLocaleLowerCase()
+			.indexOf( matchText );
 
 		return {
 			suggestionBeforeMatch: suggestion.substring( 0, indexOfMatch ),
 			suggestionMatch: suggestion.substring(
 				indexOfMatch,
-				indexOfMatch + match.length
+				indexOfMatch + matchText.length
 			),
 			suggestionAfterMatch: suggestion.substring(
-				indexOfMatch + match.length
+				indexOfMatch + matchText.length
 			),
 		};
-	}
+	};
 
-	render() {
-		// We set `tabIndex` here because otherwise Firefox sets focus on this
-		// div when tabbing off of the input in `TokenField` -- not really sure
-		// why, since usually a div isn't focusable by default
-		// TODO does this still apply now that it's a <ul> and not a <div>?
-		return (
-			<ul
-				ref={ this.bindList }
-				className="components-form-token-field__suggestions-list"
-				id={ `components-form-token-suggestions-${ this.props.instanceId }` }
-				role="listbox"
-			>
-				{ map( this.props.suggestions, ( suggestion, index ) => {
-					const match = this.computeSuggestionMatch( suggestion );
-					const classeName = classnames(
-						'components-form-token-field__suggestion',
-						{
-							'is-selected': index === this.props.selectedIndex,
-						}
-					);
+	// We set `tabIndex` here because otherwise Firefox sets focus on this
+	// div when tabbing off of the input in `TokenField` -- not really sure
+	// why, since usually a div isn't focusable by default
+	// TODO does this still apply now that it's a <ul> and not a <div>?
+	return (
+		<ul
+			ref={ listRef }
+			className="components-form-token-field__suggestions-list"
+			id={ `components-form-token-suggestions-${ instanceId }` }
+			role="listbox"
+		>
+			{ map( suggestions, ( suggestion, index ) => {
+				const matchText = computeSuggestionMatch( suggestion );
+				const className = classnames(
+					'components-form-token-field__suggestion',
+					{
+						'is-selected': index === selectedIndex,
+					}
+				);
 
-					/* eslint-disable jsx-a11y/click-events-have-key-events */
-					return (
-						<li
-							id={ `components-form-token-suggestions-${ this.props.instanceId }-${ index }` }
-							role="option"
-							className={ classeName }
-							key={
-								suggestion?.value
-									? suggestion.value
-									: this.props.displayTransform( suggestion )
-							}
-							onMouseDown={ this.handleMouseDown }
-							onClick={ this.handleClick( suggestion ) }
-							onMouseEnter={ this.handleHover( suggestion ) }
-							aria-selected={ index === this.props.selectedIndex }
-						>
-							{ match ? (
-								<span
-									aria-label={ this.props.displayTransform(
-										suggestion
-									) }
-								>
-									{ match.suggestionBeforeMatch }
-									<strong className="components-form-token-field__suggestion-match">
-										{ match.suggestionMatch }
-									</strong>
-									{ match.suggestionAfterMatch }
-								</span>
-							) : (
-								this.props.displayTransform( suggestion )
-							) }
-						</li>
-					);
-					/* eslint-enable jsx-a11y/click-events-have-key-events */
-				} ) }
-			</ul>
-		);
-	}
+				/* eslint-disable jsx-a11y/click-events-have-key-events */
+				return (
+					<li
+						id={ `components-form-token-suggestions-${ instanceId }-${ index }` }
+						role="option"
+						className={ className }
+						key={
+							suggestion?.value
+								? suggestion.value
+								: displayTransform( suggestion )
+						}
+						onMouseDown={ handleMouseDown }
+						onClick={ handleClick( suggestion ) }
+						onMouseEnter={ handleHover( suggestion ) }
+						aria-selected={ index === selectedIndex }
+					>
+						{ matchText ? (
+							<span aria-label={ displayTransform( suggestion ) }>
+								{ matchText.suggestionBeforeMatch }
+								<strong className="components-form-token-field__suggestion-match">
+									{ matchText.suggestionMatch }
+								</strong>
+								{ matchText.suggestionAfterMatch }
+							</span>
+						) : (
+							displayTransform( suggestion )
+						) }
+					</li>
+				);
+				/* eslint-enable jsx-a11y/click-events-have-key-events */
+			} ) }
+		</ul>
+	);
 }
 
-SuggestionsList.defaultProps = {
-	match: '',
-	onHover: () => {},
-	onSelect: () => {},
-	suggestions: Object.freeze( [] ),
-};
-
 export default withSafeTimeout( SuggestionsList );

package/src/form-token-field/test/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { filter, map } from 'lodash';
-import TestUtils from 'react-dom/test-utils';
+import TestUtils, { act } from 'react-dom/test-utils';
 import ReactDOM from 'react-dom';
 
 /**
@@ -262,7 +262,9 @@ describe( 'FormTokenField', () => {
 
 			// before sending a hover event, we need to wait for
 			// SuggestionList#_scrollingIntoView to become false
-			jest.advanceTimersByTime( 100 );
+			act( () => {
+				jest.advanceTimersByTime( 100 );
+			} );
 
 			TestUtils.Simulate.mouseEnter( hoverSuggestion );
 			expect( getSelectedSuggestion() ).toEqual( [ 'wi', 'th' ] );

package/src/gradient-picker/README.md

@@ -0,0 +1,94 @@
+# GradientPicker
+
+GradientPicker is a React component that renders a color gradient picker to define a multi step gradient. There's either a _linear_ or a _radial_ type available.
+
+![gradient-picker](https://user-images.githubusercontent.com/881729/147505438-3818c4c7-65b5-4394-b97b-af903c62adce.png)
+
+## Usage
+
+Render a GradientPicker.
+
+```jsx
+import { GradientPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const myGradientPicker = () => {
+	const [ gradient, setGradient ] = useState( null );
+
+	return (
+		<GradientPicker
+			value={ gradient }
+			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+			gradients={ [
+				{
+					name: 'JShine',
+					gradient:
+						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+					slug: 'jshine',
+				},
+				{
+					name: 'Moonlit Asteroid',
+					gradient:
+						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+					slug: 'moonlit-asteroid',
+				},
+				{
+					name: 'Rastafarie',
+					gradient:
+						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+					slug: 'rastafari',
+				},
+			] }
+		/>
+	);
+};
+```
+
+## Props
+
+The component accepts the following props:
+
+### value
+
+The current value of the gradient. Pass a css gradient like `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`. Optionally pass in a `null` value to specify no gradient is currently selected.
+
+-   Type: `string`
+-   Required: No
+-   Default: `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`
+
+### onChange
+
+The function called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
+
+-   Type: `Function`
+-   Required: Yes
+
+### gradients
+
+An array of objects of predefined gradients which show up as `CircularOptionPicker` above the gradient selector.
+
+-   Type: `array`
+-   Required: No
+
+### clearable
+
+Whether the palette should have a clearing button or not.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: true
+
+### clearGradient
+
+Called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
+
+-   Type: `Function`
+-   Required: No
+
+### disableCustomGradients
+
+If true, the gradient picker will not be displayed and only defined gradients from `gradients` are available.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: false

package/src/grid/hook.js

@@ -71,6 +71,7 @@ export default function useGrid( props ) {
 		alignment,
 		className,
 		columnGap,
+		cx,
 		gap,
 		gridTemplateColumns,
 		gridTemplateRows,

package/src/grid/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 type ResponsiveCSSValue< T > = Array< T | undefined > | T;

package/src/h-stack/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 /**

package/src/heading/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/icon/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { ComponentType, HTMLProps, SVGProps } from 'react';
 
 /**

package/src/input-control/index.tsx

@@ -3,7 +3,6 @@
  */
 import { noop } from 'lodash';
 import classNames from 'classnames';
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/input-control/input-base.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/input-control/input-field.tsx

@@ -3,7 +3,6 @@
  */
 import { noop } from 'lodash';
 import { useDrag } from 'react-use-gesture';
-// eslint-disable-next-line no-restricted-imports
 import type {
 	SyntheticEvent,
 	ChangeEvent,

package/src/input-control/reducer/actions.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { SyntheticEvent } from 'react';
 
 /**

package/src/input-control/reducer/reducer.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { isEmpty } from 'lodash';
-// eslint-disable-next-line no-restricted-imports
 import type { SyntheticEvent } from 'react';
 
 /**

package/src/input-control/reducer/state.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Reducer } from 'react';
 
 /**

package/src/input-control/styles/input-control-styles.tsx

@@ -3,7 +3,6 @@
  */
 import { css, SerializedStyles } from '@emotion/react';
 import styled from '@emotion/styled';
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties, ReactNode } from 'react';
 
 /**
@@ -228,18 +227,18 @@ export const Input = styled.input< InputProps >`
 	}
 `;
 
-const labelPadding = ( {
+const labelMargin = ( {
 	labelPosition,
 }: {
 	labelPosition?: LabelPosition;
 } ) => {
-	let paddingBottom = 4;
+	let marginBottom = 8;
 
 	if ( labelPosition === 'edge' || labelPosition === 'side' ) {
-		paddingBottom = 0;
+		marginBottom = 0;
 	}
 
-	return css( { paddingTop: 0, paddingBottom } );
+	return css( { marginTop: 0, marginRight: 0, marginBottom, marginLeft: 0 } );
 };
 
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
@@ -247,11 +246,12 @@ const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 		box-sizing: border-box;
 		color: currentColor;
 		display: block;
-		margin: 0;
+		padding-top: 0;
+		padding-bottom: 0;
 		max-width: 100%;
 		z-index: 1;
 
-		${ labelPadding }
+		${ labelMargin }
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/src/input-control/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type {
 	CSSProperties,
 	ReactNode,

package/src/item-group/item/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/item-group/item/hook.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { ElementType } from 'react';
 
 /**
@@ -49,7 +48,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 				spacedAround && styles.spacedAround,
 				className
 			),
-		[ as, className, size, spacedAround ]
+		[ as, className, cx, size, spacedAround ]
 	);
 
 	const wrapperClassName = cx( styles.itemWrapper );

package/src/item-group/item-group/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/item-group/stories/index.js

@@ -145,7 +145,7 @@ const ItemWithChevron = ( {
 
 	const itemClassName = useMemo(
 		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className ]
+		[ alwaysVisible, className, cx ]
 	);
 
 	const chevronIconClassName = useMemo(
@@ -155,7 +155,7 @@ const ItemWithChevron = ( {
 				fill: currentColor;
 				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
 			` ),
-		[ isRtlLayout ]
+		[ cx, isRtlLayout ]
 	);
 
 	return (

package/src/mobile/bottom-sheet/bottom-sheet-context.native.js

@@ -32,6 +32,8 @@ export const BottomSheetContext = createContext( {
 	// Android only: Function called to control android hardware back button functionality
 	// Return true if the bottom-sheet default close action shouldn't be called
 	onHandleHardwareButtonPress: () => {},
+	// Toggle full-screen styles and dimensions
+	setIsFullScreen: () => {},
 } );
 
 export const {

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -16,7 +16,6 @@ import {
 	Children,
 	useRef,
 	cloneElement,
-	Platform,
 } from '@wordpress/element';
 
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -88,26 +87,21 @@ function BottomSheetNavigationContainer( {
 
 	const setHeight = useCallback(
 		( height ) => {
-			// The screen is fullHeight or changing from fullScreen to the default mode
+			// The screen is fullHeight
 			if (
-				( typeof currentHeight === 'string' &&
-					typeof height !== 'string' ) ||
-				typeof height === 'string'
+				typeof height === 'string' &&
+				typeof height !== typeof currentHeight
 			) {
-				// Animating the opacity for the initial modal results in the backdrop
-				// provided by react-native-modal to never transition from transparent
-				// to partially opaque black. The core issue was not idenfited, but it
-				// may relate to the experimental state of LayoutAnimation for Android.
-				// https://reactnative.dev/docs/layoutanimation
-				if ( ! Platform.isAndroid || currentHeight !== 1 ) {
-					performLayoutAnimation( ANIMATION_DURATION );
-				}
+				performLayoutAnimation( ANIMATION_DURATION );
 				setCurrentHeight( height );
 
 				return;
 			}
 
-			if ( height > 1 ) {
+			if (
+				height > 1 &&
+				Math.round( height ) !== Math.round( currentHeight )
+			) {
 				if ( currentHeight === 1 ) {
 					setCurrentHeight( height );
 				} else if ( animate ) {