@wordpress/components 19.8.4 → 19.11.0

package/src/date-time/stories/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DateTimePicker from '..';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: ComponentMeta< typeof DateTimePicker > = {
+	title: 'Components/DateTimePicker',
+	component: DateTimePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DateTimePicker > = ( {
+	currentDate,
+	onChange,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DateTimePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
+	{}
+);
+
+export const WithEvents: ComponentStory<
+	typeof DateTimePicker
+> = Template.bind( {} );
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: ComponentStory<
+	typeof DateTimePicker
+> = Template.bind( {} );
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	isInvalidDate: isWeekend,
+};

package/src/date-time/stories/time.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TimePicker from '../time';
+
+const meta: ComponentMeta< typeof TimePicker > = {
+	title: 'Components/TimePicker',
+	component: TimePicker,
+	argTypes: {
+		currentTime: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof TimePicker > = ( {
+	currentTime,
+	onChange,
+	...args
+} ) => {
+	const [ time, setTime ] = useState( currentTime );
+	useEffect( () => {
+		setTime( currentTime );
+	}, [ currentTime ] );
+	return (
+		<TimePicker
+			{ ...args }
+			currentTime={ time }
+			onChange={ ( newTime ) => {
+				setTime( newTime );
+				onChange?.( newTime );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );

package/src/date-time/stories/utils.ts

@@ -0,0 +1,9 @@
+export function daysFromNow( days: number ) {
+	const date = new Date();
+	date.setDate( date.getDate() + days );
+	return date;
+}
+
+export function isWeekend( date: Date ) {
+	return date.getDay() === 0 || date.getDay() === 6;
+}

package/src/date-time/test/date.tsx

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'react-dates/initialize';
+
+/**
+ * Internal dependencies
+ */
+import DatePicker from '../date';
+
+describe( 'DatePicker', () => {
+	it( 'should highlight the current date', () => {
+		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Monday, May 2, 2022' } )
+		).toHaveClass( 'CalendarDay__selected' );
+
+		// Expect React deprecation warning due to 'react-dates' using outdated
+		// React lifecycle methods.
+		// https://github.com/react-dates/react-dates/issues/1748
+		expect( console ).toHaveWarned();
+	} );
+
+	it( "should highlight today's date when not provided a currentDate", () => {
+		render( <DatePicker /> );
+
+		const todayDescription = moment().format( 'dddd, MMM D, YYYY' );
+		expect(
+			screen.getByRole( 'button', { name: todayDescription } )
+		).toHaveClass( 'CalendarDay__selected' );
+	} );
+
+	it( 'should call onChange when a day is selected', async () => {
+		const user = userEvent.setup( { delay: null } );
+
+		const onChange = jest.fn();
+
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Friday, May 20, 2022' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( '2022-05-20T11:00:00' );
+	} );
+
+	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
+		const user = userEvent.setup( { delay: null } );
+
+		const onMonthPreviewed = jest.fn();
+		const onChange = jest.fn();
+
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				onMonthPreviewed={ onMonthPreviewed }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Move forward to switch to the next month.',
+			} )
+		);
+
+		expect( onMonthPreviewed ).toHaveBeenCalledWith(
+			expect.stringMatching( /^2022-06/ )
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Monday, June 20, 2022' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( '2022-06-20T11:00:00' );
+	} );
+
+	it( 'should highlight events on the calendar', () => {
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				events={ [
+					{ date: new Date( '2022-05-04T00:00:00' ) },
+					{ date: new Date( '2022-05-19T00:00:00' ) },
+				] }
+			/>
+		);
+
+		expect(
+			screen
+				.getAllByLabelText( 'There is 1 event.', { exact: false } )
+				.map( ( day ) => day.getAttribute( 'aria-label' ) )
+		).toEqual( [
+			'Wednesday, May 4, 2022. There is 1 event.',
+			'Thursday, May 19, 2022. There is 1 event.',
+		] );
+	} );
+
+	it( 'should not allow invalid date to be selected', async () => {
+		const user = userEvent.setup( { delay: null } );
+
+		const onChange = jest.fn();
+
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				onChange={ onChange }
+				isInvalidDate={ ( date ) => date.getDate() === 20 }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Friday, May 20, 2022' } )
+		);
+
+		expect( onChange ).not.toHaveBeenCalledWith( '2022-05-20T11:00:00' );
+	} );
+} );

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

