@wordpress/components 19.11.0 → 19.14.0

package/src/date-time/time/styles.ts

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../../utils';
+import { space } from '../../ui/utils/space';
+import {
+	Input,
+	BackdropUI,
+} from '../../input-control/styles/input-control-styles';
+import NumberControl from '../../number-control';
+import SelectControl from '../../select-control';
+import { Select } from '../../select-control/styles/select-control-styles';
+
+export const Wrapper = styled.div``;
+
+export const Fieldset = styled.fieldset`
+	border: 0;
+	margin: 0 0 ${ space( 2 * 2 ) } 0;
+	padding: 0;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+`;
+
+export const Legend = styled.legend`
+	margin-bottom: ${ space( 2 ) };
+	padding: 0;
+`;
+
+export const TimeWrapper = styled.div`
+	direction: ltr;
+	display: flex;
+`;
+
+const baseInput = css`
+	&&& ${ Input } {
+		padding-left: ${ space( 2 ) };
+		padding-right: ${ space( 2 ) };
+		text-align: center;
+	}
+`;
+
+export const HoursInput = styled( NumberControl )`
+	${ baseInput }
+
+	width: ${ space( 9 ) };
+
+	&&& ${ Input } {
+		padding-right: 0;
+	}
+
+	&&& ${ BackdropUI } {
+		border-right: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+`;
+
+export const TimeSeparator = styled.span`
+	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	line-height: calc(
+		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
+	);
+	display: inline-block;
+`;
+
+export const MinutesInput = styled( NumberControl )`
+	${ baseInput }
+
+	width: ${ space( 9 ) };
+
+	&&& ${ Input } {
+		padding-left: 0;
+	}
+
+	&&& ${ BackdropUI } {
+		border-left: 0;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+`;
+
+// Ideally we wouldn't need a wrapper, but can't otherwise target the
+// <BaseControl> in <SelectControl>
+export const MonthSelectWrapper = styled.div`
+	flex-grow: 1;
+`;
+
+export const MonthSelect = styled( SelectControl )`
+	height: 36px;
+
+	${ Select } {
+		line-height: 30px;
+	}
+`;
+
+export const DayInput = styled( NumberControl )`
+	${ baseInput }
+
+	width: ${ space( 9 ) };
+`;
+
+export const YearInput = styled( NumberControl )`
+	${ baseInput }
+
+	width: ${ space( 14 ) };
+`;
+
+export const TimeZone = styled.div`
+	text-decoration: underline dotted;
+`;

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' );
 	} );
@@ -319,20 +366,20 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		const monthInput = ( screen.getByLabelText(
-			'Month'
-		) as HTMLInputElement ).value;
+		const monthInput = (
+			screen.getByLabelText( 'Month' ) as HTMLInputElement
+		 ).value;
 		const dayInput = ( screen.getByLabelText( 'Day' ) as HTMLInputElement )
 			.value;
