@wordpress/components 28.2.0 → 28.4.0

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+/**
+ * Internal dependencies
+ */
+import { TimeInput } from '../time-input';
+
+const meta: Meta< typeof TimeInput > = {
+	title: 'Components/TimeInput',
+	component: TimeInput,
+	argTypes: {
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	tags: [ 'status-wip' ],
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	args: {
+		onChange: action( 'onChange' ),
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof TimeInput > = ( args ) => {
+	return <TimeInput { ...args } />;
+};
+
+export const Default: StoryFn< typeof TimeInput > = Template.bind( {} );
+Default.args = {
+	label: 'Time',
+};

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startOfMinute, format, set, setHours, setMonth } from 'date-fns';
+import { startOfMinute, format, set, setMonth } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -13,63 +13,28 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
 import SelectControl from '../../select-control';
 import TimeZone from './timezone';
-import type { TimePickerProps } from '../types';
+import type { TimeInputValue, TimePickerProps } from '../types';
 import {
 	Wrapper,
 	Fieldset,
-	HoursInput,
-	TimeSeparator,
-	MinutesInput,
 	MonthSelectWrapper,
 	DayInput,
 	YearInput,
-	TimeWrapper,
 } from './styles';
 import { HStack } from '../../h-stack';
 import { Spacer } from '../../spacer';
 import type { InputChangeCallback } from '../../input-control/types';
-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';
-import { inputToDate } from '../utils';
+	inputToDate,
+	buildPadInputStateReducer,
+	validateInputElementTarget,
+} from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
+import { TimeInput } from '../time-input';
 
-function from12hTo24h( hours: number, isPm: boolean ) {
-	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 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.
- */
-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;
-	};
-}
+const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
 /**
  * TimePicker is a React component that renders a clock for time selection.
@@ -95,6 +60,7 @@ export function TimePicker( {
 	is12Hour,
 	currentTime,
 	onChange,
+	dateOrder: dateOrderProp,
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
@@ -111,46 +77,26 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
-	const { day, month, year, minutes, hours, am } = useMemo(
+	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
 			month: format( date, 'MM' ),
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
-			hours: format( date, is12Hour ? 'hh' : 'HH' ),
+			hours: format( date, 'HH' ),
 			am: format( date, 'a' ),
 		} ),
-		[ date, is12Hour ]
+		[ date ]
 	);
 
-	const buildNumberControlChangeCallback = (
-		method: 'hours' | 'minutes' | 'date' | 'year'
-	) => {
+	const buildNumberControlChangeCallback = ( method: 'date' | 'year' ) => {
 		const callback: InputChangeCallback = ( value, { event } ) => {
-			// `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;
-			}
-
-			if ( ! event.target.validity.valid ) {
+			if ( ! validateInputElementTarget( event ) ) {
 				return;
 			}
 
 			// We can safely assume value is a number if target is valid.
-			let numberValue = Number( 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.
-			if ( method === 'hours' && is12Hour ) {
-				numberValue = from12hTo24h( numberValue, am === 'PM' );
-			}
+			const numberValue = Number( value );
 
 			const newDate = set( date, { [ method ]: numberValue } );
 			setDate( newDate );
@@ -159,25 +105,21 @@ export function TimePicker( {
 		return callback;
 	};
 
-	function buildAmPmChangeCallback( value: 'AM' | 'PM' ) {
-		return () => {
-			if ( am === value ) {
-				return;
-			}
-
-			const parsedHours = parseInt( hours, 10 );
-
-			const newDate = setHours(
-				date,
-				from12hTo24h( parsedHours, value === 'PM' )
-			);
-			setDate( newDate );
-			onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
-		};
-	}
+	const onTimeInputChangeCallback = ( {
+		hours: newHours,
+		minutes: newMinutes,
+	}: TimeInputValue ) => {
+		const newDate = set( date, {
+			hours: newHours,
+			minutes: newMinutes,
+		} );
+		setDate( newDate );
+		onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
+	};
 
 	const dayField = (
 		<DayInput
+			key="day"
 			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
 			label={ __( 'Day' ) }
 			hideLabelFromVision
@@ -196,7 +138,7 @@ export function TimePicker( {
 	);
 
 	const monthField = (
-		<MonthSelectWrapper>
+		<MonthSelectWrapper key="month">
 			<SelectControl
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
@@ -227,6 +169,46 @@ export function TimePicker( {
 		</MonthSelectWrapper>
 	);
 
+	const yearField = (
+		<YearInput
+			key="year"
+			className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+			label={ __( 'Year' ) }
+			hideLabelFromVision
+			__next40pxDefaultSize
+			value={ year }
+			step={ 1 }
+			min={ 1 }
+			max={ 9999 }
+			required
+			spinControls="none"
+			isPressEnterToChange
+			isDragEnabled={ false }
+			isShiftStepEnabled={ false }
+			onChange={ buildNumberControlChangeCallback( 'year' ) }
+			__unstableStateReducer={ buildPadInputStateReducer( 4 ) }
+		/>
+	);
+
+	const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';
+	const dateOrder =
+		dateOrderProp && VALID_DATE_ORDERS.includes( dateOrderProp )
+			? dateOrderProp
+			: defaultDateOrder;
+
+	const fields = dateOrder.split( '' ).map( ( field ) => {
+		switch ( field ) {
+			case 'd':
+				return dayField;
+			case 'm':
+				return monthField;
+			case 'y':
+				return yearField;
+			default:
+				return null;
+		}
+	} );
+
 	return (
 		<Wrapper
 			className="components-datetime__time" // Unused, for backwards compatibility.
@@ -241,84 +223,14 @@ export function TimePicker( {
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
-					<TimeWrapper
-						className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
-					>
-						<HoursInput
-							className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
-							label={ __( 'Hours' ) }
-							hideLabelFromVision
-							__next40pxDefaultSize
-							value={ hours }
-							step={ 1 }
-							min={ is12Hour ? 1 : 0 }
-							max={ is12Hour ? 12 : 23 }
-							required
-							spinControls="none"
-							isPressEnterToChange
-							isDragEnabled={ false }
-							isShiftStepEnabled={ false }
-							onChange={ buildNumberControlChangeCallback(
-								'hours'
-							) }
-							__unstableStateReducer={ buildPadInputStateReducer(
-								2
-							) }
-						/>
-						<TimeSeparator
-							className="components-datetime__time-separator" // Unused, for backwards compatibility.
-							aria-hidden="true"
-						>
-							:
-						</TimeSeparator>
-						<MinutesInput
-							className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
-							label={ __( 'Minutes' ) }
-							hideLabelFromVision
-							__next40pxDefaultSize
-							value={ minutes }
-							step={ 1 }
-							min={ 0 }
-							max={ 59 }
-							required
-							spinControls="none"
-							isPressEnterToChange
-							isDragEnabled={ false }
-							isShiftStepEnabled={ false }
-							onChange={ buildNumberControlChangeCallback(
-								'minutes'
-							) }
-							__unstableStateReducer={ buildPadInputStateReducer(
-								2
-							) }
-						/>
-					</TimeWrapper>
-					{ is12Hour && (
-						<ButtonGroup
-							className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
-						>
-							<Button
-								className="components-datetime__time-am-button" // Unused, for backwards compatibility.
-								variant={
-									am === 'AM' ? 'primary' : 'secondary'
-								}
-								__next40pxDefaultSize
-								onClick={ buildAmPmChangeCallback( 'AM' ) }
-							>
-								{ __( 'AM' ) }
-							</Button>
-							<Button
-								className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
-								variant={
-									am === 'PM' ? 'primary' : 'secondary'
-								}
-								__next40pxDefaultSize
-								onClick={ buildAmPmChangeCallback( 'PM' ) }
-							>
-								{ __( 'PM' ) }
-							</Button>
-						</ButtonGroup>
-					) }
+					<TimeInput
+						value={ {
+							hours: Number( hours ),
+							minutes: Number( minutes ),
+						} }
+						is12Hour={ is12Hour }
+						onChange={ onTimeInputChangeCallback }
+					/>
 					<Spacer />
 					<TimeZone />
 				</HStack>
@@ -333,36 +245,7 @@ export function TimePicker( {
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
-					{ is12Hour ? (
-						<>
-							{ monthField }
-							{ dayField }
-						</>
-					) : (
-						<>
-							{ dayField }
-							{ monthField }
-						</>
-					) }
-					<YearInput
-						className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
-						label={ __( 'Year' ) }
-						hideLabelFromVision
-						__next40pxDefaultSize
-						value={ year }
-						step={ 1 }
-						min={ 1 }
-						max={ 9999 }
-						required
-						spinControls="none"
-						isPressEnterToChange
-						isDragEnabled={ false }
-						isShiftStepEnabled={ false }
-						onChange={ buildNumberControlChangeCallback( 'year' ) }
-						__unstableStateReducer={ buildPadInputStateReducer(
-							4
-						) }
-					/>
+					{ fields }
 				</HStack>
 			</Fieldset>
 		</Wrapper>

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

@@ -333,6 +333,67 @@ describe( 'TimePicker', () => {
 		expect( monthInputIndex < dayInputIndex ).toBe( true );
 	} );
 
+	it( 'Should change layouts/orders when `dateOrder` prop is passed', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<form aria-label="form">
+				<TimePicker
+					currentTime="1986-10-18T11:00:00"
+					onChange={ onChangeSpy }
+					dateOrder="ymd"
+				/>
+			</form>
+		);
+
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
+
+		const yearInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Year' )
+		);
+
+		const monthInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Month' )
+		);
+		const dayInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Day' )
+		);
+
+		expect( monthInputIndex > yearInputIndex ).toBe( true );
+		expect( dayInputIndex > monthInputIndex ).toBe( true );
+	} );
+
+	it( 'Should ignore `is12Hour` prop setting when `dateOrder` prop is explicitly passed', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<form aria-label="form">
+				<TimePicker
+					currentTime="1986-10-18T11:00:00"
+					onChange={ onChangeSpy }
+					dateOrder="ymd"
+					is12Hour
+				/>
+			</form>
+		);
+
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
+
+		const yearInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Year' )
+		);
+
+		const monthInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Month' )
+		);
+		const dayInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Day' )
+		);
+
+		expect( monthInputIndex > yearInputIndex ).toBe( true );
+		expect( dayInputIndex > monthInputIndex ).toBe( true );
+	} );
+
 	it( 'Should set a time when passed a null currentTime', () => {
 		const onChangeSpy = jest.fn();
 

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

@@ -0,0 +1,196 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TimeWrapper,
+	TimeSeparator,
+	HoursInput,
+	MinutesInput,
+	Fieldset,
+} from '../time/styles';
+import { HStack } from '../../h-stack';
+import Button from '../../button';
+import ButtonGroup from '../../button-group';
+import {
+	from12hTo24h,
+	from24hTo12h,
+	buildPadInputStateReducer,
+	validateInputElementTarget,
+} from '../utils';
+import type { TimeInputProps } from '../types';
+import type { InputChangeCallback } from '../../input-control/types';
+import { useControlledValue } from '../../utils';
+import BaseControl from '../../base-control';
+
+export function TimeInput( {
+	value: valueProp,
+	defaultValue,
+	is12Hour,
+	label,
+	minutesProps,
+	onChange,
+}: TimeInputProps ) {
+	const [
+		value = {
+			hours: new Date().getHours(),
+			minutes: new Date().getMinutes(),
+		},
+		setValue,
+	] = useControlledValue( {
+		value: valueProp,
+		onChange,
+		defaultValue,
+	} );
+	const dayPeriod = parseDayPeriod( value.hours );
+	const hours12Format = from24hTo12h( value.hours );
+
+	const buildNumberControlChangeCallback = (
+		method: 'hours' | 'minutes'
+	): InputChangeCallback => {
+		return ( _value, { event } ) => {
+			if ( ! validateInputElementTarget( event ) ) {
+				return;
+			}
+
+			// We can safely assume value is a number if target is valid.
+			const numberValue = Number( _value );
+
+			setValue( {
+				...value,
+				[ method ]:
+					method === 'hours' && is12Hour
+						? from12hTo24h( numberValue, dayPeriod === 'PM' )
+						: numberValue,
+			} );
+		};
+	};
+
+	const buildAmPmChangeCallback = ( _value: 'AM' | 'PM' ) => {
+		return () => {
+			if ( dayPeriod === _value ) {
+				return;
+			}
+
+			setValue( {
+				...value,
+				hours: from12hTo24h( hours12Format, _value === 'PM' ),
+			} );
+		};
+	};
+
+	function parseDayPeriod( _hours: number ) {
+		return _hours < 12 ? 'AM' : 'PM';
+	}
+
+	const Wrapper = label ? Fieldset : Fragment;
+
+	return (
+		<Wrapper>
+			{ label && (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+
+			<HStack alignment="left" expanded={ false }>
+				<TimeWrapper
+					className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+				>
+					<HoursInput
+						className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+						label={ __( 'Hours' ) }
+						hideLabelFromVision
+						__next40pxDefaultSize
+						value={ String(
+							is12Hour ? hours12Format : value.hours
+						).padStart( 2, '0' ) }
+						step={ 1 }
+						min={ is12Hour ? 1 : 0 }
+						max={ is12Hour ? 12 : 23 }
+						required
+						spinControls="none"
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ buildNumberControlChangeCallback( 'hours' ) }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							2
+						) }
+					/>
+					<TimeSeparator
+						className="components-datetime__time-separator" // Unused, for backwards compatibility.
+						aria-hidden="true"
+					>
+						:
+					</TimeSeparator>
+					<MinutesInput
+						className={ clsx(
+							'components-datetime__time-field-minutes-input', // Unused, for backwards compatibility.
+							minutesProps?.className
+						) }
+						label={ __( 'Minutes' ) }
+						hideLabelFromVision
+						__next40pxDefaultSize
+						value={ String( value.minutes ).padStart( 2, '0' ) }
+						step={ 1 }
+						min={ 0 }
+						max={ 59 }
+						required
+						spinControls="none"
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ ( ...args ) => {
+							buildNumberControlChangeCallback( 'minutes' )(
+								...args
+							);
+							minutesProps?.onChange?.( ...args );
+						} }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							2
+						) }
+						{ ...minutesProps }
+					/>
+				</TimeWrapper>
+				{ is12Hour && (
+					<ButtonGroup
+						className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+					>
+						<Button
+							className="components-datetime__time-am-button" // Unused, for backwards compatibility.
+							variant={
+								dayPeriod === 'AM' ? 'primary' : 'secondary'
+							}
+							__next40pxDefaultSize
+							onClick={ buildAmPmChangeCallback( 'AM' ) }
+						>
+							{ __( 'AM' ) }
+						</Button>
+						<Button
+							className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
+							variant={
+								dayPeriod === 'PM' ? 'primary' : 'secondary'
+							}
+							__next40pxDefaultSize
+							onClick={ buildAmPmChangeCallback( 'PM' ) }
+						>
+							{ __( 'PM' ) }
+						</Button>
+					</ButtonGroup>
+				) }
+			</HStack>
+		</Wrapper>
+	);
+}
+export default TimeInput;