@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/focusable-iframe/index.js

@@ -7,6 +7,7 @@ import deprecated from '@wordpress/deprecated';
 export default function FocusableIframe( { iframeRef, ...props } ) {
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
+		since: '5.9',
 		alternative: 'wp.compose.useFocusableIframe',
 	} );
 	// Disable reason: The rendered iframe is a pass-through component,

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

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/FormTokenField',
 	component: FormTokenField,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

@@ -53,7 +53,7 @@
 
 .components-form-token-field__label {
 	display: inline-block;
-	margin-bottom: $grid-unit-05;
+	margin-bottom: $grid-unit-10;
 }
 
 .components-form-token-field__help {

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/gradient-picker/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: 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/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

@@ -19,7 +19,7 @@ export default {
 	title: 'Components/Guide',
 	component: Guide,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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/higher-order/with-focus-outside/index.js

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * WordPress dependencies
  */

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

@@ -18,7 +18,7 @@ export default {
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/index.js

@@ -47,6 +47,7 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
+export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';

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

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/InputControl',
 	component: InputControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -44,6 +44,7 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),