@wordpress/components 19.8.4 → 19.11.0

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -4,13 +4,20 @@
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { FlatList } from 'react-native';
 import { isEqual } from 'lodash';
+import Animated, {
+	useAnimatedScrollHandler,
+	useSharedValue,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
+import { memo, useCallback, useRef } from '@wordpress/element';
 
 const List = memo( FlatList, isEqual );
+const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
+	KeyboardAwareScrollView
+);
 
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,
@@ -19,53 +26,75 @@ export const KeyboardAwareFlatList = ( {
 	autoScroll,
 	scrollViewStyle,
 	inputAccessoryViewHeight,
+	onScroll,
 	...listProps
-} ) => (
-	<KeyboardAwareScrollView
-		style={ [ { flex: 1 }, scrollViewStyle ] }
-		keyboardDismissMode="none"
-		enableResetScrollToCoords={ false }
-		keyboardShouldPersistTaps="handled"
-		extraScrollHeight={ extraScrollHeight }
-		extraHeight={ 0 }
-		inputAccessoryViewHeight={ inputAccessoryViewHeight }
-		enableAutomaticScroll={ autoScroll === undefined ? false : autoScroll }
-		ref={ ( ref ) => {
-			this.scrollViewRef = ref;
+} ) => {
+	const scrollViewRef = useRef();
+	const keyboardWillShowIndicator = useRef();
+
+	const latestContentOffsetY = useSharedValue( -1 );
+
+	const scrollHandler = useAnimatedScrollHandler( {
+		onScroll: ( event ) => {
+			const { contentOffset } = event;
+			latestContentOffsetY.value = contentOffset.y;
+			onScroll( event );
+		},
+	} );
+
+	const getRef = useCallback(
+		( ref ) => {
+			scrollViewRef.current = ref;
 			innerRef( ref );
-		} }
-		onKeyboardWillHide={ () => {
-			this.keyboardWillShowIndicator = false;
-		} }
-		onKeyboardDidHide={ () => {
-			setTimeout( () => {
-				if (
-					! this.keyboardWillShowIndicator &&
-					this.latestContentOffsetY !== undefined &&
-					! shouldPreventAutomaticScroll()
-				) {
-					// Reset the content position if keyboard is still closed.
-					if ( this.scrollViewRef ) {
-						this.scrollViewRef.scrollToPosition(
-							0,
-							this.latestContentOffsetY,
-							true
-						);
-					}
-				}
-			}, 50 );
-		} }
-		onKeyboardWillShow={ () => {
-			this.keyboardWillShowIndicator = true;
-		} }
-		scrollEnabled={ listProps.scrollEnabled }
-		onScroll={ ( event ) => {
-			this.latestContentOffsetY = event.nativeEvent.contentOffset.y;
-		} }
-	>
-		<List { ...listProps } />
-	</KeyboardAwareScrollView>
-);
+		},
+		[ innerRef ]
+	);
+	const onKeyboardWillHide = useCallback( () => {
+		keyboardWillShowIndicator.current = false;
+	}, [] );
+	const onKeyboardDidHide = useCallback( () => {
+		setTimeout( () => {
+			if (
+				! keyboardWillShowIndicator.current &&
+				latestContentOffsetY.value !== -1 &&
+				! shouldPreventAutomaticScroll()
+			) {
+				// Reset the content position if keyboard is still closed.
+				scrollViewRef.current?.scrollToPosition(
+					0,
+					latestContentOffsetY.value,
+					true
+				);
+			}
+		}, 50 );
+	}, [ latestContentOffsetY, shouldPreventAutomaticScroll ] );
+	const onKeyboardWillShow = useCallback( () => {
+		keyboardWillShowIndicator.current = true;
+	}, [] );
+
+	return (
+		<AnimatedKeyboardAwareScrollView
+			style={ [ { flex: 1 }, scrollViewStyle ] }
+			keyboardDismissMode="none"
+			enableResetScrollToCoords={ false }
+			keyboardShouldPersistTaps="handled"
+			extraScrollHeight={ extraScrollHeight }
+			extraHeight={ 0 }
+			inputAccessoryViewHeight={ inputAccessoryViewHeight }
+			enableAutomaticScroll={
+				autoScroll === undefined ? false : autoScroll
+			}
+			ref={ getRef }
+			onKeyboardWillHide={ onKeyboardWillHide }
+			onKeyboardDidHide={ onKeyboardDidHide }
+			onKeyboardWillShow={ onKeyboardWillShow }
+			scrollEnabled={ listProps.scrollEnabled }
+			onScroll={ scrollHandler }
+		>
+			<List { ...listProps } />
+		</AnimatedKeyboardAwareScrollView>
+	);
+};
 
 KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
 	scrollView,

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -9,7 +9,15 @@ import { render, fireEvent, waitFor } from 'test/helpers';
  */
 import LinkSettingsNavigation from '../link-settings-navigation';
 
