@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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

@@ -1,82 +1,45 @@
 /**
  * External dependencies
  */
-import moment from 'moment';
-import type { Moment } from 'moment';
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-import 'react-dates/initialize';
-// `react-dates` doesn't tree-shake correctly, so we import from the individual
-// component here.
-import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
+import { useLilius } from 'use-lilius';
+import {
+	format,
+	isSameDay,
+	subMonths,
+	addMonths,
+	startOfDay,
+	isEqual,
+	addDays,
+	subWeeks,
+	addWeeks,
+	isSameMonth,
+	startOfWeek,
+	endOfWeek,
+} from 'date-fns';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
-import { isRTL, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
+import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
+import { useState, useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { getMomentDate } from './utils';
-import type { DatePickerDayProps, DatePickerProps } from '../types';
-import { Day, NavPrevButton, NavNextButton } from './styles';
-
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-const ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';
-const noop = () => {};
-
-function DatePickerDay( { day, events = [] }: DatePickerDayProps ) {
-	const ref = useRef< HTMLDivElement >( null );
-
-	/*
-	 * a11y hack to make the `There is/are n events` string
-	 * available speaking for readers,
-	 * re-defining the aria-label attribute.
-	 * This attribute is handled by the react-dates component.
-	 */
-	useEffect( () => {
-		// Bail when no parent node.
-		if ( ! ( ref?.current?.parentNode instanceof Element ) ) {
-			return;
-		}
-
-		const { parentNode } = ref.current;
-		const dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );
-
-		if ( ! events.length ) {
-			// Set aria-label without event description.
-			parentNode.setAttribute( 'aria-label', dayAriaLabel );
-			return;
-		}
-
-		const dayWithEventsDescription = sprintf(
-			// translators: 1: Calendar day format, 2: Calendar event number.
-			_n(
-				'%1$s. There is %2$d event.',
-				'%1$s. There are %2$d events.',
-				events.length
-			),
-			dayAriaLabel,
-			events.length
-		);
-
-		parentNode.setAttribute( 'aria-label', dayWithEventsDescription );
-	}, [ day, events.length ] );
-
-	return (
-		<Day
-			ref={ ref }
-			className="components-datetime__date__day" // Unused, for backwards compatibility.
-			hasEvents={ !! events?.length }
-			alignment="center"
-		>
-			{ day.format( 'D' ) }
-		</Day>
-	);
-}
+import type { DatePickerProps } from '../types';
+import {
+	Wrapper,
+	Navigator,
+	NavigatorHeading,
+	Calendar,
+	DayOfWeek,
+	DayButton,
+} from './styles';
+import { inputToDate } from '../utils';
+import Button from '../../button';
+import { TIMEZONELESS_FORMAT } from '../constants';
 
 /**
  * DatePicker is a React component that renders a calendar for date selection.
@@ -100,139 +63,301 @@ function DatePickerDay( { day, events = [] }: DatePickerDayProps ) {
 export function DatePicker( {
 	currentDate,
 	onChange,
-	events,
+	events = [],
 	isInvalidDate,
 	onMonthPreviewed,
-	startOfWeek = 0,
+	startOfWeek: weekStartsOn = 0,
 }: DatePickerProps ) {
-	const nodeRef = useRef< HTMLDivElement >( null );
-
-	const onMonthPreviewedHandler = ( newMonthDate: Moment ) => {
-		onMonthPreviewed?.( newMonthDate.toISOString() );
-		keepFocusInside();
-	};
+	const date = currentDate ? inputToDate( currentDate ) : new Date();
 
-	/*
-	 * Todo: We should remove this function ASAP.
-	 * It is kept because focus is lost when we click on the previous and next month buttons.
-	 * This focus loss closes the date picker popover.
-	 * Ideally we should add an upstream commit on react-dates to fix this issue.
-	 */
-	const keepFocusInside = () => {
-		if ( ! nodeRef.current ) {
-			return;
-		}
+	const {
+		calendar,
+		viewing,
+		setSelected,
+		setViewing,
+		isSelected,
+		viewPreviousMonth,
+		viewNextMonth,
+	} = useLilius( {
+		selected: [ startOfDay( date ) ],
+		viewing: startOfDay( date ),
+		weekStartsOn,
+	} );
 
-		const { ownerDocument } = nodeRef.current;
-		const { activeElement } = ownerDocument;
+	// 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 ) );
 
-		// If focus was lost.
-		if (
-			! activeElement ||
-			! nodeRef.current.contains( ownerDocument.activeElement )
-		) {
-			// Retrieve the focus region div.
-			const focusRegion = nodeRef.current.querySelector(
-				'.DayPicker_focusRegion'
-			);
-			if ( ! ( focusRegion instanceof HTMLElement ) ) {
-				return;
-			}
-			// Keep the focus on focus region.
-			focusRegion.focus();
-		}
-	};
+	// 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
+	// input.
+	const [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =
+		useState( false );
 
-	const onChangeMoment = ( newDate: Moment | null ) => {
-		if ( ! newDate ) {
-			return;
-		}
+	// Update internal state when currentDate prop changes.
+	const [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );
+	if ( currentDate !== prevCurrentDate ) {
+		setPrevCurrentDate( currentDate );
+		setSelected( [ startOfDay( date ) ] );
+		setViewing( startOfDay( date ) );
+		setFocusable( startOfDay( date ) );
+	}
 
-		// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
-		const momentDate = currentDate ? moment( currentDate ) : moment();
-		const momentTime = {
-			hours: momentDate.hours(),
-			minutes: momentDate.minutes(),
-			seconds: 0,
-		};
+	return (
+		<Wrapper
+			className="components-datetime__date"
+			role="application"
+			aria-label={ __( 'Calendar' ) }
+		>
+			<Navigator>
+				<Button
+					icon={ isRTL() ? arrowRight : arrowLeft }
+					variant="tertiary"
+					aria-label={ __( 'View previous month' ) }
+					onClick={ () => {
+						viewPreviousMonth();
+						setFocusable( subMonths( focusable, 1 ) );
+						onMonthPreviewed?.(
+							format(
+								subMonths( viewing, 1 ),
+								TIMEZONELESS_FORMAT
+							)
+						);
+					} }
+				/>
+				<NavigatorHeading level={ 3 }>
+					<strong>
+						{ dateI18n(
+							'F',
+							viewing,
+							-viewing.getTimezoneOffset()
+						) }
+					</strong>{ ' ' }
+					{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }
+				</NavigatorHeading>
+				<Button
+					icon={ isRTL() ? arrowLeft : arrowRight }
+					variant="tertiary"
+					aria-label={ __( 'View next month' ) }
+					onClick={ () => {
+						viewNextMonth();
+						setFocusable( addMonths( focusable, 1 ) );
+						onMonthPreviewed?.(
+							format(
+								addMonths( viewing, 1 ),
+								TIMEZONELESS_FORMAT
+							)
+						);
+					} }
+				/>
+			</Navigator>
+			<Calendar
+				onFocus={ () => setIsFocusWithinCalendar( true ) }
+				onBlur={ () => setIsFocusWithinCalendar( false ) }
+			>
+				{ calendar[ 0 ][ 0 ].map( ( day ) => (
+					<DayOfWeek key={ day.toString() }>
+						{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }
+					</DayOfWeek>
+				) ) }
+				{ calendar[ 0 ].map( ( week ) =>
+					week.map( ( day, index ) => {
+						if ( ! isSameMonth( day, viewing ) ) {
+							return null;
+						}
+						return (
+							<Day
+								key={ day.toString() }
+								day={ day }
+								column={ index + 1 }
+								isSelected={ isSelected( day ) }
+								isFocusable={ isEqual( day, focusable ) }
+								isFocusAllowed={ isFocusWithinCalendar }
+								isToday={ isSameDay( day, new Date() ) }
+								isInvalid={
+									isInvalidDate ? isInvalidDate( day ) : false
+								}
+								numEvents={
+									events.filter( ( event ) =>
+										isSameDay( event.date, day )
+									).length
+								}
+								onClick={ () => {
+									setSelected( [ day ] );
+									setFocusable( day );
+									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
+										)
+									);
+								} }
+								onKeyDown={ ( event ) => {
+									let nextFocusable;
+									if ( event.key === 'ArrowLeft' ) {
+										nextFocusable = addDays(
+											day,
+											isRTL() ? 1 : -1
+										);
+									}
+									if ( event.key === 'ArrowRight' ) {
+										nextFocusable = addDays(
+											day,
+											isRTL() ? -1 : 1
+										);
+									}
+									if ( event.key === 'ArrowUp' ) {
+										nextFocusable = subWeeks( day, 1 );
+									}
+									if ( event.key === 'ArrowDown' ) {
+										nextFocusable = addWeeks( day, 1 );
+									}
+									if ( event.key === 'PageUp' ) {
+										nextFocusable = subMonths( day, 1 );
+									}
+									if ( event.key === 'PageDown' ) {
+										nextFocusable = addMonths( day, 1 );
+									}
+									if ( event.key === 'Home' ) {
+										nextFocusable = startOfWeek( day );
+									}
+									if ( event.key === 'End' ) {
+										nextFocusable = startOfDay(
+											endOfWeek( day )
+										);
+									}
+									if ( nextFocusable ) {
+										event.preventDefault();
+										setFocusable( nextFocusable );
+										if (
+											! isSameMonth(
+												nextFocusable,
+												viewing
+											)
+										) {
+											setViewing( nextFocusable );
+											onMonthPreviewed?.(
+												format(
+													nextFocusable,
+													TIMEZONELESS_FORMAT
+												)
+											);
+										}
+									}
+								} }
+							/>
+						);
+					} )
+				) }
+			</Calendar>
+		</Wrapper>
+	);
+}
 
