@wordpress/components 19.10.0 → 19.13.0

package/src/date-time/{test/time.js → 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' );
 	} );
@@ -237,11 +284,21 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		expect( screen.getByLabelText( 'Month' ).value ).toBe( '07' );
-		expect( screen.getByLabelText( 'Day' ).value ).toBe( '13' );
-		expect( screen.getByLabelText( 'Year' ).value ).toBe( '2020' );
-		expect( screen.getByLabelText( 'Hours' ).value ).toBe( '06' );
-		expect( screen.getByLabelText( 'Minutes' ).value ).toBe( '00' );
+		expect(
+			( screen.getByLabelText( 'Month' ) as HTMLInputElement ).value
+		).toBe( '07' );
+		expect(
+			( screen.getByLabelText( 'Day' ) as HTMLInputElement ).value
+		).toBe( '13' );
+		expect(
+			( screen.getByLabelText( 'Year' ) as HTMLInputElement ).value
+		).toBe( '2020' );
+		expect(
+			( screen.getByLabelText( 'Hours' ) as HTMLInputElement ).value
+		).toBe( '06' );
+		expect(
+			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
+		).toBe( '00' );
 		/**
 		 * This is not ideal, but best of we can do for now until we refactor
 		 * AM/PM into accessible elements, like radio buttons.
@@ -267,14 +324,12 @@ describe( 'TimePicker', () => {
 			</form>
 		);
 
-		const form = screen.getByRole( 'form' );
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
 
-		let monthInputIndex = [].indexOf.call(
-			form.elements,
+		let monthInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Month' )
 		);
-		let dayInputIndex = [].indexOf.call(
-			form.elements,
+		let dayInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Day' )
 		);
 
@@ -290,12 +345,10 @@ describe( 'TimePicker', () => {
 			</form>
 		);
 
-		monthInputIndex = [].indexOf.call(
-			form.elements,
+		monthInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Month' )
 		);
-		dayInputIndex = [].indexOf.call(
-			form.elements,
+		dayInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Day' )
 		);
 
@@ -313,11 +366,20 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		const monthInput = screen.getByLabelText( 'Month' ).value;
-		const dayInput = screen.getByLabelText( 'Day' ).value;
-		const yearInput = screen.getByLabelText( 'Year' ).value;
-		const hoursInput = screen.getByLabelText( 'Hours' ).value;
-		const minutesInput = screen.getByLabelText( 'Minutes' ).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;
 
 		expect( Number.isNaN( parseInt( monthInput, 10 ) ) ).toBe( false );
 		expect( Number.isNaN( parseInt( dayInput, 10 ) ) ).toBe( false );

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

@@ -7,10 +7,12 @@ 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 timezone.
+ * Displays timezone information when user timezone is different from site
+ * timezone.
  */
 const TimeZone = () => {
 	const { timezone } = getDateSettings();
@@ -24,9 +26,9 @@ const TimeZone = () => {
 		return null;
 	}
 
-	const offsetSymbol = timezone.offset >= 0 ? '+' : '';
+	const offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';
 	const zoneAbbr =
-		'' !== timezone.abbr && isNaN( timezone.abbr )
+		'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )
 			? timezone.abbr
 			: `UTC${ offsetSymbol }${ timezone.offset }`;
 
@@ -37,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

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import type { Moment } from 'moment';
+
+export type TimePickerProps = {
+	/**
+	 * The initial current time the time picker should render.
+	 */
+	currentTime?: Date | string | number | null;
+
+	/**
+	 * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is
+	 * displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed
+	 * to the default format `DD-MM-YYYY`).
+	 */
+	is12Hour?: boolean;
+
+	/**
+	 * The function called when a new time has been selected. It is passed the
+	 * time as an argument.
+	 */
+	onChange?: ( time: string ) => void;
+};
+
+export type DatePickerEvent = {
+	/**
+	 * The date of the event.
+	 */
+	date: Date;
+};
+
+export type DatePickerDayProps = {
+	/**
+	 * The day to display.
+	 */
+	day: Moment;
+
+	/**
+	 * List of events to show on this day.
+	 *
+	 * @default []
+	 */
+	events?: DatePickerEvent[];
+};
+
+export type DatePickerProps = {
+	/**
+	 * The current date and time at initialization. Optionally pass in a `null`
+	 * value to specify no date is currently selected.
+	 */
+	currentDate?: Date | string | number | null;
+
+	/**
+	 * The function called when a new date has been selected. It is passed the
+	 * date as an argument.
+	 */
+	onChange?: ( date: string ) => void;
+
+	/**
+	 * A callback function which receives a Date object representing a day as an
+	 * argument, and should return a Boolean to signify if the day is valid or
+	 * not.
+	 */
+	isInvalidDate?: ( date: Date ) => boolean;
+
+	/**
+	 * A callback invoked when selecting the previous/next month in the date
+	 * picker. The callback receives the new month date in the ISO format as an
+	 * argument.
+	 */
+	onMonthPreviewed?: ( date: string ) => void;
+
+	/**
+	 * List of events to show in the date picker. Each event will appear as a
+	 * dot on the day of the event.
+	 */
+	events?: DatePickerEvent[];
+};
+
+export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
+	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+		/**
+		 * The function called when a new date or time has been selected. It is
+		 * 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/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/disabled/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+import { useDisabled } from '@wordpress/compose';
 import { createContext } from '@wordpress/element';
 
 /**

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