@wordpress/components 19.9.0 → 19.12.0

package/src/draggable/index.native.js

@@ -0,0 +1,226 @@
+/**
+ * External dependencies
+ */
+import {
+	Gesture,
+	GestureDetector,
+	LongPressGestureHandler,
+} from 'react-native-gesture-handler';
+import Animated, {
+	useSharedValue,
+	runOnJS,
+	useAnimatedReaction,
+	useAnimatedGestureHandler,
+} from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext, useRef, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const Context = createContext( {} );
+const { Provider } = Context;
+
+/**
+ * Draggable component.
+ *
+ * @param {Object}      props               Component props.
+ * @param {JSX.Element} props.children      Children to be rendered.
+ * @param {Function}    [props.onDragEnd]   Callback when dragging ends.
+ * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.
+ * @param {Function}    [props.onDragStart] Callback when dragging starts.
+ * @param {string}      [props.testID]      Id used for querying the pan gesture in tests.
+ *
+ * @return {JSX.Element} The component to be rendered.
+ */
+const Draggable = ( {
+	children,
+	onDragEnd,
+	onDragOver,
+	onDragStart,
+	testID,
+} ) => {
+	const isDragging = useSharedValue( false );
+	const isPanActive = useSharedValue( false );
+	const draggingId = useSharedValue( '' );
+	const panGestureRef = useRef();
+	const currentFirstTouchId = useSharedValue( null );
+
+	const initialPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
+	const lastPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
+
+	useAnimatedReaction(
+		() => isDragging.value,
+		( result, previous ) => {
+			if ( result === previous || previous === null ) {
+				return;
+			}
+
+			if ( result ) {
+				if ( onDragStart ) {
+					onDragStart( {
+						x: initialPosition.x.value,
+						y: initialPosition.y.value,
+						id: draggingId.value,
+					} );
+				}
+			} else if ( onDragEnd ) {
+				onDragEnd( {
+					x: lastPosition.x.value,
+					y: lastPosition.y.value,
+					id: draggingId.value,
+				} );
+			}
+		}
+	);
+
+	function getFirstTouchEvent( event ) {
+		'worklet';
+
+		return event.allTouches.find(
+			( touch ) => touch.id === currentFirstTouchId.value
+		);
+	}
+
+	const panGesture = Gesture.Pan()
+		.manualActivation( true )
+		.onTouchesDown( ( event ) => {
+			if ( ! currentFirstTouchId.value ) {
+				const firstEvent = event.allTouches[ 0 ];
+				const { x = 0, y = 0 } = firstEvent;
+
+				currentFirstTouchId.value = firstEvent.id;
+
+				initialPosition.x.value = x;
+				initialPosition.y.value = y;
+			}
+		} )
+		.onTouchesMove( ( event, state ) => {
+			if ( ! isPanActive.value && isDragging.value ) {
+				isPanActive.value = true;
+				state.activate();
+			}
+
+			if ( isPanActive.value && isDragging.value ) {
+				const firstEvent = getFirstTouchEvent( event );
+
+				if ( ! firstEvent ) {
+					state.end();
+					return;
+				}
+
+				lastPosition.x.value = firstEvent.x;
+				lastPosition.y.value = firstEvent.y;
+
+				if ( onDragOver ) {
+					onDragOver( firstEvent );
+				}
+			}
+		} )
+		.onTouchesCancelled( ( _event, state ) => {
+			state.end();
+		} )
+		.onEnd( () => {
+			currentFirstTouchId.value = null;
+			isPanActive.value = false;
+			isDragging.value = false;
+		} )
+		.withRef( panGestureRef )
+		.shouldCancelWhenOutside( false )
+		.withTestId( testID );
+
+	const providerValue = useMemo( () => {
+		return { panGestureRef, isDragging, isPanActive, draggingId };
+	}, [] );
+
+	return (
+		<GestureDetector gesture={ panGesture }>
+			<Animated.View style={ styles.draggable__container }>
+				<Provider value={ providerValue }>{ children }</Provider>
+			</Animated.View>
+		</GestureDetector>
+	);
+};
+
+/**
+ * Draggable trigger component.
+ *
+ * This component acts as the trigger for the dragging functionality.
+ *
+ * @param {Object}      props                  Component props.
+ * @param {JSX.Element} props.children         Children to be rendered.
+ * @param {*}           props.id               Identifier passed within the event callbacks.
+ * @param {boolean}     [props.enabled]        Enables the long-press gesture.
+ * @param {number}      [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.
+ * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
+ * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.
+ * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.
+ * @param {string}      [props.testID]         Id used for querying the long-press gesture handler in tests.
+ *
+ * @return {JSX.Element} The component to be rendered.
+ */
+const DraggableTrigger = ( {
+	children,
+	enabled = true,
+	id,
+	maxDistance = 1000,
+	minDuration = 500,
+	onLongPress,
+	onLongPressEnd,
+	testID,
+} ) => {
+	const { panGestureRef, isDragging, isPanActive, draggingId } = useContext(
+		Context
+	);
+
+	const gestureHandler = useAnimatedGestureHandler( {
+		onActive: () => {
+			if ( isDragging.value ) {
+				return;
+			}
+
+			draggingId.value = id;
+			isDragging.value = true;
+			if ( onLongPress ) {
+				runOnJS( onLongPress )( id );
+			}
+		},
+		onEnd: () => {
+			if ( ! isPanActive.value ) {
+				isDragging.value = false;
+			}
+
+			if ( onLongPressEnd ) {
+				runOnJS( onLongPressEnd )( id );
+			}
+		},
+	} );
+
+	return (
+		<LongPressGestureHandler
+			enabled={ enabled }
+			minDurationMs={ minDuration }
+			maxDist={ maxDistance }
+			simultaneousHandlers={ panGestureRef }
+			shouldCancelWhenOutside={ false }
+			onGestureEvent={ gestureHandler }
+			testID={ testID }
+		>
+			{ children }
+		</LongPressGestureHandler>
+	);
+};
+
+export { DraggableTrigger };
+export default Draggable;