-		onChange?.( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
+type DayProps = {
+	day: Date;
+	column: number;
+	isSelected: boolean;
+	isFocusable: boolean;
+	isFocusAllowed: boolean;
+	isToday: boolean;
+	numEvents: number;
+	isInvalid: boolean;
+	onClick: () => void;
+	onKeyDown: ( event: KeyboardEvent ) => void;
+};
 
-		// Keep focus on the date picker.
-		keepFocusInside();
-	};
+function Day( {
+	day,
+	column,
+	isSelected,
+	isFocusable,
+	isFocusAllowed,
+	isToday,
+	isInvalid,
+	numEvents,
+	onClick,
+	onKeyDown,
+}: DayProps ) {
+	const ref = useRef< HTMLButtonElement >();
 
-	const getEventsPerDay = ( day: Moment ) => {
-		if ( ! events?.length ) {
-			return [];
+	// Focus the day when it becomes focusable, e.g. because an arrow key is
+	// pressed. Only do this if focus is allowed - this stops us stealing focus
+	// from e.g. a TimePicker input.
+	useEffect( () => {
+		if ( ref.current && isFocusable && isFocusAllowed ) {
+			ref.current.focus();
 		}
-
-		return events.filter( ( eventDay ) =>
-			day.isSame( eventDay.date, 'day' )
-		);
-	};
-
-	const momentDate = getMomentDate( currentDate );
+		// isFocusAllowed is not a dep as there is no point calling focus() on
+		// an already focused element.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ isFocusable ] );
 
 	return (
-		<div className="components-datetime__date" ref={ nodeRef }>
-			<DayPickerSingleDateController
-				date={ momentDate }
-				initialVisibleMonth={ null }
-				daySize={ 30 }
-				horizontalMonthPadding={ 0 }
-				focused
-				hideKeyboardShortcutsPanel
-				// This is a hack to force the calendar to update on month or year change
-				// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
-				key={ `datepicker-controller-${
-					momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
-				}` }
-				noBorder
-				numberOfMonths={ 1 }
-				onDateChange={ onChangeMoment }
-				transitionDuration={ 0 }
-				weekDayFormat="ddd"
-				dayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }
-				isRTL={ isRTL() }
-				isOutsideRange={ ( date ) => {
-					return !! isInvalidDate && isInvalidDate( date.toDate() );
-				} }
-				firstDayOfWeek={ startOfWeek }
-				onPrevMonthClick={ onMonthPreviewedHandler }
-				onNextMonthClick={ onMonthPreviewedHandler }
-				renderDayContents={ ( day ) => (
-					<DatePickerDay
-						day={ day }
-						events={ getEventsPerDay( day ) }
-					/>
-				) }
-				renderMonthElement={ ( { month } ) => (
-					<>
-						<strong>{ month.format( 'MMMM' ) }</strong>{ ' ' }
-						{ month.format( 'YYYY' ) }
-					</>
-				) }
-				renderNavPrevButton={ ( { ariaLabel, ...props } ) => (
-					<NavPrevButton
-						icon={ arrowLeft }
-						variant="tertiary"
-						aria-label={ ariaLabel }
-						{ ...props }
-					/>
-				) }
-				renderNavNextButton={ ( { ariaLabel, ...props } ) => (
-					<NavNextButton
-						icon={ arrowRight }
-						variant="tertiary"
-						aria-label={ ariaLabel }
-						{ ...props }
-					/>
-				) }
-				onFocusChange={ noop }
-			/>
-		</div>
+		<DayButton
+			ref={ ref }
+			className="components-datetime__date__day" // Unused, for backwards compatibility.
+			disabled={ isInvalid }
+			tabIndex={ isFocusable ? 0 : -1 }
+			aria-label={ getDayLabel( day, isSelected, numEvents ) }
+			column={ column }
+			isSelected={ isSelected }
+			isToday={ isToday }
+			hasEvents={ numEvents > 0 }
+			onClick={ onClick }
+			onKeyDown={ onKeyDown }
+		>
+			{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }
+		</DayButton>
+	);
+}
+
+function getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {
+	const { formats } = __experimentalGetSettings();
+	const localizedDate = dateI18n(
+		formats.date,
+		date,
+		-date.getTimezoneOffset()
 	);
+	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: %s: 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',
+				numEvents
+			),
+			localizedDate,
+			numEvents
+		);
+	}
+	return localizedDate;
 }
 
 export default DatePicker;

