@wordpress/components 19.12.0 → 19.13.0

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

@@ -0,0 +1,178 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithRef, MouseEventHandler } from 'react';
+
+type Messages = {
+	/**
+	 * The user added a new token.
+	 */
+	added: string;
+	/**
+	 * The user removed an existing token.
+	 */
+	removed: string;
+	/**
+	 * The user focused the button to remove the token.
+	 */
+	remove: string;
+	/**
+	 * The user tried to add a token that didn't pass the validation.
+	 */
+	__experimentalInvalid: string;
+};
+
+export interface TokenItem {
+	/**
+	 *  The value of the token.
+	 */
+	value: string;
+	/**
+	 * One of 'error', 'validating', or 'success'. Applies styles to token.
+	 */
+	status?: 'error' | 'success' | 'validating';
+	/**
+	 * If not falsey, will add a title to the token.
+	 */
+	title?: string;
+	/**
+	 * When true, renders tokens as without a background.
+	 */
+	isBorderless?: boolean;
+	/**
+	 * Function to call when onMouseEnter event triggered on token.
+	 */
+	onMouseEnter?: MouseEventHandler< HTMLSpanElement >;
+	/**
+	 *  Function to call when onMouseLeave is triggered on token.
+	 */
+	onMouseLeave?: MouseEventHandler< HTMLSpanElement >;
+}
+
+export interface FormTokenFieldProps
+	extends Pick<
+		ComponentPropsWithRef< 'input' >,
+		'autoCapitalize' | 'autoComplete' | 'className'
+	> {
+	label?: string;
+	/**
+	 * An array of strings to present to the user as suggested tokens.
+	 */
+	suggestions?: string[];
+	/**
+	 * The maximum number of suggestions to display at a time.
+	 *
+	 * @default 100
+	 */
+	maxSuggestions?: number;
+	/**
+	 * An array of strings or objects to display as tokens in the field.
+	 * If objects are present in the array, they **must** have a property of `value`.
+	 */
+	value?: ( string | TokenItem )[];
+	/**
+	 * Function to call to transform tokens for display.
+	 * (In the editor, this is needed to decode HTML entities embedded in tags
+	 * - otherwise entities like `&` in tag names are double-encoded like `&amp;`,
+	 * once by the REST API and once by React).
+	 */
+	displayTransform?: ( token: string ) => string;
+	/**
+	 * Function to call to transform tokens for saving. The default is to trim the token value.
+	 * This function is also applied when matching suggestions against the current value
+	 * so that matching works correctly with leading or trailing spaces. (In the editor,
+	 * this is needed to remove leading and trailing spaces from tag names, like wp-admin does.
+	 * Otherwise the REST API won't save them.)
+	 *
+	 * @default ( token: string ) => token.trim()
+	 */
+	saveTransform?: ( token: string ) => string;
+	/**
+	 * Function to call when the tokens have changed. An array of new tokens is passed to the callback.
+	 *
+	 */
+	onChange?: ( tokens: ( string | TokenItem )[] ) => void;
+	/**
+	 * Function to call when the users types in the input field. It can be used to trigger autocomplete requests.
+	 *
+	 */
+	onInputChange?: ( input: string ) => void;
+	/**
+	 * Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.
+	 *
+	 */
+	onFocus?: ( event: FocusEvent ) => void;
+	/**
+	 *  When true, renders tokens as without a background.
+	 */
+	isBorderless?: boolean;
+	/**
+	 * If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`.
+	 */
+	maxLength?: number;
+	/**
+	 * When true, tokens are not able to be added or removed.
+	 */
+	disabled?: boolean;
+	/**
+	 * If passed, the `TokenField` input will show a placeholder string if no value tokens are present.
+	 */
+	placeholder?: string;
+	/**
+	 * If true, will add a token when `TokenField` is focused and `space` is pressed.
+	 */
+	tokenizeOnSpace?: boolean;
+	/**
+	 * Allows customizing the messages presented by screen readers in different occasions:
+	 *
+	 * -   `added`: The user added a new token.
+	 * -   `removed`: The user removed an existing token.
+	 * -   `remove` : The user focused the button to remove the token.
+	 * -   `__experimentalInvalid`: The user tried to add a token that didn't pass the validation.
+	 */
+	messages?: Messages;
+	/**
+	 * If true, the suggestions list will be always expanded when the input field has the focus.
+	 */
+	__experimentalExpandOnFocus?: boolean;
+	/**
+	 * If passed, all introduced values will be validated before being added as tokens.
+	 *
+	 * @default () => true
+	 */
+	__experimentalValidateInput?: ( token: string ) => boolean;
+	/**
+	 * If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
+	 *
+	 * @default true
+	 */
+	__experimentalShowHowTo?: boolean;
+}
+
+export interface SuggestionsListProps< T = string | { value: string } > {
+	selectedIndex: number;
+	scrollIntoView: boolean;
+	match: T;
+	onHover: ( suggestion: T ) => void;
+	onSelect: ( suggestion: T ) => void;
+	suggestions: T[];
+	displayTransform: ( value: T ) => string;
+	instanceId: string | number;
+}
+
+export interface TokenProps extends TokenItem {
+	displayTransform: ( value: string ) => string;
+	disabled: boolean;
+	onClickRemove: ( { value }: { value: string } ) => void;
+	messages: Messages;
+	termPosition: number;
+	termsCount: number;
+}
+
+export interface TokenInputProps {
+	isExpanded: boolean;
+	instanceId: string | number;
+	selectedSuggestionIndex: number;
+	onChange?: ( { value }: { value: string } ) => void;
+	value: string;
+}