-		const yearInput = ( screen.getByLabelText(
-			'Year'
-		) as HTMLInputElement ).value;
-		const hoursInput = ( screen.getByLabelText(
-			'Hours'
-		) as HTMLInputElement ).value;
-		const minutesInput = ( screen.getByLabelText(
-			'Minutes'
-		) as HTMLInputElement ).value;
+		const yearInput = (
+			screen.getByLabelText( 'Year' ) as HTMLInputElement
+		 ).value;
+		const hoursInput = (
+			screen.getByLabelText( 'Hours' ) as HTMLInputElement
+		 ).value;
+		const minutesInput = (
+			screen.getByLabelText( 'Minutes' ) as HTMLInputElement
+		 ).value;
 
 		expect( Number.isNaN( parseInt( monthInput, 10 ) ) ).toBe( false );
 		expect( Number.isNaN( parseInt( dayInput, 10 ) ) ).toBe( false );

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 = {
 	/**
@@ -94,6 +76,13 @@ export type DatePickerProps = {
 	 * dot on the day of the event.
 	 */
 	events?: DatePickerEvent[];
+
+	/**
+	 * The day that the week should start on. 0 for Sunday, 1 for Monday, etc.
+	 *
+	 * @default 0
+	 */
+	startOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
@@ -103,4 +92,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/dimension-control/README.md

@@ -11,12 +11,15 @@ This feature is still experimental. “Experimental” means this is an early im
 In a block's `edit` implementation, render a `<DimensionControl />` component.
 
 ```jsx
-import { partialRight } from 'lodash';
-
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { DimensionControl } from '@wordpress/components';
 
+const partialRight =
+	( fn, ...partialArgs ) =>
+	( ...args ) =>
+		fn( ...args, ...partialArgs );
+
 registerBlockType( 'my-plugin/my-block', {
 	// ...
 

package/src/dimension-control/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ export function DimensionControl( props ) {
 
 		if ( ! theSize || value === theSize.slug ) {
 			onChange( undefined );
-		} else if ( isFunction( onChange ) ) {
+		} else if ( typeof onChange === 'function' ) {
 			onChange( theSize.slug );
 		}
 	};

package/src/dimension-control/test/index.test.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow, mount } from 'enzyme';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { DimensionControl } from '../';
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
+	const instanceId = 1;
 
 	afterEach( () => {
 		onChangeHandler.mockClear();
@@ -25,7 +25,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders with defaults', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Padding' }
 				/>
 			);
@@ -35,7 +35,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders with icon and default icon label', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Margin' }
 					icon={ plus }
 				/>
@@ -46,7 +46,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders with icon and custom icon label', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Margin' }
 					icon={ plus }
 					iconLabel={ 'Tablet Devices' }
@@ -76,7 +76,7 @@ describe( 'DimensionControl', () => {
 
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Custom Dimension' }
 					sizes={ customSizes }
 				/>
@@ -89,7 +89,7 @@ describe( 'DimensionControl', () => {
 		it( 'should call onChange handler with correct args on size change', () => {
 			const wrapper = mount(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Padding' }
 					onChange={ onChangeHandler }
 				/>
@@ -121,7 +121,7 @@ describe( 'DimensionControl', () => {
 		it( 'should call onChange handler with undefined value when no size is provided on change', () => {
 			const wrapper = mount(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Padding' }
 					onChange={ onChangeHandler }
 				/>

package/src/divider/styles.ts

@@ -57,9 +57,8 @@ const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
 }: Props ) => {
 	return css( {
-		[ orientation === 'vertical'
-			? 'borderRight'
-			: 'borderBottom' ]: '1px solid currentColor',
+		[ orientation === 'vertical' ? 'borderRight' : 'borderBottom' ]:
+			'1px solid currentColor',
 	} );
 };
 

package/src/draggable/index.js

@@ -144,9 +144,9 @@ export default function Draggable( {
 			cloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;
 
 			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
-			Array.from(
-				clone.querySelectorAll( 'iframe' )
-			).forEach( ( child ) => child.parentNode.removeChild( child ) );
+			Array.from( clone.querySelectorAll( 'iframe' ) ).forEach(
+				( child ) => child.parentNode.removeChild( child )
+			);
 
 			cloneWrapper.appendChild( clone );
 

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,11 +137,21 @@ 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 };
-	}, [] );
+	}, [
+		// `isDragging`, `isPanActive` and `draggingId` are created using the
+		// `useSharedValue` hook provided by the `react-native-reanimated`, which in
+		// theory should guarantee that the value of these variables remains stable.
+		// ESLint can't pick this up, and that's why they have to be specified as
+		// dependencies for this hook call.
+		isDragging,
+		isPanActive,
+		draggingId,
+	] );
 
 	return (
 		<GestureDetector gesture={ panGesture }>
@@ -158,6 +175,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,10 +187,10 @@ const DraggableTrigger = ( {
 	minDuration = 500,
 	onLongPress,
 	onLongPressEnd,
+	testID,
 } ) => {
-	const { panGestureRef, isDragging, isPanActive, draggingId } = useContext(
-		Context
-	);
+	const { panGestureRef, isDragging, isPanActive, draggingId } =
+		useContext( Context );
 
 	const gestureHandler = useAnimatedGestureHandler( {
 		onActive: () => {
@@ -180,8 +198,8 @@ const DraggableTrigger = ( {
 				return;
 			}
 
-			isDragging.value = true;
 			draggingId.value = id;
+			isDragging.value = true;
 			if ( onLongPress ) {
 				runOnJS( onLongPress )( id );
 			}
@@ -205,6 +223,7 @@ const DraggableTrigger = ( {
 			simultaneousHandlers={ panGestureRef }
 			shouldCancelWhenOutside={ false }
 			onGestureEvent={ gestureHandler }
+			testID={ testID }
 		>
 			{ children }
 		</LongPressGestureHandler>