-jest.useFakeTimers( 'legacy' );
+beforeAll( () => {
+	jest.useFakeTimers( 'legacy' );
+} );
+
+afterAll( () => {
+	jest.runOnlyPendingTimers();
+	jest.useRealTimers();
+} );
+
 jest.spyOn( Keyboard, 'dismiss' );
 
 const subject = (

package/src/navigation/styles/navigation-styles.js

@@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { BASE, G2, UI } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
@@ -155,18 +155,18 @@ export const ItemBaseUI = styled.li`
 	}
 
 	&.is-active {
-		background-color: ${ UI.theme };
-		color: ${ BASE.white };
+		background-color: ${ COLORS.ui.theme };
+		color: ${ COLORS.white };
 
 		> button,
 		> a {
-			color: ${ BASE.white };
+			color: ${ COLORS.white };
 			opacity: 1;
 		}
 	}
 
 	> svg path {
-		color: ${ G2.lightGray.ui };
+		color: ${ COLORS.gray[ 600 ] };
 	}
 `;
 

package/src/navigator/stories/index.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../../button';
 import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { HStack } from '../../h-stack';
-import { Flyout } from '../../flyout';
+import Dropdown from '../../dropdown';
 import { useCx } from '../../utils/hooks/use-cx';
 import {
 	NavigatorProvider,
@@ -54,17 +54,23 @@ const MyNavigation = () => {
 								Navigate to screen with sticky content.
 							</NavigatorButton>
 
-							<Flyout
-								trigger={
-									<Button variant="primary">
+							<Dropdown
+								renderToggle={ ( { isOpen, onToggle } ) => (
+									<Button
+										onClick={ onToggle }
+										aria-expanded={ isOpen }
+										variant="primary"
+									>
 										Open test dialog
 									</Button>
-								}
-								placement="bottom-start"
-							>
-								<CardHeader>Go</CardHeader>
-								<CardBody>Stuff</CardBody>
-							</Flyout>
+								) }
+								renderContent={ () => (
+									<Card>
+										<CardHeader>Go</CardHeader>
+										<CardBody>Stuff</CardBody>
+									</Card>
+								) }
+							/>
 						</HStack>
 					</CardBody>
 				</Card>

package/src/notice/index.native.js

@@ -7,15 +7,14 @@ import {
 	Text,
 	TouchableWithoutFeedback,
 	View,
-	Dimensions,
-	Platform,
+	useWindowDimensions,
 } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -23,57 +22,48 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const Notice = ( { onNoticeHidden, content, id, status } ) => {
-	const [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );
-	const [ visible, setVisible ] = useState( true );
+const HIDE_TIMER = 3000;
 
+const Notice = ( { onNoticeHidden, content, id, status } ) => {
+	const { width } = useWindowDimensions();
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const timer = useRef( null );
-	const isIOS = Platform.OS === 'ios';
-
-	const onDimensionsChange = () => {
-		setWidth( Dimensions.get( 'window' ).width );
-	};
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
 
 	useEffect( () => {
 		startAnimation();
+
 		return () => {
 			clearTimeout( timer?.current );
 		};
-	}, [ visible, id ] );
+	}, [] );
 
-	const onHide = () => {
-		setVisible( false );
-	};
+	function onHide() {
+		Animated.timing( animationValue, {
+			toValue: 0,
+			duration: 150,
+			useNativeDriver: true,
+			easing: Easing.out( Easing.quad ),
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
+				onNoticeHidden( id );
+			}
+		} );
+	}
 
-	const startAnimation = () => {
+	function startAnimation() {
 		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
-		} ).start( () => {
-			if ( visible && onNoticeHidden ) {
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
 				timer.current = setTimeout( () => {
 					onHide();
-				}, 3000 );
-			}
-
-			if ( ! visible && onNoticeHidden ) {
-				onNoticeHidden( id );
+				}, HIDE_TIMER );
 			}
 		} );