package/src/draggable/style.native.scss

@@ -0,0 +1,3 @@
+.draggable__container {
+	flex: 1;
+}

package/src/draggable/test/index.native.js

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import { render } from 'test/helpers';
+import {
+	fireGestureHandler,
+	getByGestureTestId,
+} from 'react-native-gesture-handler/jest-utils';
+import { State } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { Draggable, DraggableTrigger } from '@wordpress/components';
+
+// Touch event type constants have been extracted from original source code, as they are not exported in the package.
+// Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
+const TouchEventType = {
+	UNDETERMINED: 0,
+	TOUCHES_DOWN: 1,
+	TOUCHES_MOVE: 2,
+	TOUCHES_UP: 3,
+	TOUCHES_CANCELLED: 4,
+};
+
+// Reanimated uses "requestAnimationFrame" for notifying shared value updates when using "useAnimatedReaction" hook.
+// For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
+let requestAnimationFrameCopy;
+beforeEach( () => {
+	requestAnimationFrameCopy = global.requestAnimationFrame;
+	global.requestAnimationFrame = ( callback ) => callback();
+} );
+afterEach( () => {
+	global.requestAnimationFrame = requestAnimationFrameCopy;
+} );
+
+describe( 'Draggable', () => {
+	it( 'triggers onLongPress handler', () => {
+		const triggerId = 'trigger-id';
+		const onLongPress = jest.fn();
+		const { getByTestId } = render(
+			<Draggable>
+				<DraggableTrigger
+					id={ triggerId }
+					enabled={ true }
+					minDuration={ 500 }
+					onLongPress={ onLongPress }
+					testID="draggableTrigger"
+				>
+					<Animated.View />
+				</DraggableTrigger>
+			</Draggable>
+		);
+
+		const draggableTrigger = getByTestId( 'draggableTrigger' );
+		fireGestureHandler( draggableTrigger, [
+			{ oldState: State.BEGAN, state: State.ACTIVE },
+			{ state: State.ACTIVE },
+		] );
+
+		expect( onLongPress ).toBeCalledTimes( 1 );
+		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
+	} );
+
+	it( 'triggers dragging handlers', () => {
+		const triggerId = 'trigger-id';
+		const onDragStart = jest.fn();
+		const onDragOver = jest.fn();
+		const onDragEnd = jest.fn();
+		const { getByTestId } = render(
+			<Draggable
+				onDragStart={ onDragStart }
+				onDragOver={ onDragOver }
+				onDragEnd={ onDragEnd }
+				testID="draggable"
+			>
+				<DraggableTrigger id={ triggerId } testID="draggableTrigger">
+					<Animated.View />
+				</DraggableTrigger>
+			</Draggable>
+		);
+
+		const draggableTrigger = getByTestId( 'draggableTrigger' );
+		const draggable = getByGestureTestId( 'draggable' );
+		const touchEventId = 1;
+		const touchEvents = [
+			{ id: touchEventId, x: 0, y: 0 },
+			{ id: touchEventId, x: 100, y: 100 },
+			{ id: touchEventId, x: 50, y: 50 },
+		];
+		fireGestureHandler( draggableTrigger, [
+			{ oldState: State.BEGAN, state: State.ACTIVE },
+			{ state: State.ACTIVE },
+		] );
+		fireGestureHandler( draggable, [
+			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
+			{ oldState: State.BEGAN, state: State.ACTIVE },
+			{
+				allTouches: [ touchEvents[ 0 ] ],
+				eventType: TouchEventType.TOUCHES_DOWN,
+			},
+			{
+				allTouches: [ touchEvents[ 1 ] ],
+				eventType: TouchEventType.TOUCHES_MOVE,
+			},
+			{
+				allTouches: [ touchEvents[ 2 ] ],
+				eventType: TouchEventType.TOUCHES_MOVE,
+			},
+			{ state: State.END },
+		] );
+
+		expect( onDragStart ).toBeCalledTimes( 1 );
+		expect( onDragStart ).toHaveBeenCalledWith( {
+			id: triggerId,
+			x: touchEvents[ 0 ].x,
+			y: touchEvents[ 0 ].y,
+		} );
+		expect( onDragOver ).toBeCalledTimes( 2 );
+		expect( onDragOver ).toHaveBeenNthCalledWith( 1, touchEvents[ 1 ] );
+		expect( onDragOver ).toHaveBeenNthCalledWith( 2, touchEvents[ 2 ] );
+		expect( onDragEnd ).toBeCalledTimes( 1 );
+		expect( onDragEnd ).toHaveBeenCalledWith( {
+			id: triggerId,
+			x: touchEvents[ 2 ].x,
+			y: touchEvents[ 2 ].y,
+		} );
+	} );
+} );

