@wordpress/components 19.11.0 → 19.12.0

package/src/date-time/{test/time.tsx → time/test/index.tsx}

@@ -1,15 +1,20 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
-import TimePicker from '../time';
+import TimePicker from '..';
 
 describe( 'TimePicker', () => {
-	it( 'should call onChange with updated date values', () => {
+	it( 'should call onChange with updated date values', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -26,38 +31,46 @@ describe( 'TimePicker', () => {
 		const hoursInput = screen.getByLabelText( 'Hours' );
 		const minutesInput = screen.getByLabelText( 'Minutes' );
 
-		fireEvent.change( monthInput, { target: { value: '12' } } );
-		fireEvent.blur( monthInput );
+		await user.selectOptions( monthInput, '12' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-12-18T11:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( dayInput, { target: { value: '22' } } );
-		fireEvent.blur( dayInput );
+		await user.clear( dayInput );
+		await user.type( dayInput, '22' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-12-22T11:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( yearInput, { target: { value: '2018' } } );
-		fireEvent.blur( yearInput );
+		await user.clear( yearInput );
+		await user.type( yearInput, '2018' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T11:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( hoursInput, { target: { value: '12' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '12' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( minutesInput, { target: { value: '35' } } );
-		fireEvent.blur( minutesInput );
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '35' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:35:00' );
 		onChangeSpy.mockClear();
 	} );
 
-	it( 'should call onChange with an updated hour (12-hour clock)', () => {
+	it( 'should call onChange with an updated hour (12-hour clock)', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -70,13 +83,18 @@ describe( 'TimePicker', () => {
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
 
-		fireEvent.change( hoursInput, { target: { value: '10' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '10' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T10:00:00' );
 	} );
 
-	it( 'should not call onChange with an updated hour (12-hour clock) if the hour is out of bounds', () => {
+	it( 'should call onChange with a bounded hour (12-hour clock) if the hour is out of bounds', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -89,13 +107,18 @@ describe( 'TimePicker', () => {
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
 
-		fireEvent.change( hoursInput, { target: { value: '22' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '22' );
+		await user.keyboard( '{Tab}' );
 
-		expect( onChangeSpy ).not.toHaveBeenCalled();
+		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T00:00:00' );
 	} );
 
-	it( 'should call onChange with an updated hour (24-hour clock)', () => {
+	it( 'should call onChange with an updated hour (24-hour clock)', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -108,13 +131,18 @@ describe( 'TimePicker', () => {
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
 
-		fireEvent.change( hoursInput, { target: { value: '22' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '22' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T22:00:00' );
 	} );
 
-	it( 'should not call onChange with an updated minute if out of bounds', () => {
+	it( 'should call onChange with a bounded minute if out of bounds', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -127,13 +155,18 @@ describe( 'TimePicker', () => {
 
 		const minutesInput = screen.getByLabelText( 'Minutes' );
 
-		fireEvent.change( minutesInput, { target: { value: '99' } } );
-		fireEvent.blur( minutesInput );
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '99' );
+		await user.keyboard( '{Tab}' );
 
-		expect( onChangeSpy ).not.toHaveBeenCalled();
+		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:59:00' );
 	} );
 
-	it( 'should switch to PM correctly', () => {
+	it( 'should switch to PM correctly', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -146,12 +179,16 @@ describe( 'TimePicker', () => {
 
 		const pmButton = screen.getByText( 'PM' );
 
-		fireEvent.click( pmButton );
+		await user.click( pmButton );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T23:00:00' );
 	} );
 
-	it( 'should switch to AM correctly', () => {
+	it( 'should switch to AM correctly', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -164,12 +201,16 @@ describe( 'TimePicker', () => {
 
 		const amButton = screen.getByText( 'AM' );
 
-		fireEvent.click( amButton );
+		await user.click( amButton );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:00:00' );
 	} );
 
-	it( 'should allow to set the time correctly when the PM period is selected', () => {
+	it( 'should allow to set the time correctly when the PM period is selected', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -181,11 +222,12 @@ describe( 'TimePicker', () => {
 		);
 
 		const pmButton = screen.getByText( 'PM' );
-		fireEvent.click( pmButton );
+		await user.click( pmButton );
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
-		fireEvent.change( hoursInput, { target: { value: '6' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '6' );
+		await user.keyboard( '{Tab}' );
 
 		// When clicking on 'PM', we expect the time to be 11pm
 		expect( onChangeSpy ).toHaveBeenNthCalledWith(
@@ -199,7 +241,11 @@ describe( 'TimePicker', () => {
 		);
 	} );
 
-	it( 'should truncate at the minutes on change', () => {
+	it( 'should truncate at the minutes on change', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -212,8 +258,9 @@ describe( 'TimePicker', () => {
 
 		const minutesInput = screen.getByLabelText( 'Minutes' );
 
-		fireEvent.change( minutesInput, { target: { value: '22' } } );
-		fireEvent.blur( minutesInput );
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '22' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T23:22:00' );
 	} );

package/src/date-time/{timezone.tsx → time/timezone.tsx}

@@ -7,7 +7,8 @@ import { __experimentalGetSettings as getDateSettings } from '@wordpress/date';
 /**
  * Internal dependencies
  */
-import Tooltip from '../tooltip';
+import Tooltip from '../../tooltip';
+import { TimeZone as StyledComponent } from './styles';
 
 /**
  * Displays timezone information when user timezone is different from site
@@ -38,7 +39,9 @@ const TimeZone = () => {
 
 	return (
 		<Tooltip position="top center" text={ timezoneDetail }>
-			<div className="components-datetime__timezone">{ zoneAbbr }</div>
+			<StyledComponent className="components-datetime__timezone">
+				{ zoneAbbr }
+			</StyledComponent>
 		</Tooltip>
 	);
 };

package/src/date-time/types.ts

@@ -2,24 +2,6 @@
  * External dependencies
  */
 import type { Moment } from 'moment';
-import type { ReactNode } from 'react';
-
-export type UpdateOnBlurAsIntegerFieldProps = {
-	/**
-	 * The value of the integer field.
-	 */
-	value: number | string;
-
-	/**
-	 * Called when the field is changed.
-	 */
-	onUpdate: ( value: number ) => void;
-
-	/**
-	 * Children to render inside the field.
-	 */
-	children?: ReactNode;
-};
 
 export type TimePickerProps = {
 	/**
@@ -103,4 +85,20 @@ export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
 		 * passed the date and time as an argument.
 		 */
 		onChange?: ( date: string | null ) => void;
+
+		/**
+		 * Start opting in to not displaying a Help button which will become the
+		 * default in a future version.
+		 *
+		 * @default false
+		 */
+		__nextRemoveHelpButton?: boolean;
+
+		/**
+		 * Start opting in to not displaying a Reset button which will become
+		 * the default in a future version.
+		 *
+		 * @default false
+		 */
+		__nextRemoveResetButton?: boolean;
 	};

package/src/draggable/index.native.js

@@ -34,10 +34,17 @@ const { Provider } = Context;
  * @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 } ) => {
+const Draggable = ( {
+	children,
+	onDragEnd,
+	onDragOver,
+	onDragStart,
+	testID,
+} ) => {
 	const isDragging = useSharedValue( false );
 	const isPanActive = useSharedValue( false );
 	const draggingId = useSharedValue( '' );
@@ -130,7 +137,8 @@ const Draggable = ( { children, onDragEnd, onDragOver, onDragStart } ) => {
 			isDragging.value = false;
 		} )
 		.withRef( panGestureRef )
-		.shouldCancelWhenOutside( false );
+		.shouldCancelWhenOutside( false )
+		.withTestId( testID );
 
 	const providerValue = useMemo( () => {
 		return { panGestureRef, isDragging, isPanActive, draggingId };
@@ -158,6 +166,7 @@ const Draggable = ( { children, onDragEnd, onDragOver, onDragStart } ) => {
  * @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.
  */
@@ -169,6 +178,7 @@ const DraggableTrigger = ( {
 	minDuration = 500,
 	onLongPress,
 	onLongPressEnd,
+	testID,
 } ) => {
 	const { panGestureRef, isDragging, isPanActive, draggingId } = useContext(
 		Context
@@ -180,8 +190,8 @@ const DraggableTrigger = ( {
 				return;
 			}
 
-			isDragging.value = true;
 			draggingId.value = id;
+			isDragging.value = true;
 			if ( onLongPress ) {
 				runOnJS( onLongPress )( id );
 			}
@@ -205,6 +215,7 @@ const DraggableTrigger = ( {
 			simultaneousHandlers={ panGestureRef }
 			shouldCancelWhenOutside={ false }
 			onGestureEvent={ gestureHandler }
+			testID={ testID }
 		>
 			{ children }
 		</LongPressGestureHandler>

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

@@ -108,7 +108,11 @@ export default function Dropdown( props ) {
 					// This value is used to ensure that the dropdowns
 					// align with the editor header by default.
 					offset={ 13 }
-					anchorRef={ ! hasAnchorRef ? containerRef : undefined }
+					anchorRef={
+						! hasAnchorRef
+							? containerRef?.current?.firstChild // Anchor to the rendered toggle.
+							: undefined
+					}
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',

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>
 	);

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 );