@wordpress/components 19.12.0 → 19.15.0

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

@@ -20,7 +20,7 @@ import { SVG } from '@wordpress/primitives';
 import Dashicon from '../dashicon';
 import type { IconKey as DashiconIconKey } from '../dashicon/types';
 
-type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;
+export type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;
 
 interface BaseProps< P > {
 	/**
@@ -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/test/index.js

@@ -1,13 +1,24 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BaseInputControl from '../';
 
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
@@ -42,49 +53,66 @@ describe( 'InputControl', () => {
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', () => {
+		it( 'should focus its input on mousedown events', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
 			render( <InputControl type="number" onFocus={ spy } /> );
+			const target = getInput();
 
-			const input = getInput();
-			fireEvent.mouseDown( input );
+			// Hovers the input and presses (without releasing) primary button.
+			await user.pointer( [
+				{ target },
+				{ keys: '[MouseLeft]', target },
+			] );
 
 			expect( spy ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
 	describe( 'Value', () => {
-		it( 'should update value onChange', () => {
+		it( 'should update value onChange', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			render( <InputControl value="Hello" onChange={ spy } /> );
-
+			render(
+				<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
+			);
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 'There' } } );
 
-			expect( input.value ).toBe( 'There' );
-			expect( spy ).toHaveBeenCalledTimes( 1 );
+			await user.type( input, ' there' );
+
+			expect( input ).toHaveValue( 'Hello there' );
+			expect( spy ).toHaveBeenCalledTimes( ' there'.length );
+			expect( spy ).toHaveBeenLastCalledWith( 'Hello there' );
 		} );
 
-		it( 'should work as a controlled component', () => {
+		it( 'should work as a controlled component', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			const { rerender } = render(
-				<InputControl value="one" onChange={ spy } />
-			);
-
+			const Example = () => {
+				const [ state, setState ] = useState( 'one' );
+				const onChange = ( value ) => {
+					setState( value );
+					spy( value );
+				};
+				const onKeyDown = ( { key } ) => {
+					if ( key === 'Escape' ) setState( 'three' );
+				};
+				return (
+					<InputControl
+						value={ state }
+						onChange={ onChange }
+						onKeyDown={ onKeyDown }
+					/>
+				);
+			};
+			render( <Example /> );
 			const input = getInput();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: 'two' } } );
-
-			// Ensuring <InputControl /> is controlled.
-			fireEvent.blur( input );
-
-			// Updating the value.
-			rerender( <InputControl value="three" onChange={ spy } /> );
-
-			expect( input.value ).toBe( 'three' );
+			await user.type( input, '2' );
+			// Make a controlled update.
+			await user.keyboard( '{Escape}' );
 
+			expect( input ).toHaveValue( 'three' );
 			/*
 			 * onChange called only once. onChange is not called when a
 			 * parent component explicitly passed a (new value) change down to
@@ -98,21 +126,68 @@ describe( 'InputControl', () => {
 			const { rerender } = render(
 				<InputControl value="Original" onChange={ spy } />
 			);
-
 			const input = getInput();
 
-			// Assuming <InputControl /> is controlled (not focused)
-
 			// Updating the value.
 			rerender( <InputControl value="New" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'New' );
+			expect( input ).toHaveValue( 'New' );
 
 			// Change it back to the original value.
 			rerender( <InputControl value="Original" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'Original' );
+			expect( input ).toHaveValue( 'Original' );
 			expect( spy ).toHaveBeenCalledTimes( 0 );
 		} );
+
+		it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
+			const user = setupUser();
+			const spy = jest.fn();
+			render(
+				<InputControl
+					value=""
+					onChange={ ( v ) => spy( v ) }
+					isPressEnterToChange
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, 'that was then' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( spy ).toHaveBeenCalledWith( 'that was then' );
+		} );
+
+		it( 'should commit value when blurred if value is invalid', async () => {
+			const user = setupUser();
+			const spyChange = jest.fn();
+			render(
+				<InputControl
+					value="this is"
+					onChange={ ( v ) => spyChange( v ) }
+					// If the value contains 'now' it is not valid.
+					pattern="(?!.*now)^.*$"
+					__unstableStateReducer={ ( state, action ) => {
+						let { value } = state;
+						if (
+							action.type === 'COMMIT' &&
+							action.payload.event.type === 'blur'
+						)
+							value = value.replace( /\bnow\b/, 'meow' );
+
+						return { ...state, value };
+					} }
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, ' now' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spyChange ).toHaveBeenLastCalledWith( 'this is meow' );
+		} );
 	} );
 } );

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

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,7 +40,7 @@ export function MenuItem( props, ref ) {
 		);
 	}
 
-	if ( icon && ! isString( icon ) ) {
+	if ( icon && typeof icon !== 'string' ) {
 		icon = cloneElement( icon, {
 			className: classnames( 'components-menu-items__item-icon', {
 				'has-icon-right': iconPosition === 'right',

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;
 

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

@@ -55,22 +55,19 @@ class BottomSheet extends Component {
 		this.isScrolling = this.isScrolling.bind( this );
 		this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this );
 		this.onDismiss = this.onDismiss.bind( this );
-		this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind(
-			this
-		);
+		this.onShouldSetBottomSheetMaxHeight =
+			this.onShouldSetBottomSheetMaxHeight.bind( this );
 
 		this.setIsFullScreen = this.setIsFullScreen.bind( this );
 
 		this.onDimensionsChange = this.onDimensionsChange.bind( this );
 		this.onHeaderLayout = this.onHeaderLayout.bind( this );
 		this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this );
-		this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind(
-			this
-		);
+		this.onHandleClosingBottomSheet =
+			this.onHandleClosingBottomSheet.bind( this );
 		this.onHardwareButtonPress = this.onHardwareButtonPress.bind( this );
-		this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind(
-			this
-		);
+		this.onHandleHardwareButtonPress =
+			this.onHandleHardwareButtonPress.bind( this );
 		this.keyboardShow = this.keyboardShow.bind( this );
 		this.keyboardHide = this.keyboardHide.bind( this );
 
@@ -568,15 +565,15 @@ class BottomSheet extends Component {
 					>
 						<BottomSheetProvider
 							value={ {
-								shouldEnableBottomSheetScroll: this
-									.onShouldEnableScroll,
-								shouldEnableBottomSheetMaxHeight: this
-									.onShouldSetBottomSheetMaxHeight,
+								shouldEnableBottomSheetScroll:
+									this.onShouldEnableScroll,
+								shouldEnableBottomSheetMaxHeight:
+									this.onShouldSetBottomSheetMaxHeight,
 								isBottomSheetContentScrolling: isScrolling,
-								onHandleClosingBottomSheet: this
-									.onHandleClosingBottomSheet,
-								onHandleHardwareButtonPress: this
-									.onHandleHardwareButtonPress,
+								onHandleClosingBottomSheet:
+									this.onHandleClosingBottomSheet,
+								onHandleHardwareButtonPress:
+									this.onHandleHardwareButtonPress,
 								listProps,
 								setIsFullScreen: this.setIsFullScreen,
 								safeAreaBottomInset,

package/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js

@@ -98,13 +98,8 @@ class KeyboardAvoidingView extends Component {
 	}
 
 	render() {
-		const {
-			children,
-			enabled,
-			keyboardVerticalOffset, // eslint-disable-line no-unused-vars
-			style,
-			...props
-		} = this.props;
+		const { children, enabled, keyboardVerticalOffset, style, ...props } =
+			this.props;
 
 		let finalStyle = style;
 		if ( Platform.OS === 'ios' ) {

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

@@ -10,13 +10,8 @@ import Cell from './cell';
 import Picker from '../picker';
 
 export default function BottomSheetPickerCell( props ) {
-	const {
-		options,
-		hideCancelButton,
-		onChangeValue,
-		value,
-		...cellProps
-	} = props;
+	const { options, hideCancelButton, onChangeValue, value, ...cellProps } =
+		props;
 
 	let picker;
 

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

@@ -30,13 +30,11 @@ class BottomSheetStepperCell extends Component {
 
 		this.announceValue = this.announceValue.bind( this );
 		this.onDecrementValue = this.onDecrementValue.bind( this );
-		this.onDecrementValuePressIn = this.onDecrementValuePressIn.bind(
-			this
-		);
+		this.onDecrementValuePressIn =
+			this.onDecrementValuePressIn.bind( this );
 		this.onIncrementValue = this.onIncrementValue.bind( this );
-		this.onIncrementValuePressIn = this.onIncrementValuePressIn.bind(
-			this
-		);
+		this.onIncrementValuePressIn =
+			this.onIncrementValuePressIn.bind( this );
 		this.onPressOut = this.onPressOut.bind( this );
 
 		const { value, defaultValue, min } = props;

package/src/mobile/color-settings/index.native.js

@@ -68,10 +68,8 @@ const ColorSettingsMemo = memo(
 );
 function ColorSettings( props ) {
 	const route = useRoute();
-	const {
-		onHandleClosingBottomSheet,
-		shouldEnableBottomSheetMaxHeight,
-	} = useContext( BottomSheetContext );
+	const { onHandleClosingBottomSheet, shouldEnableBottomSheetMaxHeight } =
+		useContext( BottomSheetContext );
 
 	return (
 		<ColorSettingsMemo

package/src/mobile/focal-point-settings-panel/index.native.js

@@ -8,7 +8,7 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { memo, useContext, useState } from '@wordpress/element';
+import { memo, useContext, useState, useCallback } from '@wordpress/element';
 import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
 
 /**
@@ -56,7 +56,7 @@ const FocalPointSettingsPanelMemo = memo(
 				</NavBar>
 				<FocalPointPicker
 					focalPoint={ draftFocalPoint }
-					onChange={ setPosition }
+					onChange={ useCallback( setPosition, [] ) }
 					shouldEnableBottomSheetScroll={
 						shouldEnableBottomSheetScroll
 					}

package/src/mobile/global-styles-context/index.native.js

@@ -83,12 +83,13 @@ export const useGlobalStyles = () => {
 	return globalStyles;
 };
 
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
-	<GlobalStylesContext.Consumer>
-		{ ( globalStyles ) => (
-			<WrappedComponent { ...props } globalStyles={ globalStyles } />
-		) }
-	</GlobalStylesContext.Consumer>
-);
+export const withGlobalStyles = ( WrappedComponent ) => ( props ) =>
+	(
+		<GlobalStylesContext.Consumer>
+			{ ( globalStyles ) => (
+				<WrappedComponent { ...props } globalStyles={ globalStyles } />
+			) }
+		</GlobalStylesContext.Consumer>
+	);
 
 export default GlobalStylesContext;

package/src/mobile/gradient/index.native.js

@@ -109,17 +109,20 @@ function Gradient( {
 	const { width = 0, height = 0 } = sizes || {};
 	const { isGradient, getGradientType, gradients } = colorsUtils;
 
-	const colorGroup = useMemo( () => getGradientColorGroup( gradientValue ), [
-		gradientValue,
-	] );
+	const colorGroup = useMemo(
+		() => getGradientColorGroup( gradientValue ),
+		[ gradientValue ]
+	);
 
-	const locations = useMemo( () => getColorLocations( colorGroup ), [
-		colorGroup,
-	] );
+	const locations = useMemo(
+		() => getColorLocations( colorGroup ),
+		[ colorGroup ]
+	);
 
-	const colors = useMemo( () => getGradientBaseColors( colorGroup ), [
-		colorGroup,
-	] );
+	const colors = useMemo(
+		() => getGradientBaseColors( colorGroup ),
+		[ colorGroup ]
+	);
 
 	if ( ! gradientValue || ! isGradient( gradientValue ) ) {
 		return null;

package/src/mobile/gradient/test/index.native.js

@@ -108,9 +108,7 @@ describe( 'getColorLocations', () => {
 			'linear-gradient(45deg, red, blue, green)'
 		);
 		expect( getColorLocations( colorGroup ) ).toStrictEqual( [
-			0,
-			0.5,
-			1,
+			0, 0.5, 1,
 		] );
 	} );
 } );