-	};
+	}
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,
@@ -95,25 +85,25 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 		status === 'error' && errorTextStyles,
 	];
 
+	const containerStyles = [
+		styles.notice,
+		! Platform.isIOS && noticeSolidStyles,
+		{
+			width,
+			transform: [
+				{
+					translateY: animationValue.interpolate( {
+						inputRange: [ 0, 1 ],
+						outputRange: [ -24, 0 ],
+					} ),
+				},
+			],
+		},
+	];
+
 	return (
 		<>
-			<Animated.View
-				style={ [
-					styles.notice,
-					! isIOS && noticeSolidStyles,
-					{
-						width,
-						transform: [
-							{
-								translateY: animationValue.interpolate( {
-									inputRange: [ 0, 1 ],
-									outputRange: [ -24, 0 ],
-								} ),
-							},
-						],
-					},
-				] }
-			>
+			<Animated.View style={ containerStyles }>
 				<TouchableWithoutFeedback onPress={ onHide }>
 					<View style={ styles.noticeContent }>
 						<Text numberOfLines={ 3 } style={ textStyles }>
@@ -121,7 +111,7 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 						</Text>
 					</View>
 				</TouchableWithoutFeedback>
-				{ isIOS && (
+				{ Platform.isIOS && (
 					<BlurView
 						style={ styles.blurBackground }
 						blurType="prominent"

package/src/notice/list.native.js

@@ -6,9 +6,8 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -16,60 +15,37 @@ import { compose } from '@wordpress/compose';
 import Notice from './';
 import styles from './style.scss';
 
-class NoticeList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.removeNotice = this.removeNotice.bind( this );
-	}
+function NoticeList() {
+	const { notices } = useSelect( ( select ) => {
+		const { getNotices } = select( noticesStore );
+		return {
+			notices: getNotices(),
+		};
+	}, [] );
 
-	removeNotice( id ) {
-		const { removeNotice } = this.props;
+	const { removeNotice } = useDispatch( noticesStore );
+
+	function onRemoveNotice( id ) {
 		removeNotice( id );
 	}
 
-	render() {
-		const { notices, shouldStack } = this.props;
-
-		if ( ! notices.length ) {
-			return null;
-		}
+	if ( ! notices.length ) {
+		return null;
+	}
 
-		return (
-			<View style={ styles.list } key={ notices.length }>
-				{ shouldStack ? (
-					notices
-						.reverse()
-						.map( ( notice ) => (
-							<Notice
-								{ ...notice }
-								key={ notice.id }
-								onNoticeHidden={ this.removeNotice }
-							></Notice>
-						) )
-				) : (
+	return (
+		<View style={ styles.list }>
+			{ notices.map( ( notice ) => {
+				return (
 					<Notice
-						{ ...notices[ notices.length - 1 ] }
-						onNoticeHidden={ this.removeNotice }
+						{ ...notice }
+						key={ notice.id }
+						onNoticeHidden={ onRemoveNotice }
 					></Notice>
-				) }
-			</View>
-		);
-	}
+				);
+			} ) }
+		</View>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getNotices } = select( 'core/notices' );
-
-		return {
-			notices: getNotices(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { removeNotice } = dispatch( 'core/notices' );
-
-		return {
-			removeNotice,
-		};
-	} ),
-] )( NoticeList );
+export default NoticeList;

package/src/notice/style.native.scss

@@ -33,6 +33,7 @@
 
 .notice {
 	justify-content: center;
+	position: absolute;
 }
 
 .noticeContent {

package/src/palette-edit/index.js

@@ -56,11 +56,36 @@ function NameInput( { value, onChange, label } ) {
 	);
 }
 
-function getNameForPosition( position ) {
+/**
+ * Returns a temporary name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * It expects slugs to be in the format: slugPrefix + color- + number.
+ * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
+ *
+ * @param {string} elements   An array of color palette items.
+ * @param {string} slugPrefix The slug prefix used to match the element slug.
+ *
+ * @return {string} A unique name for a palette item.
+ */
+export function getNameForPosition( elements, slugPrefix ) {
+	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const position = elements.reduce( ( previousValue, currentValue ) => {
+		if ( typeof currentValue?.slug === 'string' ) {
+			const matches = currentValue?.slug.match( temporaryNameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id >= previousValue ) {
+					return id + 1;
+				}
+			}
+		}
+		return previousValue;
+	}, 1 );
+
 	return sprintf(
 		/* translators: %s: is a temporary id for a custom color */
-		__( 'Color %s ' ),
-		position + 1
+		__( 'Color %s' ),
+		position
 	);
 }
 
@@ -131,7 +156,8 @@ function Option( {
 			</HStack>
 			{ isEditing && (
 				<Popover
-					position="bottom left"
+					placement="left-start"
+					offset={ 20 }
 					className="components-palette-edit__popover"
 				>
 					{ ! isGradient && (
@@ -163,9 +189,10 @@ function Option( {
 	);
 }
 
-function isTemporaryElement( slugPrefix, { slug, color, gradient }, index ) {
+function isTemporaryElement( slugPrefix, { slug, color, gradient } ) {
+	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
 	return (
-		slug === slugPrefix + kebabCase( getNameForPosition( index ) ) &&
+		regex.test( slug ) &&
 		( ( !! color && color === DEFAULT_COLOR ) ||
 			( !! gradient && gradient === DEFAULT_GRADIENT ) )
 	);
@@ -193,8 +220,7 @@ function PaletteEditListView( {
 				)
 			) {
 				const newElements = elementsReference.current.filter(
-					( element, index ) =>
-						! isTemporaryElement( slugPrefix, element, index )
+					( element ) => ! isTemporaryElement( slugPrefix, element )
 				);
 				onChange( newElements.length ? newElements : undefined );
 			}
@@ -309,8 +335,10 @@ export default function PaletteEdit( {
 							}
 							onClick={ () => {
 								const tempOptionName = getNameForPosition(
-									elementsLength
+									elements,
+									slugPrefix
 								);
+
 								onChange( [
 									...elements,
 									{

package/src/palette-edit/style.scss

@@ -1,10 +1,3 @@
-@include break-medium() {
-	.components-palette-edit__popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
-		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
-		margin-top: #{ -($grid-unit-60 + $border-width) };
-	}
-}
-
 .components-palette-edit__popover {
 	.components-custom-gradient-picker__gradient-bar {
 		margin-top: 0;

package/src/palette-edit/test/index.js

@@ -0,0 +1,63 @@
+/**
+ * Internal dependencies
+ */
+import { getNameForPosition } from '../';
+
+describe( 'getNameForPosition', () => {
+	test( 'should return 1 by default', () => {
+		const slugPrefix = 'test-';
+		const elements = [];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 1'
+		);
+	} );
+
+	test( 'should return a new color name with an incremented slug id', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'test-color-1',
+			},
+		];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 2'
+		);
+	} );
+
+	test( 'should ignore user-defined color names', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'a-sweet-color-2',
+			},
+		];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 1'
+		);
+	} );
+
+	test( 'should return a new color name with an incremented slug id one higher than the current highest', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'test-color-1',
+			},
+			{
+				slug: 'test-color-2',
+			},
+			{
+				slug: 'test-color-150',
+			},
+			{
+				slug: 'a-sweet-color-100',
+			},
+		];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 151'
+		);
+	} );
+} );

package/src/panel/README.md

@@ -161,7 +161,7 @@ Props that are passed to the `Button` component in the `PanelBodyTitle` within t
 
 #### PanelRow
 
-The is a generic container for panel content. Default styles add a top margin and arrange items in a flex row.
+The `PanelRow` is a generic container for panel content. Default styles add a top margin and arrange items in a flex row.
 
 ##### Props
 

package/src/placeholder/test/index.js

@@ -14,6 +14,13 @@ import { useResizeObserver } from '@wordpress/compose';
  */
 import Placeholder from '../';
 
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( () => [] ),
+	};
+} );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		useResizeObserver.mockReturnValue( [