package/src/dropdown/index.js

@@ -31,12 +31,12 @@ export default function Dropdown( props ) {
 	const {
 		renderContent,
 		renderToggle,
-		position = 'bottom right',
 		className,
 		contentClassName,
 		expandOnMobile,
 		headerTitle,
 		focusOnMount,
+		position,
 		popoverProps,
 		onClose,
 		onToggle,
@@ -82,6 +82,10 @@ export default function Dropdown( props ) {
 	}
 
 	const args = { isOpen, onToggle: toggle, onClose: close };
+	const hasAnchorRef =
+		!! popoverProps?.anchorRef ||
+		!! popoverProps?.getAnchorRect ||
+		!! popoverProps?.anchorRect;
 
 	return (
 		<div
@@ -101,10 +105,15 @@ export default function Dropdown( props ) {
 					expandOnMobile={ expandOnMobile }
 					headerTitle={ headerTitle }
 					focusOnMount={ focusOnMount }
-					{ ...popoverProps }
+					// This value is used to ensure that the dropdowns
+					// align with the editor header by default.
+					offset={ 13 }
 					anchorRef={
-						popoverProps?.anchorRef ?? containerRef.current
+						! hasAnchorRef
+							? containerRef?.current?.firstChild // Anchor to the rendered toggle.
+							: undefined
 					}
+					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',
 						popoverProps ? popoverProps.className : undefined,

package/src/dropdown/style.scss

@@ -3,7 +3,7 @@
 }
 
 .components-dropdown__content {
-	.components-popover__content > div {
+	.components-popover__content {
 		padding: $grid-unit-10;
 	}
 

package/src/focal-point-picker/index.native.js

@@ -105,7 +105,7 @@ function FocalPointPicker( props ) {
 					// coordinates to workaround a bug affecting Android's PanResponder.
 					// Specifically, dragging the handle outside the bounds of the image
 					// results in inaccurate locationX and locationY coordinates to be
-					// reported. https://git.io/JtWmi
+					// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944
 					const x = pageX - locationPageOffsetX;
 					const y = pageY - locationPageOffsetY;
 					onChange( {
@@ -116,7 +116,7 @@ function FocalPointPicker( props ) {
 					} );
 					// Slider (child of RangeCell) is uncontrolled, so we must increment a
 					// key to re-mount and sync the pan gesture values to the sliders
-					// https://git.io/JTe4A
+					// https://github.com/callstack/react-native-slider/tree/v3.0.3#value
 					setSliderKey( ( prevState ) => prevState + 1 );
 				},
 			} ),
@@ -193,7 +193,7 @@ function FocalPointPicker( props ) {
 		setVideoNaturalSize( { height, width } );
 		setDisplayPlaceholder( false );
 		// Avoid invisible, paused video on Android, presumably related to
-		// https://git.io/Jt6Dr
+		// https://github.com/react-native-video/react-native-video/issues/1979
 		videoRef?.current.seek( 0 );
 	};
 	const onXCoordinateChange = ( x ) =>

package/src/form-file-upload/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render as RTLrender, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -14,16 +14,6 @@ import FormFileUpload from '../';
  */
 const { File } = window;
 
-function render( jsx ) {
-	return {
-		user: userEvent.setup( {
-			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
-			delay: null,
-		} ),
-		...RTLrender( jsx ),
-	};
-}
-
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {
@@ -32,6 +22,15 @@ const fakePath = expect.objectContaining( {
 } );
 
 describe( 'FormFileUpload', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	} );
+
 	it( 'should show an Icon Button and a hidden input', () => {
 		render( <FormFileUpload>My Upload Button</FormFileUpload> );
 
@@ -42,9 +41,13 @@ describe( 'FormFileUpload', () => {
 	} );
 
 	it( 'should not fire a change event after selecting the same file', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChange = jest.fn();
 
-		const { user } = render(
+		render(
 			<FormFileUpload onChange={ onChange }>
 				My Upload Button
 			</FormFileUpload>
@@ -65,9 +68,13 @@ describe( 'FormFileUpload', () => {
 	} );
 
 	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChange = jest.fn();
 
-		const { user } = render(
+		render(
 			<FormFileUpload
 				onClick={ jest.fn( ( e ) => ( e.target.value = '' ) ) }
 				onChange={ onChange }

package/src/index.js

@@ -71,7 +71,6 @@ export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
 export { Elevation as __experimentalElevation } from './elevation';
 export { default as ExternalLink } from './external-link';
 export { Flex, FlexBlock, FlexItem } from './flex';
-export { Flyout as __experimentalFlyout } from './flyout';
 export { default as FocalPointPicker } from './focal-point-picker';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';

package/src/index.native.js

@@ -61,6 +61,7 @@ export {
 	filterUnitsWithSettings as filterUnitsWithSettings,
 } from './unit-control/utils';
 export { default as Disabled } from './disabled';
+export { default as Draggable, DraggableTrigger } from './draggable';
 
 // Higher-Order Components.
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';

package/src/input-control/README.md

@@ -18,7 +18,7 @@ const Example = () => {
 	return (
 		<InputControl
 			value={ value }
-			onChange={ ( nextValue ) => setValue( nextValue ) }
+			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
 	);
 };

package/src/input-control/index.tsx

@@ -17,6 +17,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
+import { useDraft } from './utils';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputControl );
@@ -52,6 +53,12 @@ export function UnforwardedInputControl(
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
+	const draftHookProps = useDraft( {
+		value,
+		onBlur: props.onBlur,
+		onChange,
+	} );
+
 	return (
 		<InputBase
 			__unstableInputWidth={ __unstableInputWidth }
@@ -75,14 +82,13 @@ export function UnforwardedInputControl(
 				id={ id }
 				isFocused={ isFocused }
 				isPressEnterToChange={ isPressEnterToChange }
-				onChange={ onChange }
 				onKeyDown={ onKeyDown }
 				onValidate={ onValidate }
 				ref={ ref }
 				setIsFocused={ setIsFocused }
 				size={ size }
 				stateReducer={ stateReducer }
-				value={ value }
+				{ ...draftHookProps }
 			/>
 		</InputBase>
 	);
@@ -92,7 +98,7 @@ export function UnforwardedInputControl(
  * InputControl components let users enter and edit text. This is an experimental component
  * intended to (in time) merge with or replace `TextControl`.
  *
- * @example
+ * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
  * import { useState } from '@wordpress/compose';
  *
@@ -102,10 +108,11 @@ export function UnforwardedInputControl(
  *   return (
  *  	<InputControl
  *  		value={ value }
- *  		onChange={ ( nextValue ) => setValue( nextValue ) }
+ *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>
  *   );
  * };
+ * ```
  */
 export const InputControl = forwardRef( UnforwardedInputControl );
 

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

@@ -24,7 +24,6 @@ import type { WordPressComponentProps } from '../ui/context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
-import { useUpdateEffect } from '../utils';
 import type { InputFieldProps } from './types';
 
 function InputField(
@@ -67,40 +66,21 @@ function InputField(
 		pressEnter,
 		pressUp,
 		reset,
-	} = useInputControlStateReducer( stateReducer, {
-		isDragEnabled,
-		value: valueProp,
-		isPressEnterToChange,
-	} );
+	} = useInputControlStateReducer(
+		stateReducer,
+		{
+			isDragEnabled,
+			value: valueProp,
+			isPressEnterToChange,
+		},
+		onChange
+	);
 
-	const { _event, value, isDragging, isDirty } = state;
+	const { value, isDragging, isDirty } = state;
 	const wasDirtyOnBlur = useRef( false );
 
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
-	/*
-	 * Handles synchronization of external and internal value state.
-	 * If not focused and did not hold a dirty value[1] on blur
-	 * updates the value from the props. Otherwise if not holding
-	 * a dirty value[1] propagates the value and event through onChange.
-	 * [1] value is only made dirty if isPressEnterToChange is true
-	 */
-	useUpdateEffect( () => {
-		if ( valueProp === value ) {
-			return;
-		}
-		if ( ! isFocused && ! wasDirtyOnBlur.current ) {
-			commit( valueProp, _event as SyntheticEvent );
-		} else if ( ! isDirty ) {
-			onChange( value, {
-				event: _event as
-					| ChangeEvent< HTMLInputElement >
-					| PointerEvent< HTMLInputElement >,
-			} );
-			wasDirtyOnBlur.current = false;
-		}
-	}, [ value, isDirty, isFocused, valueProp ] );
-
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
 		setIsFocused?.( false );