@wordpress/components 19.15.0 → 20.0.0

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

@@ -15,7 +15,6 @@ import {
 } from 'react-native';
 import Modal from 'react-native-modal';
 import SafeArea from 'react-native-safe-area';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -400,6 +399,7 @@ class BottomSheet extends Component {
 			children,
 			withHeaderSeparator = false,
 			hasNavigation,
+			onDismiss,
 			...rest
 		} = this.props;
 		const {
@@ -527,9 +527,7 @@ class BottomSheet extends Component {
 					panResponder.panHandlers.onMoveShouldSetResponderCapture
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
-				// We need to prevent overwriting the onDismiss prop,
-				// for this reason it is excluded from the rest object.
-				{ ...omit( rest, 'onDismiss' ) }
+				{ ...rest }
 			>
 				<KeyboardAvoidingView
 					behavior={ Platform.OS === 'ios' && 'padding' }

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { find, startsWith, get, camelCase, has } from 'lodash';
+import { camelCase } from 'change-case';
+import { find, get, has } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -32,6 +33,7 @@ const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 
 const PADDING = 12; // $solid-border-space
 const UNKNOWN_VALUE = 'undefined';
+const DEFAULT_FONT_SIZE = 16;
 
 export function getBlockPaddings(
 	mergedStyle,
@@ -103,7 +105,7 @@ export function getBlockColors(
 
 	// Custom colors.
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
-		const isCustomColor = startsWith( value, '#' );
+		const isCustomColor = value?.startsWith?.( '#' );
 		let styleKey = key;
 
 		if ( BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ] ) {
@@ -190,7 +192,7 @@ export function getBlockTypography(
 
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
-	const variables = [ 'preset', 'custom', 'var' ];
+	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
 
 	if ( ! stylesBase ) {
 		return styles;
@@ -203,6 +205,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		// var:preset|color|custom-color-2
 		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
 		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
+		const fontSizeRegex = /"fontSize":"(.*?)"/gm;
 
 		if ( variable === 'preset' ) {
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
@@ -244,6 +247,21 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				return UNKNOWN_VALUE;
 			} );
 		}
+
+		if ( variable === 'fontSize' ) {
+			const { width, height } = Dimensions.get( 'window' );
+
+			stylesBase = stylesBase.replace( fontSizeRegex, ( _$1, $2 ) => {
+				const parsedFontSize =
+					getPxFromCssUnit( $2, {
+						width,
+						height,
+						fontSize: DEFAULT_FONT_SIZE,
+					} ) || `${ DEFAULT_FONT_SIZE }px`;
+
+				return `"fontSize":"${ parsedFontSize }"`;
+			} );
+		}
 	} );
 
 	return JSON.parse( stylesBase );
@@ -297,7 +315,7 @@ function normalizeFontSizes( fontSizes ) {
 						{
 							width: dimensions.width,
 							height: dimensions.height,
-							fontSize: 16,
+							fontSize: DEFAULT_FONT_SIZE,
 						}
 					);
 					return fontSizeObject;

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

@@ -1,7 +1,7 @@
 /**
  * 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';
 
 /**
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image as icon } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -37,6 +37,7 @@ const ImageComponent = ( {
 	height: imageHeight,
 	highlightSelected = true,
 	isSelected,
+	shouldUseFastImage,
 	isUploadFailed,
 	isUploadInProgress,
 	mediaPickerOptions,
@@ -54,10 +55,18 @@ const ImageComponent = ( {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
 
+	// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
+	const Image =
+		! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;
+	const imageResizeMode =
+		! shouldUseFastImage || Platform.isAndroid
+			? resizeMode
+			: FastImage.resizeMode[ resizeMode ];
+
 	useEffect( () => {
 		let isCurrent = true;
 		if ( url ) {
-			Image.getSize( url, ( imgWidth, imgHeight ) => {
+			RNImage.getSize( url, ( imgWidth, imgHeight ) => {
 				if ( ! isCurrent ) {
 					return;
 				}
@@ -152,6 +161,9 @@ const ImageComponent = ( {
 			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
+		! resizeMode && {
+			aspectRatio: imageData?.aspectRatio,
+		},
 		focalPoint && styles.focalPoint,
 		focalPoint &&
 			getImageWithFocalPointStyles(
@@ -211,16 +223,13 @@ const ImageComponent = ( {
 					</View>
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
-						<FastImage
-							{ ...( ! resizeMode && {
-								aspectRatio: imageData?.aspectRatio,
-							} ) }
+						<Image
 							style={ imageStyles }
 							source={ { uri: url } }
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
-							resizeMode={ FastImage.resizeMode[ resizeMode ] }
+							resizeMode={ imageResizeMode }
 						/>
 					</View>
 				) }

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

@@ -3,12 +3,11 @@
  */
 import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,10 +17,12 @@ import { LinkPicker } from './';
 const LinkPickerScreen = ( { returnScreenName } ) => {
 	const navigation = useNavigation();
 	const route = useRoute();
+	const navigateToLinkTimeoutRef = useRef( null );
+	const navigateBackTimeoutRef = useRef( null );
 
 	const onLinkPicked = ( { url, title } ) => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateToLinkTimeoutRef.current = setTimeout( () => {
 			navigation.navigate( returnScreenName, {
 				inputValue: url,
 				text: title,
@@ -31,11 +32,18 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 
 	const onCancel = () => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateBackTimeoutRef.current = setTimeout( () => {
 			navigation.goBack();
 		}, 100 );
 	};
 
+	useEffect( () => {
+		return () => {
+			clearTimeout( navigateToLinkTimeoutRef.current );
+			clearTimeout( navigateBackTimeoutRef.current );
+		};
+	}, [] );
+
 	const { inputValue } = route.params;
 	return useMemo( () => {
 		return (

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

@@ -19,8 +19,8 @@ import styles from './styles.scss';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
-		styles.separator,
-		styles.separatorDark
+		styles[ 'components-picker__separator' ],
+		styles[ 'components-picker__separator--dark' ]
 	);
 
 	return <View style={ separatorStyle } />;
@@ -64,7 +64,10 @@ export default class Picker extends Component {
 					separatorType={ 'none' }
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
-					style={ option.disabled && styles.disabled }
+					style={
+						option.disabled &&
+						styles[ 'components-picker__button--disabled' ]
+					}
 				/>
 			</Fragment>
 		) );
@@ -81,7 +84,10 @@ export default class Picker extends Component {
 				hideHeader
 				testID={ testID }
 			>
-				<PanelBody title={ title } style={ styles.panelBody }>
+				<PanelBody
+					title={ title }
+					style={ styles[ 'components-picker__panel' ] }
+				>
 					{ this.getOptions() }
 					{ ! hideCancelButton && (
 						<TextControl

package/src/mobile/picker/index.ios.js

@@ -10,6 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { BottomSheetContext } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
 
 class Picker extends Component {
 	presentPicker() {
@@ -23,10 +29,16 @@ class Picker extends Component {
 			isBottomSheetOpened,
 			closeBottomSheet,
 			onHandleClosingBottomSheet,
+			colorScheme,
 		} = this.props;
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
+		const buttonTitleColor =
+			colorScheme === 'light'
+				? styles[ 'components-picker__button-title' ].color
+				: styles[ 'components-picker__button-title--dark' ].color;
+
 		ActionSheetIOS.showActionSheetWithOptions(
 			{
 				title,
@@ -35,6 +47,7 @@ class Picker extends Component {
 				destructiveButtonIndex,
 				disabledButtonIndices,
 				anchor: getAnchor && getAnchor(),
+				tintColor: buttonTitleColor,
 			},
 			( buttonIndex ) => {
 				if ( buttonIndex === 0 ) {
@@ -66,6 +79,8 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
 
+	const colorScheme = usePreferredColorScheme();
+
 	return (
 		<Picker
 			ref={ ref }
@@ -73,6 +88,7 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 			isBottomSheetOpened={ isBottomSheetOpened }
 			closeBottomSheet={ closeGeneralSidebar }
 			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
+			colorScheme={ colorScheme }
 		/>
 	);
 } );

package/src/mobile/picker/styles.native.scss

@@ -1,4 +1,4 @@
-.separator {
+.components-picker__separator {
 	margin-top: $grid-unit-20 * 0.5;
 	margin-bottom: $grid-unit-20 * 0.5;
 	margin-left: -$grid-unit-20;
@@ -7,15 +7,23 @@
 	background-color: $light-gray-400;
 }
 
-.separatorDark {
+.components-picker__separator--dark {
 	background-color: $gray-70;
 }
 
-.disabled {
+.components-picker__button--disabled {
 	opacity: 0.3;
 }
 
-.panelBody {
+.components-picker__panel {
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.components-picker__button-title {
+	color: $blue-50;
+}
+
+.components-picker__button-title--dark {
+	color: $blue-30;
+}

package/src/modal/index.js

@@ -24,7 +24,6 @@ import {
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
-import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 
@@ -98,7 +97,7 @@ function Modal( props, forwardedRef ) {
 	function handleEscapeKeyDown( event ) {
 		if (
 			shouldCloseOnEsc &&
-			event.keyCode === ESCAPE &&
+			event.code === 'Escape' &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();

package/src/modal/style.scss

@@ -95,6 +95,10 @@
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
 		border-bottom-color: $gray-300;
 	}
+
+	& + p {
+		margin-top: 0;
+	}
 }
 
 .components-modal__header-heading-container {
@@ -119,7 +123,7 @@
 .components-modal__content {
 	flex: 1;
 	margin-top: $header-height + $grid-unit-20;
-	padding: 0 $grid-unit-40 $grid-unit-30;
+	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {

package/src/modal/test/index.js

@@ -26,25 +26,27 @@ describe( 'Modal', () => {
 		render(
 			<Modal aria={ { labelledby: 'title-id' } }>
 				{ /* eslint-disable-next-line no-restricted-syntax */ }
-				<h1 id="title-id">Test Title</h1>
+				<h1 id="title-id">Modal Title Text</h1>
 			</Modal>
 		);
-		expect( screen.getByRole( 'dialog' ) ).toHaveAttribute(
-			'aria-labelledby',
-			'title-id'
+		expect( screen.getByRole( 'dialog' ) ).toHaveAccessibleName(
+			'Modal Title Text'
 		);
 	} );
 
 	it( 'prefers the aria label of the title prop over the aria.labelledby prop', () => {
 		render(
-			<Modal title="Test Title" aria={ { labelledby: 'title-id' } }>
+			<Modal
+				title="Modal Title Attribute"
+				aria={ { labelledby: 'title-id' } }
+			>
 				{ /* eslint-disable-next-line no-restricted-syntax */ }
-				<h1 id="title-id">Wrong Title</h1>
+				<h1 id="title-id">Modal Title Text</h1>
 			</Modal>
 		);
-		const dialog = screen.getByRole( 'dialog' );
-		const titleId = within( dialog ).getByText( 'Test Title' ).id;
-		expect( dialog ).toHaveAttribute( 'aria-labelledby', titleId );
+		expect( screen.getByRole( 'dialog' ) ).toHaveAccessibleName(
+			'Modal Title Attribute'
+		);
 	} );
 
 	it( 'hides the header when the `__experimentalHideHeader` prop is used', () => {

package/src/navigable-container/container.js

@@ -1,9 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -131,20 +126,19 @@ class NavigableContainer extends Component {
 	}
 
 	render() {
-		const { children, ...props } = this.props;
+		const {
+			children,
+			stopNavigationEvents,
+			eventToOffset,
+			onNavigate,
+			onKeyDown,
+			cycle,
+			onlyBrowserTabstops,
+			forwardedRef,
+			...restProps
+		} = this.props;
 		return (
-			<div
-				ref={ this.bindContainer }
-				{ ...omit( props, [
-					'stopNavigationEvents',
-					'eventToOffset',
-					'onNavigate',
-					'onKeyDown',
-					'cycle',
-					'onlyBrowserTabstops',
-					'forwardedRef',
-				] ) }
-			>
+			<div ref={ this.bindContainer } { ...restProps }>
 				{ children }
 			</div>
 		);

package/src/navigable-container/menu.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,11 +31,11 @@ export function NavigableMenu(
 			previous = [ LEFT, UP ];
 		}
 
-		if ( includes( next, keyCode ) ) {
+		if ( next.includes( keyCode ) ) {
 			return 1;
-		} else if ( includes( previous, keyCode ) ) {
+		} else if ( previous.includes( keyCode ) ) {
 			return -1;
-		} else if ( includes( [ DOWN, UP, LEFT, RIGHT ], keyCode ) ) {
+		} else if ( [ DOWN, UP, LEFT, RIGHT ].includes( keyCode ) ) {
 			// Key press should be handled, e.g. have event propagation and
 			// default behavior handled by NavigableContainer but not result
 			// in an offset.

package/src/navigable-container/test/menu.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ function fireKeyDown( node, keyCode, shiftKey ) {
 describe( 'NavigableMenu', () => {
 	it( 'vertical: should navigate by up and down', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -77,7 +77,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -100,7 +100,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'vertical: should navigate by up and down, and stop at edges', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -131,7 +131,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -152,7 +152,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -187,7 +187,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -210,7 +210,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right, and stop at edges', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -241,7 +241,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -262,7 +262,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'both: should navigate by up/down and left/right', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -285,7 +285,10 @@ describe( 'NavigableMenu', () => {
 
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( getByRole( 'menu' ), keyCode );
+			const interaction = fireKeyDown(
+				screen.getByRole( 'menu' ),
+				keyCode
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}

package/src/navigator/navigator-back-button/hook.ts

@@ -3,9 +3,6 @@
  */
 import { useCallback } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/navigator/navigator-button/hook.ts

@@ -4,9 +4,6 @@
 import { useCallback } from '@wordpress/element';
 import { escapeAttribute } from '@wordpress/escape-html';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/notice/list.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * Internal dependencies
@@ -30,15 +29,18 @@ function NoticeList( { notices, onRemove = noop, className, children } ) {
 	return (
 		<div className={ className }>
 			{ children }
-			{ [ ...notices ].reverse().map( ( notice ) => (
-				<Notice
-					{ ...omit( notice, [ 'content' ] ) }
-					key={ notice.id }
-					onRemove={ removeNotice( notice.id ) }
-				>
-					{ notice.content }
-				</Notice>
-			) ) }
+			{ [ ...notices ].reverse().map( ( notice ) => {
+				const { content, ...restNotice } = notice;
+				return (
+					<Notice
+						{ ...restNotice }
+						key={ notice.id }
+						onRemove={ removeNotice( notice.id ) }
+					>
+						{ notice.content }
+					</Notice>
+				);
+			} ) }
 		</div>
 	);
 }

package/src/palette-edit/index.js

@@ -163,6 +163,7 @@ function Option( {
 					{ ! isGradient && (
 						<ColorPicker
 							color={ value }
+							enableAlpha
 							onChange={ ( newColor ) =>
 								onChange( {
 									...element,