package/src/gradient-picker/index.js

@@ -108,9 +108,10 @@ export default function GradientPicker( {
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 } ) {
-	const clearGradient = useCallback( () => onChange( undefined ), [
-		onChange,
-	] );
+	const clearGradient = useCallback(
+		() => onChange( undefined ),
+		[ onChange ]
+	);
 	const Component =
 		__experimentalHasMultipleOrigins && gradients?.length
 			? MultipleOrigin

package/src/heading/hook.ts

@@ -51,10 +51,11 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 export function useHeading(
 	props: WordPressComponentProps< HeadingProps, 'h1' >
 ) {
-	const { as: asProp, level = 2, ...otherProps } = useContextSystem(
-		props,
-		'Heading'
-	);
+	const {
+		as: asProp,
+		level = 2,
+		...otherProps
+	} = useContextSystem( props, 'Heading' );
 
 	const as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;
 

package/src/higher-order/navigate-regions/index.js

@@ -95,10 +95,12 @@ export function useNavigateRegions( shortcuts = defaultShortcuts ) {
 }
 
 export default createHigherOrderComponent(
-	( Component ) => ( { shortcuts, ...props } ) => (
-		<div { ...useNavigateRegions( shortcuts ) }>
-			<Component { ...props } />
-		</div>
-	),
+	( Component ) =>
+		( { shortcuts, ...props } ) =>
+			(
+				<div { ...useNavigateRegions( shortcuts ) }>
+					<Component { ...props } />
+				</div>
+			),
 	'navigateRegions'
 );

package/src/higher-order/with-filters/test/index.js

@@ -81,12 +81,13 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-compose',
-			( FilteredComponent ) => () => (
-				<div>
-					<FilteredComponent />
-					<ComposedComponent />
-				</div>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<div>
+						<FilteredComponent />
+						<ComposedComponent />
+					</div>
+				)
 		);
 		const EnhancedComponent = withFilters( hookName )( MyComponent );
 
@@ -106,11 +107,12 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () => (
-				<blockquote>
-					<FilteredComponent />
-				</blockquote>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
 		);
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -143,11 +145,12 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () => (
-				<blockquote>
-					<FilteredComponent />
-				</blockquote>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
 		);
 		jest.runAllTimers();
 
@@ -174,20 +177,22 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () => (
-				<blockquote>
-					<FilteredComponent />
-				</blockquote>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
 		);
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-2',
-			( FilteredComponent ) => () => (
-				<section>
-					<FilteredComponent />
-				</section>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<section>
+						<FilteredComponent />
+					</section>
+				)
 		);
 		jest.runAllTimers();
 
@@ -213,11 +218,12 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy',
-			( FilteredComponent ) => () => (
-				<div>
-					<FilteredComponent />
-				</div>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<div>
+						<FilteredComponent />
+					</div>
+				)
 		);
 		jest.runAllTimers();
 
