@wordpress/components 19.9.0 → 19.12.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/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/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( [

package/src/popover/README.md

@@ -59,13 +59,17 @@ Set this prop to `false` to disable focus changing entirely. This should only be
 -   Required: No
 -   Default: `"firstElement"`
 
-### position
+### placement
 
-The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"middle"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+The direction in which the popover should open relative to its parent node or anchor node. 
+
+The available base placements are 'top', 'right', 'bottom', 'left'.
+
+Each of these base placements has an alignment in the form -start and -end. For example, 'right-start', or 'bottom-end'. These allow you to align the tooltip to the edges of the button, rather than centering it.
 
 -   Type: `String`
 -   Required: No
--   Default: `"bottom right"`
+-   Default: `"bottom-start"`
 
 ### children
 
@@ -137,9 +141,3 @@ If you need the `DOMRect` object i.e., the position of popover to be calculated
 
 -   Type: `Function`
 -   Required: No
-
-## Methods
-
-### refresh
-
-Calling `refresh()` will force the Popover to recalculate its size and position. This is useful when a DOM change causes the anchor node to change position.