@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.738bb1424.0

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

@@ -2,18 +2,15 @@
  * External dependencies
  */
 import {
-	format,
 	isSameDay,
 	subMonths,
 	addMonths,
-	startOfDay,
 	isEqual,
 	addDays,
+	subDays,
 	subWeeks,
 	addWeeks,
 	isSameMonth,
-	startOfWeek,
-	endOfWeek,
 } from 'date-fns';
 import type { KeyboardEventHandler } from 'react';
 
@@ -22,7 +19,7 @@ import type { KeyboardEventHandler } from 'react';
  */
 import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
-import { getSettings, gmdateI18n } from '@wordpress/date';
+import { dateI18n, date as formatDate, getSettings } from '@wordpress/date';
 import { useState, useRef, useEffect } from '@wordpress/element';
 
 /**
@@ -40,7 +37,11 @@ import {
 	DayOfWeek,
 	DayButton,
 } from './styles';
-import { inputToDate } from '../utils';
+import {
+	inputToDate,
+	setInConfiguredTimezone,
+	startOfDayInConfiguredTimezone,
+} from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
 
 /**
@@ -70,7 +71,7 @@ export function DatePicker( {
 	onMonthPreviewed,
 	startOfWeek: weekStartsOn = 0,
 }: DatePickerProps ) {
-	const date = currentDate ? inputToDate( currentDate ) : new Date();
+	const date = inputToDate( currentDate ?? new Date() );
 
 	const {
 		calendar,
@@ -81,14 +82,16 @@ export function DatePicker( {
 		viewPreviousMonth,
 		viewNextMonth,
 	} = useLilius( {
-		selected: [ startOfDay( date ) ],
-		viewing: startOfDay( date ),
+		selected: [ startOfDayInConfiguredTimezone( date ) ],
+		viewing: startOfDayInConfiguredTimezone( date ),
 		weekStartsOn,
 	} );
 
 	// Used to implement a roving tab index. Tracks the day that receives focus
 	// when the user tabs into the calendar.
-	const [ focusable, setFocusable ] = useState( startOfDay( date ) );
+	const [ focusable, setFocusable ] = useState(
+		startOfDayInConfiguredTimezone( date )
+	);
 
 	// Allows us to only programmatically focus() a day when focus was already
 	// within the calendar. This stops us stealing focus from e.g. a TimePicker
@@ -100,9 +103,9 @@ export function DatePicker( {
 	const [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );
 	if ( currentDate !== prevCurrentDate ) {
 		setPrevCurrentDate( currentDate );
-		setSelected( [ startOfDay( date ) ] );
-		setViewing( startOfDay( date ) );
-		setFocusable( startOfDay( date ) );
+		setSelected( [ startOfDayInConfiguredTimezone( date ) ] );
+		setViewing( startOfDayInConfiguredTimezone( date ) );
+		setFocusable( startOfDayInConfiguredTimezone( date ) );
 	}
 
 	return (
@@ -119,18 +122,26 @@ export function DatePicker( {
 					onClick={ () => {
 						viewPreviousMonth();
 						setFocusable( subMonths( focusable, 1 ) );
+						const prevMonth = subMonths( viewing, 1 );
 						onMonthPreviewed?.(
-							format(
-								subMonths( viewing, 1 ),
-								TIMEZONELESS_FORMAT
+							dateI18n(
+								TIMEZONELESS_FORMAT,
+								prevMonth,
+								-prevMonth.getTimezoneOffset()
 							)
 						);
 					} }
 					size="compact"
 				/>
 				<NavigatorHeading level={ 3 }>
-					<strong>{ gmdateI18n( 'F', viewing ) }</strong>{ ' ' }
-					{ gmdateI18n( 'Y', viewing ) }
+					<strong>
+						{ dateI18n(
+							'F',
+							viewing,
+							-viewing.getTimezoneOffset()
+						) }
+					</strong>{ ' ' }
+					{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }
 				</NavigatorHeading>
 				<ViewNextMonthButton
 					icon={ isRTL() ? arrowLeft : arrowRight }
@@ -139,10 +150,12 @@ export function DatePicker( {
 					onClick={ () => {
 						viewNextMonth();
 						setFocusable( addMonths( focusable, 1 ) );
+						const nextMonth = addMonths( viewing, 1 );
 						onMonthPreviewed?.(
-							format(
-								addMonths( viewing, 1 ),
-								TIMEZONELESS_FORMAT
+							dateI18n(
+								TIMEZONELESS_FORMAT,
+								nextMonth,
+								-nextMonth.getTimezoneOffset()
 							)
 						);
 					} }
@@ -155,7 +168,7 @@ export function DatePicker( {
 			>
 				{ calendar[ 0 ][ 0 ].map( ( day ) => (
 					<DayOfWeek key={ day.toString() }>
-						{ gmdateI18n( 'D', day ) }
+						{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }
 					</DayOfWeek>
 				) ) }
 				{ calendar[ 0 ].map( ( week ) =>
@@ -171,7 +184,10 @@ export function DatePicker( {
 								isSelected={ isSelected( day ) }
 								isFocusable={ isEqual( day, focusable ) }
 								isFocusAllowed={ isFocusWithinCalendar }
-								isToday={ isSameDay( day, new Date() ) }
+								isToday={ isSameDay(
+									day,
+									startOfDayInConfiguredTimezone( new Date() )
+								) }
 								isInvalid={
 									isInvalidDate ? isInvalidDate( day ) : false
 								}
@@ -183,19 +199,18 @@ export function DatePicker( {
 								onClick={ () => {
 									setSelected( [ day ] );
 									setFocusable( day );
+									const newDate = setInConfiguredTimezone(
+										date,
+										{
+											year: day.getFullYear(),
+											month: day.getMonth(),
+											date: day.getDate(),
+										}
+									);
 									onChange?.(
-										format(
-											// Don't change the selected date's time fields.
-											new Date(
-												day.getFullYear(),
-												day.getMonth(),
-												day.getDate(),
-												date.getHours(),
-												date.getMinutes(),
-												date.getSeconds(),
-												date.getMilliseconds()
-											),
-											TIMEZONELESS_FORMAT
+										formatDate(
+											TIMEZONELESS_FORMAT,
+											newDate
 										)
 									);
 								} }
@@ -226,11 +241,23 @@ export function DatePicker( {
 										nextFocusable = addMonths( day, 1 );
 									}
 									if ( event.key === 'Home' ) {
-										nextFocusable = startOfWeek( day );
+										const dayOfWeek = day.getDay();
+										const daysToSubtract =
+											( dayOfWeek - weekStartsOn + 7 ) %
+											7;
+										nextFocusable = subDays(
+											day,
+											daysToSubtract
+										);
 									}
 									if ( event.key === 'End' ) {
-										nextFocusable = startOfDay(
-											endOfWeek( day )
+										const dayOfWeek = day.getDay();
+										const daysToAdd =
+											( weekStartsOn + 6 - dayOfWeek ) %
+											7;
+										nextFocusable = addDays(
+											day,
+											daysToAdd
 										);
 									}
 									if ( nextFocusable ) {
@@ -244,9 +271,10 @@ export function DatePicker( {
 										) {
 											setViewing( nextFocusable );
 											onMonthPreviewed?.(
-												format(
+												dateI18n(
+													TIMEZONELESS_FORMAT,
 													nextFocusable,
-													TIMEZONELESS_FORMAT
+													-nextFocusable.getTimezoneOffset()
 												)
 											);
 										}
@@ -306,7 +334,7 @@ function Day( {
 			className="components-datetime__date__day" // Unused, for backwards compatibility.
 			disabled={ isInvalid }
 			tabIndex={ isFocusable ? 0 : -1 }
-			aria-label={ getDayLabel( day, isSelected, numEvents ) }
+			aria-label={ getDayLabel( day, isSelected, isToday, numEvents ) }
 			column={ column }
 			isSelected={ isSelected }
 			isToday={ isToday }
@@ -314,44 +342,45 @@ function Day( {
 			onClick={ onClick }
 			onKeyDown={ onKeyDown }
 		>
-			{ gmdateI18n( 'j', day ) }
+			{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }
 		</DayButton>
 	);
 }
 
-function getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {
+function getDayLabel(
+	date: Date,
+	isSelected: boolean,
+	isToday: boolean,
+	numEvents: number
+) {
 	const { formats } = getSettings();
-	const localizedDate = gmdateI18n( formats.date, date );
-	if ( isSelected && numEvents > 0 ) {
-		return sprintf(
-			// translators: 1: The calendar date. 2: Number of events on the calendar date.
-			_n(
-				'%1$s. Selected. There is %2$d event',
-				'%1$s. Selected. There are %2$d events',
-				numEvents
-			),
-			localizedDate,
-			numEvents
-		);
-	} else if ( isSelected ) {
-		return sprintf(
-			// translators: 1: The calendar date.
-			__( '%1$s. Selected' ),
-			localizedDate
-		);
-	} else if ( numEvents > 0 ) {
-		return sprintf(
-			// translators: 1: The calendar date. 2: Number of events on the calendar date.
-			_n(
-				'%1$s. There is %2$d event',
-				'%1$s. There are %2$d events',
+	const localizedDate = dateI18n(
+		formats.date,
+		date,
+		-date.getTimezoneOffset()
+	);
+
+	const parts = [ localizedDate ];
+
+	if ( isSelected ) {
+		parts.push( __( 'Selected' ) );
+	}
+
+	if ( isToday ) {
+		parts.push( __( 'Today' ) );
+	}
+
+	if ( numEvents > 0 ) {
+		parts.push(
+			sprintf(
+				// translators: %d: Number of events on the calendar date.
+				_n( 'There is %d event', 'There are %d events', numEvents ),
 				numEvents
-			),
-			localizedDate,
-			numEvents
+			)
 		);
 	}
-	return localizedDate;
+
+	return parts.join( '. ' );
 }
 
 export default DatePicker;

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

@@ -25,7 +25,7 @@ describe( 'DatePicker', () => {
 		const todayDescription = format( new Date(), 'MMMM d, yyyy' );
 		expect(
 			screen.getByRole( 'button', {
-				name: `${ todayDescription }. Selected`,
+				name: `${ todayDescription }. Selected. Today`,
 			} )
 		).toBeInTheDocument();
 	} );

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

@@ -58,17 +58,17 @@ describe( 'DateTimePicker', () => {
 			} )
 		).toBeVisible();
 
-		onChange.mockImplementation( ( newDate ) => {
-			rerender(
-				<DateTimePicker currentDate={ newDate } onChange={ onChange } />
-			);
-		} );
-
 		await user.click(
 			screen.getByRole( 'button', { name: 'November 20, 2025' } )
 		);
 
 		expect( onChange ).toHaveBeenCalledWith( '2025-11-20T00:00:00' );
+
+		const nextDate = onChange.mock.calls[ 0 ][ 0 ];
+		rerender(
+			<DateTimePicker currentDate={ nextDate } onChange={ onChange } />
+		);
+
 		expect(
 			screen.getByRole( 'button', {
 				name: 'November 20, 2025. Selected',
@@ -156,34 +156,251 @@ describe( 'DateTimePicker', () => {
 							} )
 						).toBeVisible();
 
-						onChange.mockImplementation( ( newDate ) => {
-							rerender(
-								<DateTimePicker
-									currentDate={ newDate }
-									onChange={ onChange }
-								/>
-							);
-						} );
-
 						await user.click(
 							screen.getByRole( 'button', { name: clickButton } )
 						);
 
+						expect( onChange ).toHaveBeenCalledWith( expectedDate );
+
+						const nextDate = onChange.mock.calls[ 0 ][ 0 ];
+						rerender(
+							<DateTimePicker
+								currentDate={ nextDate }
+								onChange={ onChange }
+							/>
+						);
+
 						expect( screen.getByLabelText( 'Day' ) ).toHaveValue(
 							expectedDay
 						);
-						expect( onChange ).toHaveBeenCalledWith( expectedDate );
 						expect(
 							screen.getByRole( 'button', {
 								name: selectedButton,
 							} )
 						).toBeVisible();
 					} );
+
+					it( 'should display event indicators correctly', () => {
+						// Test event indicators, where Date objects constructed
+						// from timezoneless strings are passed to the component
+						// and thus are interpreted in browser timezone.
+
+						timezoneMock.register( timezone );
+
+						render(
+							<DateTimePicker
+								currentDate={ initialDate }
+								events={ [ { date: new Date( initialDate ) } ] }
+							/>
+						);
+
+						expect(
+							screen.getByRole( 'button', {
+								name: `${ initialButton }. There is 1 event`,
+							} )
+						).toBeVisible();
+					} );
 				}
 			);
 		} );
 	} );
 
+	describe( 'input types with timezone variations', () => {
+		afterEach( () => {
+			jest.useRealTimers();
+			timezoneMock.unregister();
+		} );
+
+		function transformOnChangeToDate( nextValue: string ): Date {
+			// Timezoneless string represents site timezone. Convert to UTC
+			// instant in site timezone. In typical usage, consumers should
+			// align `@wordpress/date` settings to match their browser timezone
+			// when working with dates, to avoid having to manage this
+			// conversion themselves.
+			const settings = getSettings();
+			const offsetMs = settings.timezone.offset * 60 * 60 * 1000;
+			const asUTC = new Date( nextValue + 'Z' );
+			return new Date( asUTC.getTime() - offsetMs );
+		}
+
+		describe.each( [
+			{
+				direction: 'browser behind site',
+				timezone: 'US/Pacific' as const,
+			},
+			{
+				direction: 'browser matches site',
+				timezone: 'US/Eastern' as const,
+			},
+			{
+				direction: 'browser ahead of site',
+				timezone: 'Australia/Adelaide' as const,
+			},
+		] )( '$direction', ( { timezone } ) => {
+			// Input types should be treated assuming the timezone offset configured
+			// through `@wordpress/date` settings, i.e. the site's timezone. Inputs
+			// representing the same site timezone time should display and output
+			// identically. The site timezone in these tests is UTC-5 (set in
+			// beforeAll), where 20:00 site time = 01:00 UTC the next day.
+			describe.each( [
+				{
+					type: 'timezoneless string',
+					initialDate: '2025-11-15T20:00:00',
+					transformOnChange: ( nextValue: string ) => nextValue,
+				},
+				{
+					type: 'string with timezone',
+					initialDate: '2025-11-16T01:00:00Z',
+					transformOnChange: ( nextValue: string ) =>
+						transformOnChangeToDate( nextValue ).toISOString(),
+				},
+				{
+					type: 'Date object',
+					initialDate: new Date( Date.UTC( 2025, 10, 16, 1, 0, 0 ) ),
+					transformOnChange: transformOnChangeToDate,
+				},
+				{
+					type: 'timestamp',
+					initialDate: Date.UTC( 2025, 10, 16, 1, 0, 0 ),
+					transformOnChange: ( nextValue: string ) =>
+						transformOnChangeToDate( nextValue ).getTime(),
+				},
+				{
+					type: 'undefined',
+					initialDate: undefined,
+					transformOnChange: ( nextValue: string ) => nextValue,
+				},
+			] )( 'with $type', ( { initialDate, transformOnChange } ) => {
+				it( 'should display and select dates according to site timezone', async () => {
+					timezoneMock.register( timezone );
+
+					// Normalize "current" time to the same time, so we can
+					// assert the same behavior between undefined or explicitly
+					// set initial dates.
+					let user: ReturnType< typeof userEvent.setup >;
+					if ( initialDate === undefined ) {
+						jest.useFakeTimers();
+						jest.setSystemTime( Date.UTC( 2025, 10, 16, 1, 0, 0 ) );
+						user = userEvent.setup( {
+							advanceTimers: jest.advanceTimersByTime,
+						} );
+					} else {
+						user = userEvent.setup();
+					}
+
+					const onChange = jest.fn();
+					const { rerender } = render(
+						<DateTimePicker
+							currentDate={ initialDate }
+							onChange={ onChange }
+						/>
+					);
+
+					// Should display the correct initial date and time assuming
+					// settings for the current site. If incorrectly using UTC,
+					// this would show Nov 16 at 01:00 instead of Nov 15 at 20:00.
+					//
+					// When initialDate is undefined, the fake time is set to
+					// Nov 16 01:00 UTC (Nov 15 20:00 site time), in which case the
+					// current date of Nov 15 is both "Selected" and "Today".
+					expect(
+						screen.getByRole( 'button', {
+							name:
+								initialDate === undefined
+									? 'November 15, 2025. Selected. Today'
+									: 'November 15, 2025. Selected',
+						} )
+					).toBeVisible();
+					expect( screen.getByLabelText( 'Hours' ) ).toHaveValue(
+						20
+					);
+					expect( screen.getByLabelText( 'Minutes' ) ).toHaveValue(
+						0
+					);
+
+					await user.click(
+						screen.getByRole( 'button', {
+							name: 'November 20, 2025',
+						} )
+					);
+
+					// Changing date should preserve the time, calling onChange with
+					// a timezoneless string. The timezoneless string is assumed to
+					// represent the site timezone.
+					expect( onChange ).toHaveBeenCalledWith(
+						'2025-11-20T20:00:00'
+					);
+
+					let nextDate = onChange.mock.calls[ 0 ][ 0 ];
+					rerender(
+						<DateTimePicker
+							currentDate={ transformOnChange( nextDate ) }
+							onChange={ onChange }
+						/>
+					);
+
+					expect(
+						screen.getByRole( 'button', {
+							name: 'November 20, 2025. Selected',
+						} )
+					).toBeVisible();
+					expect( screen.getByLabelText( 'Hours' ) ).toHaveValue(
+						20
+					);
+					expect( screen.getByLabelText( 'Minutes' ) ).toHaveValue(
+						0
+					);
+
+					// Changing the time should output timezoneless string with
+					// only the updated hour, and not changing the date.
+					onChange.mockClear();
+					const hoursInput = screen.getByLabelText( 'Hours' );
+					await user.clear( hoursInput );
+					await user.type( hoursInput, '22' );
+					await user.keyboard( '{Tab}' );
+					expect( onChange ).toHaveBeenCalledWith(
+						'2025-11-20T22:00:00'
+					);
+
+					nextDate = onChange.mock.calls[ 0 ][ 0 ];
+					rerender(
+						<DateTimePicker
+							currentDate={ transformOnChange( nextDate ) }
+							onChange={ onChange }
+						/>
+					);
+
+					expect( screen.getByLabelText( 'Hours' ) ).toHaveValue(
+						22
+					);
+					expect( screen.getByLabelText( 'Minutes' ) ).toHaveValue(
+						0
+					);
+
+					// Ensure week boundaries keyboard navigation is calculated
+					// correctly in the configured timezone, not the browser's.
+					await user.click(
+						screen.getByRole( 'button', {
+							name: 'November 20, 2025. Selected',
+						} )
+					);
+					await user.keyboard( '{Home}' );
+					expect(
+						screen.getByRole( 'button', {
+							name: 'November 16, 2025',
+						} )
+					).toHaveFocus();
+					await user.keyboard( '{End}' );
+					expect(
+						screen.getByRole( 'button', {
+							name: 'November 22, 2025',
+						} )
+					).toHaveFocus();
+				} );
+			} );
+		} );
+	} );
+
 	it( 'should preserve time when changing date', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();