package/src/date-time/date/styles.ts

@@ -2,27 +2,111 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
 import Button from '../../button';
-import { COLORS } from '../../utils';
-import { VStack } from '../../v-stack';
+import { COLORS, CONFIG } from '../../utils';
+import { HStack } from '../../h-stack';
+import { Heading } from '../../heading';
+import { space } from '../../ui/utils/space';
 
-// Styles that overrides the calendar styling provided by react-dates go in
-// style.scss. Everything else goes here.
+export const Wrapper = styled.div`
+	box-sizing: border-box;
+`;
+
+export const Navigator = styled( HStack )`
+	margin-bottom: ${ space( 4 ) };
+`;
+
+export const NavigatorHeading = styled( Heading )`
+	font-size: ${ CONFIG.fontSize };
+	font-weight: ${ CONFIG.fontWeight };
+
+	strong {
+		font-weight: ${ CONFIG.fontWeightHeading };
+	}
+`;
+
+export const Calendar = styled.div`
+	column-gap: ${ space( 2 ) };
+	display: grid;
+	grid-template-columns: 0.5fr repeat( 5, 1fr ) 0.5fr;
+	justify-items: center;
+	row-gap: ${ space( 2 ) };
+`;
+
+export const DayOfWeek = styled.div`
+	color: ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
+	line-height: ${ CONFIG.fontLineHeightBase };
 
-export const Day = styled( VStack )< { hasEvents: boolean } >`
-	height: 100%;
+	&:nth-of-type( 1 ) {
+		justify-self: start;
+	}
+
+	&:nth-of-type( 7 ) {
+		justify-self: end;
+	}
+`;
+
+export const DayButton = styled( Button, {
+	shouldForwardProp: ( prop: string ) =>
+		! [ 'column', 'isSelected', 'isToday', 'hasEvents' ].includes( prop ),
+} )< {
+	column: number;
+	isSelected: boolean;
+	isToday: boolean;
+	hasEvents: boolean;
+} >`
+	grid-column: ${ ( props ) => props.column };
 	position: relative;