@@ -237,11 +237,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 +277,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 +298,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 +319,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/test/{utils.js → utils.ts}

@@ -14,7 +14,7 @@ describe( 'getMomentDate', () => {
 		const momentDate = getMomentDate( currentDate );
 
 		expect( moment.isMoment( momentDate ) ).toBe( true );
-		expect( momentDate.isSame( moment( currentDate ) ) ).toBe( true );
+		expect( momentDate?.isSame( moment( currentDate ) ) ).toBe( true );
 	} );
 
 	it( 'should return null when given a null argument', () => {

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

@@ -4,6 +4,8 @@
 import classnames from 'classnames';
 import { isInteger } from 'lodash';
 import moment from 'moment';
+import type { FocusEvent } from 'react';
+import type { Moment } from 'moment';
 
 /**
  * WordPress dependencies
@@ -22,25 +24,18 @@ import { __ } from '@wordpress/i18n';
 import Button from '../button';
 import ButtonGroup from '../button-group';
 import TimeZone from './timezone';
+import type { WordPressComponentProps } from '../ui/context';
+import type { UpdateOnBlurAsIntegerFieldProps, TimePickerProps } from './types';
 
-/**
- * Module Constants
- */
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 
-function from12hTo24h( hours, isPm ) {
+function from12hTo24h( hours: number, isPm: boolean ) {
 	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
 }
 
 /**
- * <UpdateOnBlurAsIntegerField>
- * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
- *
- * @param {Object}        props             Component props.
- * @param {string}        props.as          Render the component as specific element tag, defaults to "input".
- * @param {number|string} props.value       The default value of the component which will be parsed to integer.
- * @param {Function}      props.onUpdate    Call back when blurred and validated.
- * @param {string}        [props.className]
+ * A shared component to parse, validate, and handle remounting of the
+ * underlying form field element like <input> and <select>.
  */
 function UpdateOnBlurAsIntegerField( {
 	as,
@@ -48,11 +43,11 @@ function UpdateOnBlurAsIntegerField( {
 	onUpdate,
 	className,
 	...props
-} ) {
-	function handleBlur( event ) {
+}: WordPressComponentProps< UpdateOnBlurAsIntegerFieldProps, 'input', true > ) {
+	function handleBlur( event: FocusEvent< HTMLInputElement > ) {
 		const { target } = event;
 
-		if ( value === target.value ) {
+		if ( String( value ) === target.value ) {
 			return;
 		}
 
@@ -65,10 +60,10 @@ function UpdateOnBlurAsIntegerField( {
 			( typeof props.min !== 'undefined' && parsedValue < props.min )
 		) {
 			// If validation failed, reset the value to the previous valid value.
-			target.value = value;
+			target.value = String( value );
 		} else {
 			// Otherwise, it's valid, call onUpdate.
-			onUpdate( target.name, parsedValue );
+			onUpdate( parsedValue );
 		}
 	}
 
@@ -86,19 +81,33 @@ function UpdateOnBlurAsIntegerField( {
 }
 
 /**
- * <TimePicker>
+ * TimePicker is a React component that renders a clock for time selection.
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
- * @typedef {Date|string|number} WPValidDateTimeFormat
+ * const MyTimePicker = () => {
+ *   const [ time, setTime ] = useState( new Date() );
  *
- * @param {Object}                props             Component props.
- * @param {boolean}               props.is12Hour    Should the time picker showed in 12 hour format or 24 hour format.
- * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.
- * @param {Function}              props.onChange    Callback function when the date changed.
+ *   return (
+ *     <TimePicker
+ *       currentTime={ date }
+ *       onChange={ ( newTime ) => setTime( newTime ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
  */
-export function TimePicker( { is12Hour, currentTime, onChange } ) {
+export function TimePicker( {
+	is12Hour,
+	currentTime,
+	onChange,
+}: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
-		moment( currentTime ).startOf( 'minutes' )
+		currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
 	);
 
 	// Reset the state when currentTime changed.
@@ -115,7 +124,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 			year: date.format( 'YYYY' ),
 			minutes: date.format( 'mm' ),
 			hours: date.format( is12Hour ? 'hh' : 'HH' ),
-			am: date.format( 'H' ) <= 11 ? 'AM' : 'PM',
+			am: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',
 		} ),
 		[ date, is12Hour ]
 	);
@@ -124,28 +133,30 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 	 * Function that sets the date state and calls the onChange with a new date.
 	 * The date is truncated at the minutes.
 	 *
-	 * @param {Object} newDate The date object.
+	 * @param {Moment} newDate The date object.
 	 */
-	function changeDate( newDate ) {
+	function changeDate( newDate: Moment ) {
 		setDate( newDate );
-		onChange( newDate.format( TIMEZONELESS_FORMAT ) );
+		onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
 	}
 
-	function update( name, value ) {
-		// If the 12-hour format is being used and the 'PM' period is selected, then
-		// the incoming value (which ranges 1-12) should be increased by 12 to match
-		// the expected 24-hour format.
-		let adjustedValue = value;
-		if ( name === 'hours' && is12Hour ) {
-			adjustedValue = from12hTo24h( value, am === 'PM' );
-		}
+	function update( name: 'date' | 'month' | 'year' | 'hours' | 'minutes' ) {
+		return ( value: number ) => {
+			// If the 12-hour format is being used and the 'PM' period is selected, then
+			// the incoming value (which ranges 1-12) should be increased by 12 to match
+			// the expected 24-hour format.
+			let adjustedValue = value;
+			if ( name === 'hours' && is12Hour ) {
+				adjustedValue = from12hTo24h( value, am === 'PM' );
+			}
 
-		// Clone the date and call the specific setter function according to `name`.
-		const newDate = date.clone()[ name ]( adjustedValue );
-		changeDate( newDate );
+			// Clone the date and call the specific setter function according to `name`.
+			const newDate = date.clone()[ name ]( adjustedValue );
+			changeDate( newDate );
+		};
 	}
 
-	function updateAmPm( value ) {
+	function updateAmPm( value: 'AM' | 'PM' ) {
 		return () => {
 			if ( am === value ) {
 				return;
@@ -173,7 +184,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 				step={ 1 }
 				min={ 1 }
 				max={ 31 }
-				onUpdate={ update }
+				onUpdate={ update( 'date' ) }
 			/>
 		</div>
 	);
@@ -187,7 +198,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 				name="month"
 				value={ month }
 				// The value starts from 0, so we have to -1 when setting month.
-				onUpdate={ ( key, value ) => update( key, value - 1 ) }
+				onUpdate={ ( value ) => update( 'month' )( value - 1 ) }
 			>
 				<option value="01">{ __( 'January' ) }</option>
 				<option value="02">{ __( 'February' ) }</option>
@@ -236,7 +247,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 							min={ 0 }
 							max={ 9999 }
 							value={ year }
-							onUpdate={ update }
+							onUpdate={ update( 'year' ) }
 						/>
 					</div>
 				</div>
@@ -257,7 +268,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 							min={ is12Hour ? 1 : 0 }
 							max={ is12Hour ? 12 : 23 }
 							value={ hours }
-							onUpdate={ update }
+							onUpdate={ update( 'hours' ) }
 						/>
 						<span
 							className="components-datetime__time-separator"
@@ -274,7 +285,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 							min={ 0 }
 							max={ 59 }
 							value={ minutes }
-							onUpdate={ update }
+							onUpdate={ update( 'minutes' ) }
 						/>
 					</div>
 					{ is12Hour && (

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

@@ -10,7 +10,8 @@ import { __experimentalGetSettings as getDateSettings } from '@wordpress/date';
 import Tooltip from '../tooltip';
 
 /**
- * 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 +25,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 }`;