@@ -249,11 +255,12 @@ describe( 'withFilters', () => {
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () => (
-				<blockquote>
-					<FilteredComponent />
-				</blockquote>
-			)
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
 		);
 		jest.runAllTimers();
 

package/src/higher-order/with-focus-return/index.js

@@ -31,18 +31,20 @@ function isComponentLike( object ) {
  * @return {Function} Higher Order Component with the focus restauration behaviour.
  */
 export default createHigherOrderComponent( ( options ) => {
-	const HoC = ( { onFocusReturn } = {} ) => ( WrappedComponent ) => {
-		const WithFocusReturn = ( props ) => {
-			const ref = useFocusReturn( onFocusReturn );
-			return (
-				<div ref={ ref }>
-					<WrappedComponent { ...props } />
-				</div>
-			);
-		};
+	const HoC =
+		( { onFocusReturn } = {} ) =>
+		( WrappedComponent ) => {
+			const WithFocusReturn = ( props ) => {
+				const ref = useFocusReturn( onFocusReturn );
+				return (
+					<div ref={ ref }>
+						<WrappedComponent { ...props } />
+					</div>
+				);
+			};
 
-		return WithFocusReturn;
-	};
+			return WithFocusReturn;
+		};
 
 	if ( isComponentLike( options ) ) {
 		const WrappedComponent = options;
@@ -55,8 +57,7 @@ export default createHigherOrderComponent( ( options ) => {
 export const Provider = ( { children } ) => {
 	deprecated( 'wp.components.FocusReturnProvider component', {
 		since: '5.7',
-		hint:
-			'This provider is not used anymore. You can just remove it from your codebase',
+		hint: 'This provider is not used anymore. You can just remove it from your codebase',
 	} );
 
 	return children;

package/src/higher-order/with-spoken-messages/index.js

@@ -15,12 +15,13 @@ import { speak } from '@wordpress/a11y';
  * @return {WPComponent} The wrapped component.
  */
 export default createHigherOrderComponent(
-	( Component ) => ( props ) => (
-		<Component
-			{ ...props }
-			speak={ speak }
-			debouncedSpeak={ useDebounce( speak, 500 ) }
-		/>
-	),
+	( Component ) => ( props ) =>
+		(
+			<Component
+				{ ...props }
+				speak={ speak }
+				debouncedSpeak={ useDebounce( speak, 500 ) }
+			/>
+		),
 	'withSpokenMessages'
 );

package/src/higher-order/with-spoken-messages/test/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render } from 'enzyme';
-import { isFunction } from 'lodash';
 
 /**
  * Internal dependencies
@@ -13,6 +12,7 @@ describe( 'withSpokenMessages', () => {
 	it( 'should generate speak and debouncedSpeak props', () => {
 		const testSpeak = jest.fn();
 		const testDebouncedSpeak = jest.fn();
+		const isFunction = ( maybeFunc ) => typeof maybeFunc === 'function';
 		const DumpComponent = withSpokenMessages(
 			( { speak, debouncedSpeak } ) => {
 				testSpeak( isFunction( speak ) );

package/src/icon/index.tsx

@@ -68,10 +68,10 @@ function Icon< P >( {
 
 	if ( 'function' === typeof icon ) {
 		if ( icon.prototype instanceof Component ) {
-			return createElement( icon, ( {
+			return createElement( icon, {
 				size,
 				...additionalProps,
-			} as unknown ) as P );
+			} as unknown as P );
 		}
 
 		return ( icon as ( ...args: any[] ) => JSX.Element )( {

package/src/input-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classNames from 'classnames';
 import type { ForwardedRef } from 'react';
 
@@ -19,6 +18,8 @@ import InputField from './input-field';
 import type { InputControlProps } from './types';
 import { useDraft } from './utils';
 
+const noop = () => {};
+
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputControl );
 	const id = `inspector-input-control-${ instanceId }`;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import { useDrag } from '@use-gesture/react';
 import type {
 	SyntheticEvent,
@@ -26,6 +25,8 @@ import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
 import type { InputFieldProps } from './types';
 
+const noop = () => {};
+
 function InputField(
 	{
 		disabled = false,

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

@@ -145,27 +145,29 @@ export function useInputControlStateReducer(
 		mergeInitialState( initialState )
 	);
 
-	const createChangeEvent = ( type: actions.ChangeEventAction[ 'type' ] ) => (
-		nextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],
-		event: actions.ChangeEventAction[ 'payload' ][ 'event' ]
-	) => {
-		dispatch( {
-			type,
-			payload: { value: nextValue, event },
-		} as actions.InputAction );
-	};
-
-	const createKeyEvent = ( type: actions.KeyEventAction[ 'type' ] ) => (
-		event: actions.KeyEventAction[ 'payload' ][ 'event' ]
-	) => {
-		dispatch( { type, payload: { event } } );
-	};
-
-	const createDragEvent = ( type: actions.DragEventAction[ 'type' ] ) => (
-		payload: actions.DragEventAction[ 'payload' ]
-	) => {
-		dispatch( { type, payload } );
-	};
+	const createChangeEvent =
+		( type: actions.ChangeEventAction[ 'type' ] ) =>
+		(
+			nextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],
+			event: actions.ChangeEventAction[ 'payload' ][ 'event' ]
+		) => {
+			dispatch( {
+				type,
+				payload: { value: nextValue, event },
+			} as actions.InputAction );
+		};
+
+	const createKeyEvent =
+		( type: actions.KeyEventAction[ 'type' ] ) =>
+		( event: actions.KeyEventAction[ 'payload' ][ 'event' ] ) => {
+			dispatch( { type, payload: { event } } );
+		};
+
+	const createDragEvent =
+		( type: actions.DragEventAction[ 'type' ] ) =>
+		( payload: actions.DragEventAction[ 'payload' ] ) => {
+			dispatch( { type, payload } );
+		};
 
 	/**
 	 * Actions for the reducer

package/src/input-control/utils.ts

@@ -63,7 +63,7 @@ export function useDragCursor(
 			// @ts-expect-error
 			document.documentElement.style.cursor = null;
 		}
-	}, [ isDragging ] );
+	}, [ isDragging, dragCursor ] );
 
 	return dragCursor;
 }

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

@@ -57,7 +57,8 @@ export const _default = () => {
 		size: select(
 			'Item 1: size',
 			{
-				'unset (defaults to the value set on the <ItemGroup> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <ItemGroup> parent)':
+					PROP_UNSET,
 				small: 'small',
 				medium: 'medium',
 				large: 'large',

package/src/menu-item/test/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,6 +13,8 @@ import { more } from '@wordpress/icons';
  */
 import { MenuItem } from '../';
 
+const noop = () => {};
+
 describe( 'MenuItem', () => {
 	it( 'should match snapshot when only label provided', () => {
 		const wrapper = shallow( <MenuItem>My item</MenuItem> );

package/src/menu-items-choice/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { check } from '@wordpress/icons';
  */
 import MenuItem from '../menu-item';
 
+const noop = () => {};
+
 export default function MenuItemsChoice( {
 	choices = [],
 	onHover = noop,

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

@@ -36,7 +36,5 @@ export const BottomSheetContext = createContext( {
 	setIsFullScreen: () => {},
 } );
 
-export const {
-	Provider: BottomSheetProvider,
-	Consumer: BottomSheetConsumer,
-} = BottomSheetContext;
+export const { Provider: BottomSheetProvider, Consumer: BottomSheetConsumer } =
+	BottomSheetContext;

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

@@ -37,9 +37,8 @@ class BottomSheetCell extends Component {
 			isScreenReaderEnabled: false,
 		};
 
-		this.handleScreenReaderToggled = this.handleScreenReaderToggled.bind(
-			this
-		);
+		this.handleScreenReaderToggled =
+			this.handleScreenReaderToggled.bind( this );
 
 		this.isCurrent = false;
 	}

package/src/mobile/bottom-sheet/cycle-picker-cell.native.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { findIndex } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -14,7 +10,9 @@ export default function BottomSheetCyclePickerCell( props ) {
 		return options[ ( selectedOptionIndex + 1 ) % options.length ].value;
 	};
 
-	const selectedOptionIndex = findIndex( options, [ 'value', value ] );
+	const selectedOptionIndex = options.findIndex(
+		( option ) => option.value === value
+	);
 	const optionsContainsValue =
 		options.length > 0 && selectedOptionIndex !== -1;