+	justify-content: center;
+
+	${ ( props ) =>
+		props.column === 1 &&
+		`
+		justify-self: start;
+		` }
+
+	${ ( props ) =>
+		props.column === 7 &&
+		`
+		justify-self: end;
+		` }
+
+	${ ( props ) =>
+		props.disabled &&
+		`
+		pointer-events: none;
+		` }
+
+	&&& {
+		border-radius: 100%;
+		height: ${ space( 7 ) };
+		width: ${ space( 7 ) };
+
+		${ ( props ) =>
+			props.isSelected &&
+			`
+			background: ${ COLORS.ui.theme };
+			color: ${ COLORS.white };
+			` }
+
+		${ ( props ) =>
+			! props.isSelected &&
+			props.isToday &&
+			`
+			background: ${ COLORS.gray[ 200 ] };
+			` }
+	}
 
 	${ ( props ) =>
 		props.hasEvents &&
 		`
 		::before {
-			background: var(--wp-admin-theme-color);
+			background: ${ props.isSelected ? COLORS.white : COLORS.ui.theme };
 			border-radius: 2px;
 			bottom: 0;
 			content: " ";
@@ -31,25 +115,6 @@ export const Day = styled( VStack )< { hasEvents: boolean } >`
 			margin-left: -2px;
 			position: absolute;
 			width: 4px;
-
-			.CalendarDay__selected & {
-				background: ${ COLORS.white };
-			}
 		}
 		` }
 `;
-
-const baseNavButton = css`
-	position: absolute;
-	top: 15px;
-`;
-
-export const NavPrevButton = styled( Button )`
-	${ baseNavButton }
-	left: 0;
-`;
-
-export const NavNextButton = styled( Button )`
-	${ baseNavButton }
-	right: 0;
-`;