@wordpress/components 19.13.0 → 19.16.0

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

@@ -13,6 +13,7 @@ import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
+import { space } from '../../ui/utils/space';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -110,6 +111,8 @@ type InputProps = {
 	inputSize?: Size;
 	isDragging?: boolean;
 	dragCursor?: CSSProperties[ 'cursor' ];
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -141,31 +144,32 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-const sizeStyles = ( {
+export const getSizeConfig = ( {
 	inputSize: size,
 	__next36pxDefaultSize,
 }: InputProps ) => {
+	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
 			height: 36,
 			lineHeight: 1,
 			minHeight: 36,
-			paddingLeft: 16,
-			paddingRight: 16,
+			paddingLeft: space( 4 ),
+			paddingRight: space( 4 ),
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: 8,
-			paddingRight: 8,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: 16,
-			paddingRight: 16,
+			paddingLeft: space( 4 ),
+			paddingRight: space( 4 ),
 		},
 	};
 
@@ -174,14 +178,23 @@ const sizeStyles = ( {
 			height: 30,
 			lineHeight: 1,
 			minHeight: 30,
-			paddingLeft: 8,
-			paddingRight: 8,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
 		};
 	}
 
-	const style = sizes[ size as Size ] || sizes.default;
+	return sizes[ size as Size ] || sizes.default;
+};
+
+const sizeStyles = ( props: InputProps ) => {
+	return css( getSizeConfig( props ) );
+};
 
-	return css( style );
+const customPaddings = ( {
+	paddingInlineStart,
+	paddingInlineEnd,
+}: InputProps ) => {
+	return css( { paddingInlineStart, paddingInlineEnd } );
 };
 
 const dragStyles = ( { isDragging, dragCursor }: InputProps ) => {
@@ -235,6 +248,7 @@ export const Input = styled.input< InputProps >`
 		${ disabledStyles }
 		${ fontSizeStyles }
 		${ sizeStyles }
+		${ customPaddings }
 
 		&::-webkit-input-placeholder {
 			line-height: normal;

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/types.ts

@@ -102,6 +102,8 @@ export interface InputFieldProps extends BaseProps {
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >
 	) => void;
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
@@ -123,10 +125,38 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	children: ReactNode;
 	/**
 	 * Renders an element on the left side of the input.
+	 *
+	 * By default, the prefix is aligned with the edge of the input border, with no padding.
+	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
+	 * the provided `<InputControlPrefixWrapper>` component.
+	 *
+	 * @example
+	 * import {
+	 *   __experimentalInputControl as InputControl,
+	 *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	 * } from '@wordpress/components';
+	 *
+	 * <InputControl
+	 *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+	 * />
 	 */
 	prefix?: ReactNode;
 	/**
 	 * Renders an element on the right side of the input.
+	 *
+	 * By default, the suffix is aligned with the edge of the input border, with no padding.
+	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
+	 * the provided `<InputControlSuffixWrapper>` component.
+	 *
+	 * @example
+	 * import {
+	 *   __experimentalInputControl as InputControl,
+	 *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	 * } from '@wordpress/components';
+	 *
+	 * <InputControl
+	 *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+	 * />
 	 */
 	suffix?: ReactNode;
 	/**
@@ -152,12 +182,17 @@ export interface InputControlProps
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
-		 * `isFocused` and `setIsFocused` are managed internally by the InputControl, but the rest of the props
-		 * for InputField are passed through.
+		 * `isFocused`, `setIsFocused`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
+		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
-			'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused'
+			| 'stateReducer'
+			| 'prefix'
+			| 'isFocused'
+			| 'setIsFocused'
+			| 'paddingInlineStart'
+			| 'paddingInlineEnd'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }
@@ -168,3 +203,17 @@ export interface InputControlLabelProps {
 	labelPosition?: BaseProps[ 'labelPosition' ];
 	size?: BaseProps[ 'size' ];
 }
+
+export type InputControlPrefixWrapperProps = {
+	/**
+	 * The prefix to be inserted.
+	 */
+	children: ReactNode;
+};
+
+export type InputControlSuffixWrapperProps = {
+	/**
+	 * The suffix to be inserted.
+	 */
+	children: ReactNode;
+};

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Image, Text, View } from 'react-native';
+import { Image as RNImage, Text, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
 
 /**
  * WordPress dependencies
@@ -36,6 +37,7 @@ const ImageComponent = ( {
 	height: imageHeight,
 	highlightSelected = true,
 	isSelected,
+	shouldUseFastImage,
 	isUploadFailed,
 	isUploadInProgress,
 	mediaPickerOptions,
@@ -52,11 +54,15 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const Image = ! shouldUseFastImage ? RNImage : FastImage;
+	const imageResizeMode = ! shouldUseFastImage
+		? resizeMode
+		: FastImage.resizeMode[ resizeMode ];
 
 	useEffect( () => {
 		let isCurrent = true;
 		if ( url ) {
-			Image.getSize( url, ( imgWidth, imgHeight ) => {
+			RNImage.getSize( url, ( imgWidth, imgHeight ) => {
 				if ( ! isCurrent ) {
 					return;
 				}
@@ -151,6 +157,9 @@ const ImageComponent = ( {
 			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
+		! resizeMode && {
+			aspectRatio: imageData?.aspectRatio,
+		},
 		focalPoint && styles.focalPoint,
 		focalPoint &&
 			getImageWithFocalPointStyles(
@@ -211,15 +220,12 @@ const ImageComponent = ( {
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
 						<Image
-							{ ...( ! resizeMode && {
-								aspectRatio: imageData?.aspectRatio,
-							} ) }
 							style={ imageStyles }
 							source={ { uri: url } }
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
-							resizeMode={ resizeMode }
+							resizeMode={ imageResizeMode }
 						/>
 					</View>
 				) }

package/src/mobile/link-picker/index.native.js

@@ -3,7 +3,6 @@
  */
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +25,7 @@ import styles from './styles.scss';
 export const createDirectEntry = ( value ) => {
 	let type = 'URL';
 
-	const protocol = lowerCase( getProtocol( value ) ) || '';
+	const protocol = getProtocol( value )?.toLowerCase() || '';
 
 	if ( protocol.includes( 'mailto' ) ) {
 		type = 'mailto';
@@ -36,7 +35,7 @@ export const createDirectEntry = ( value ) => {
 		type = 'tel';
 	}
 
-	if ( startsWith( value, '#' ) ) {
+	if ( value?.startsWith( '#' ) ) {
 		type = 'internal';
 	}
 

package/src/mobile/media-edit/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,11 +41,11 @@ export class MediaEdit extends Component {
 	getMediaOptionsItems() {
 		const { pickerOptions, openReplaceMediaOptions, source } = this.props;
 
-		return compact( [
+		return [
 			source?.uri && editOption,
 			openReplaceMediaOptions && replaceOption,
 			...( pickerOptions ? pickerOptions : [] ),
-		] );
+		].filter( Boolean );
 	}
 
 	getDestructiveButtonIndex() {

package/src/mobile/segmented-control/index.native.js

@@ -9,7 +9,6 @@ import {
 	Animated,
 	Easing,
 } from 'react-native';
-import { values, map, reduce } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -101,11 +100,13 @@ const SegmentedControls = ( {
 		const { paddingLeft: offset } = isIOS
 			? styles.containerIOS
 			: styles.container;
-		const widths = map( values( segmentsDimensions ), 'width' );
+		const widths = Object.values( segmentsDimensions ).map(
+			( dimension ) => dimension.width
+		);
 		const widthsDistance = widths.slice( 0, index );
-		const widthsDistanceSum = reduce(
-			widthsDistance,
-			( sum, n ) => sum + n
+		const widthsDistanceSum = widthsDistance.reduce(
+			( sum, n ) => sum + n,
+			0
 		);
 
 		const endValue = index === 0 ? 0 : widthsDistanceSum;

package/src/modal/index.js

@@ -10,8 +10,10 @@ import classnames from 'classnames';
  */
 import {
 	createPortal,
+	useCallback,
 	useEffect,
 	useRef,
+	useState,
 	forwardRef,
 } from '@wordpress/element';
 import {
@@ -24,7 +26,7 @@ import {
 } from '@wordpress/compose';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -73,6 +75,8 @@ function Modal( props, forwardedRef ) {
 	const focusReturnRef = useFocusReturn();
 	const focusOutsideProps = useFocusOutside( onRequestClose );
 
+	const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
+
 	useEffect( () => {
 		openModalCount++;
 
@@ -104,6 +108,19 @@ function Modal( props, forwardedRef ) {
 		}
 	}
 
+	const onContentContainerScroll = useCallback(
+		( e ) => {
+			const scrollY = e?.target?.scrollTop ?? -1;
+
+			if ( ! hasScrolledContent && scrollY > 0 ) {
+				setHasScrolledContent( true );
+			} else if ( hasScrolledContent && scrollY <= 0 ) {
+				setHasScrolledContent( false );
+			}
+		},
+		[ hasScrolledContent ]
+	);
+
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -142,8 +159,10 @@ function Modal( props, forwardedRef ) {
 					<div
 						className={ classnames( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
+							'has-scrolled-content': hasScrolledContent,
 						} ) }
 						role="document"
+						onScroll={ onContentContainerScroll }
 					>
 						{ ! __experimentalHideHeader && (
 							<div className="components-modal__header">
@@ -168,7 +187,7 @@ function Modal( props, forwardedRef ) {
 								{ isDismissible && (
 									<Button
 										onClick={ onRequestClose }
-										icon={ closeSmall }
+										icon={ close }
 										label={
 											closeButtonLabel ||
 											__( 'Close dialog' )

package/src/modal/stories/index.js

@@ -35,7 +35,23 @@ const ModalExample = ( props ) => {
 				Open Modal
 			</Button>
 			{ isOpen && (
-				<Modal { ...props } onRequestClose={ closeModal }>
+				<Modal
+					{ ...props }
+					onRequestClose={ closeModal }
+					style={ { maxWidth: '600px' } }
+				>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et magna
+						aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation ullamco laboris nisi ut aliquip ex ea ea
+						commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu
+						fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+						non proident, sunt in culpa qui officia deserunt mollit
+						anim id est laborum.
+					</p>
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>