@wordpress/components 28.2.0 → 28.3.0

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

@@ -0,0 +1,171 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import TimeInput from '..';
+
+describe( 'TimeInput', () => {
+	it( 'should call onChange with updated values | 24-hours format', async () => {
+		const user = userEvent.setup();
+
+		const timeInputValue = { hours: 0, minutes: 0 };
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimeInput
+				defaultValue={ timeInputValue }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		const hoursInput = screen.getByRole( 'spinbutton', { name: 'Hours' } );
+		const minutesInput = screen.getByRole( 'spinbutton', {
+			name: 'Minutes',
+		} );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '35' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
+		onChangeSpy.mockClear();
+
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '12' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( {
+			hours: 12,
+			minutes: 35,
+		} );
+		onChangeSpy.mockClear();
+
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '23' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( {
+			hours: 23,
+			minutes: 35,
+		} );
+		onChangeSpy.mockClear();
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '0' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 23, minutes: 0 } );
+	} );
+
+	it( 'should call onChange with updated values | 12-hours format', async () => {
+		const user = userEvent.setup();
+
+		const timeInputValue = { hours: 0, minutes: 0 };
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimeInput
+				is12Hour
+				defaultValue={ timeInputValue }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		const hoursInput = screen.getByRole( 'spinbutton', { name: 'Hours' } );
+		const minutesInput = screen.getByRole( 'spinbutton', {
+			name: 'Minutes',
+		} );
+		const amButton = screen.getByRole( 'button', { name: 'AM' } );
+		const pmButton = screen.getByRole( 'button', { name: 'PM' } );
+
+		// TODO: Update assert these states through the accessibility tree rather than through styles, see: https://github.com/WordPress/gutenberg/issues/61163
+		expect( amButton ).toHaveClass( 'is-primary' );
+		expect( pmButton ).not.toHaveClass( 'is-primary' );
+		expect( hoursInput ).not.toHaveValue( 0 );
+		expect( hoursInput ).toHaveValue( 12 );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '35' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
+		expect( amButton ).toHaveClass( 'is-primary' );
+
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '12' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
+
+		await user.click( pmButton );
+		expect( onChangeSpy ).toHaveBeenCalledWith( {
+			hours: 12,
+			minutes: 35,
+		} );
+		expect( pmButton ).toHaveClass( 'is-primary' );
+	} );
+
+	it( 'should call onChange with defined minutes steps', async () => {
+		const user = userEvent.setup();
+
+		const timeInputValue = { hours: 0, minutes: 0 };
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimeInput
+				defaultValue={ timeInputValue }
+				minutesProps={ { step: 5 } }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		const minutesInput = screen.getByRole( 'spinbutton', {
+			name: 'Minutes',
+		} );
+
+		await user.clear( minutesInput );
+		await user.keyboard( '{ArrowUp}' );
+
+		expect( minutesInput ).toHaveValue( 5 );
+
+		await user.keyboard( '{ArrowUp}' );
+		await user.keyboard( '{ArrowUp}' );
+
+		expect( minutesInput ).toHaveValue( 15 );
+
+		await user.keyboard( '{ArrowDown}' );
+
+		expect( minutesInput ).toHaveValue( 10 );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '44' );
+		await user.keyboard( '{Tab}' );
+
+		expect( minutesInput ).toHaveValue( 45 );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '51' );
+		await user.keyboard( '{Tab}' );
+
+		expect( minutesInput ).toHaveValue( 50 );
+	} );
+
+	it( 'should reflect changes to the value prop', () => {
+		const { rerender } = render(
+			<TimeInput value={ { hours: 0, minutes: 0 } } />
+		);
+		rerender( <TimeInput value={ { hours: 1, minutes: 2 } } /> );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Hours' } )
+		).toHaveValue( 1 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Minutes' } )
+		).toHaveValue( 2 );
+	} );
+} );

package/src/date-time/types.ts

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import type { MinutesInput } from './time/styles';
+
 export type TimePickerProps = {
 	/**
 	 * The initial current time the time picker should render.
@@ -11,6 +16,14 @@ export type TimePickerProps = {
 	 */
 	is12Hour?: boolean;
 
+	/**
+	 * The order of day, month, and year. This prop overrides the time format
+	 * determined by `is12Hour` prop.
+	 *
+	 * @default 'dmy'
+	 */
+	dateOrder?: 'dmy' | 'mdy' | 'ymd';
+
 	/**
 	 * The function called when a new time has been selected. It is passed the
 	 * time as an argument.
@@ -18,6 +31,56 @@ export type TimePickerProps = {
 	onChange?: ( time: string ) => void;
 };
 
+export type TimeInputValue = {
+	/**
+	 * The hours value in 24-hour format.
+	 */
+	hours: number;
+
+	/**
+	 * The minutes value.
+	 */
+	minutes: number;
+};
+
+export type TimeInputProps = {
+	/**
+	 * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is
+	 * displayed
+	 */
+	is12Hour?: boolean;
+
+	/**
+	 * The time input object with hours and minutes values.
+	 *
+	 * - hours: number (24-hour format)
+	 * - minutes: number
+	 */
+	value?: TimeInputValue;
+
+	/**
+	 * An optional default value for the control when used in uncontrolled mode.
+	 * If left `undefined`, the current time will be used.
+	 */
+	defaultValue?: TimeInputValue;
+
+	/**
+	 * The props to pass down to the minutes input.
+	 */
+	minutesProps?: React.ComponentProps< typeof MinutesInput >;
+
+	/**
+	 * The label for the time input.
+	 */
+	label?: string;
+
+	/**
+	 * The function is called when a new time has been selected.
+	 * Passing hours and minutes as an object properties.
+	 */
+	onChange?: ( time: TimeInputValue ) => void;
+};
+
 export type DatePickerEvent = {
 	/**
 	 * The date of the event.

package/src/date-time/utils.ts

@@ -3,6 +3,13 @@
  */
 import { toDate } from 'date-fns';
 
+/**
+ * Internal dependencies
+ */
+import type { InputState } from '../input-control/reducer/state';
+import type { InputAction } from '../input-control/reducer/actions';
+import { COMMIT, PRESS_DOWN, PRESS_UP } from '../input-control/reducer/actions';
+
 /**
  * Like date-fn's toDate, but tries to guess the format when a string is
  * given.
@@ -15,3 +22,65 @@ export function inputToDate( input: Date | string | number ): Date {
 	}
 	return toDate( input );
 }
+
+/**
+ * Converts a 12-hour time to a 24-hour time.
+ * @param hours
+ * @param isPm
+ */
+export function from12hTo24h( hours: number, isPm: boolean ) {
+	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
+}
+
+/**
+ * Converts a 24-hour time to a 12-hour time.
+ * @param hours
+ */
+export function from24hTo12h( hours: number ) {
+	return hours % 12 || 12;
+}
+
+/**
+ * Creates an InputControl reducer used to pad an input so that it is always a
+ * given width. For example, the hours and minutes inputs are padded to 2 so
+ * that '4' appears as '04'.
+ *
+ * @param pad How many digits the value should be.
+ */
+export function buildPadInputStateReducer( pad: number ) {
+	return ( state: InputState, action: InputAction ) => {
+		const nextState = { ...state };
+		if (
+			action.type === COMMIT ||
+			action.type === PRESS_UP ||
+			action.type === PRESS_DOWN
+		) {
+			if ( nextState.value !== undefined ) {
+				nextState.value = nextState.value
+					.toString()
+					.padStart( pad, '0' );
+			}
+		}
+		return nextState;
+	};
+}
+
+/**
+ * Validates the target of a React event to ensure it is an input element and
+ * that the input is valid.
+ * @param event
+ */
+export function validateInputElementTarget( event: React.SyntheticEvent ) {
+	// `instanceof` checks need to get the instance definition from the
+	// corresponding window object — therefore, the following logic makes
+	// the component work correctly even when rendered inside an iframe.
+	const HTMLInputElementInstance =
+		( event.target as HTMLInputElement )?.ownerDocument.defaultView
+			?.HTMLInputElement ?? HTMLInputElement;
+
+	if ( ! ( event.target instanceof HTMLInputElementInstance ) ) {
+		return false;
+	}
+
+	return event.target.validity.valid;
+}