@wordpress/components 19.11.0 → 19.12.0

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

@@ -0,0 +1,217 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, forwardRef } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { default as DatePicker } from '../date';
+import { default as TimePicker } from '../time';
+import type { DateTimePickerProps } from '../types';
+import { CalendarHelp } from './styles';
+import { HStack } from '../../h-stack';
+import { Heading } from '../../heading';
+import { Spacer } from '../../spacer';
+
+export { DatePicker, TimePicker };
+
+function UnforwardedDateTimePicker(
+	{
+		currentDate,
+		is12Hour,
+		isInvalidDate,
+		onMonthPreviewed = noop,
+		onChange,
+		events,
+		__nextRemoveHelpButton = false,
+		__nextRemoveResetButton = false,
+	}: DateTimePickerProps,
+	ref: ForwardedRef< any >
+) {
+	if ( ! __nextRemoveHelpButton ) {
+		deprecated( 'Help button in wp.components.DateTimePicker', {
+			since: '13.4',
+			version: '14.6', // Six months of plugin releases.
+			hint:
+				'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
+		} );
+	}
+	if ( ! __nextRemoveResetButton ) {
+		deprecated( 'Reset button in wp.components.DateTimePicker', {
+			since: '13.4',
+			version: '14.6', // Six months of plugin releases.
+			hint:
+				'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
+		} );
+	}
+
+	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(
+		false
+	);
+
+	function onClickDescriptionToggle() {
+		setCalendarHelpIsVisible( ! calendarHelpIsVisible );
+	}
+
+	return (
+		<div ref={ ref } className="components-datetime">
+			{ ! calendarHelpIsVisible && (
+				<>
+					<TimePicker
+						currentTime={ currentDate }
+						onChange={ onChange }
+						is12Hour={ is12Hour }
+					/>
+					<DatePicker
+						currentDate={ currentDate }
+						onChange={ onChange }
+						isInvalidDate={ isInvalidDate }
+						events={ events }
+						onMonthPreviewed={ onMonthPreviewed }
+					/>
+				</>
+			) }
+			{ calendarHelpIsVisible && (
+				<CalendarHelp
+					className="components-datetime__calendar-help" // Unused, for backwards compatibility.
+				>
+					<Heading level={ 4 }>{ __( 'Click to Select' ) }</Heading>
+					<ul>
+						<li>
+							{ __(
+								'Click the right or left arrows to select other months in the past or the future.'
+							) }
+						</li>
+						<li>{ __( 'Click the desired day to select it.' ) }</li>
+					</ul>
+					<Heading level={ 4 }>
+						{ __( 'Navigating with a keyboard' ) }
+					</Heading>
+					<ul>
+						<li>
+							<abbr
+								aria-label={ _x( 'Enter', 'keyboard button' ) }
+							>
+								↵
+							</abbr>
+							{
+								' ' /* JSX removes whitespace, but a space is required for screen readers. */
+							}
+							<span>{ __( 'Select the date in focus.' ) }</span>
+						</li>
+						<li>
+							<abbr aria-label={ __( 'Left and Right Arrows' ) }>
+								←/→
+							</abbr>
+							{
+								' ' /* JSX removes whitespace, but a space is required for screen readers. */
+							}
+							{ __(
+								'Move backward (left) or forward (right) by one day.'
+							) }
+						</li>
+						<li>
+							<abbr aria-label={ __( 'Up and Down Arrows' ) }>
+								↑/↓
+							</abbr>
+							{
+								' ' /* JSX removes whitespace, but a space is required for screen readers. */
+							}
+							{ __(
+								'Move backward (up) or forward (down) by one week.'
+							) }
+						</li>
+						<li>
+							<abbr aria-label={ __( 'Page Up and Page Down' ) }>
+								{ __( 'PgUp/PgDn' ) }
+							</abbr>
+							{
+								' ' /* JSX removes whitespace, but a space is required for screen readers. */
+							}
+							{ __(
+								'Move backward (PgUp) or forward (PgDn) by one month.'
+							) }
+						</li>
+						<li>
+							<abbr aria-label={ __( 'Home and End' ) }>
+								{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }
+								{ __( 'Home/End' ) }
+							</abbr>
+							{
+								' ' /* JSX removes whitespace, but a space is required for screen readers. */
+							}
+							{ __(
+								'Go to the first (Home) or last (End) day of a week.'
+							) }
+						</li>
+					</ul>
+				</CalendarHelp>
+			) }
+			{ ( ! __nextRemoveResetButton || ! __nextRemoveHelpButton ) && (
+				<HStack
+					className="components-datetime__buttons" // Unused, for backwards compatibility.
+				>
+					{ ! __nextRemoveResetButton &&
+						! calendarHelpIsVisible &&
+						currentDate && (
+							<Button
+								className="components-datetime__date-reset-button" // Unused, for backwards compatibility.
+								variant="link"
+								onClick={ () => onChange?.( null ) }
+							>
+								{ __( 'Reset' ) }
+							</Button>
+						) }
+					<Spacer />
+					{ ! __nextRemoveHelpButton && (
+						<Button
+							className="components-datetime__date-help-toggle" // Unused, for backwards compatibility.
+							variant="link"
+							onClick={ onClickDescriptionToggle }
+						>
+							{ calendarHelpIsVisible
+								? __( 'Close' )
+								: __( 'Calendar Help' ) }
+						</Button>
+					) }
+				</HStack>
+			) }
+		</div>
+	);
+}
+
+/**
+ * DateTimePicker is a React component that renders a calendar and clock for
+ * date and time selection. The calendar and clock components can be accessed
+ * individually using the `DatePicker` and `TimePicker` components respectively.
+ *
+ * ```jsx
+ * import { DateTimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyDateTimePicker = () => {
+ *   const [ date, setDate ] = useState( new Date() );
+ *
+ *   return (
+ *     <DateTimePicker
+ *       currentDate={ date }
+ *       onChange={ ( newDate ) => setDate( newDate ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const DateTimePicker = forwardRef( UnforwardedDateTimePicker );
+
+export default DateTimePicker;

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

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+export const CalendarHelp = styled.div`
+	min-width: 260px;
+`;

package/src/date-time/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { default as DatePicker } from './date';
+import { default as TimePicker } from './time';
+import { default as DateTimePicker } from './date-time';
+
+export { DatePicker, TimePicker };
+export default DateTimePicker;

package/src/date-time/stories/{index.tsx → date-time.tsx}

@@ -11,7 +11,7 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import DateTimePicker from '..';
+import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 
 const meta: ComponentMeta< typeof DateTimePicker > = {

package/src/date-time/style.scss

@@ -1,262 +1 @@
-@import "./datepicker";
-
-.components-datetime {
-	// This padding is leveraged when the component is used alone,
-	// usually inside popovers.
-	padding: $grid-unit-20;
-
-	// This rule removes the padding when used inside a panel.
-	.components-panel__body & {
-		padding: 0;
-	}
-
-	.components-datetime__calendar-help {
-		padding: $grid-unit-20;
-		min-width: 260px;
-
-		h4 {
-			margin: 0;
-		}
-	}
-
-	.components-datetime__buttons {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.components-datetime__date-help-toggle {
-		display: block;
-		margin-left: auto;
-	}
-
-	fieldset {
-		border: 0;
-		padding: 0;
-		margin: 0;
-	}
-
-	select,
-	input {
-		@include input-style__neutral();
-	}
-
-	// Override inherited conflicting styles to be consistent.
-	select,
-	input[type="number"],
-	.components-button {
-		height: 30px;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-
-	.components-button:focus {
-		z-index: z-index(".components-button {:focus or .is-primary}");
-	}
-}
-
-.components-datetime__date {
-	min-height: 236px;
-	border-top: 1px solid $gray-300;
-
-	// Override external DatePicker styles.
-	.DayPickerNavigation_leftButton__horizontalDefault {
-		/*!rtl:begin:ignore*/
-		left: 13px;
-		/*!rtl:end:ignore*/
-	}
-
-	.CalendarMonth_caption {
-		font-size: $default-font-size;
-	}
-
-	// Seperate borders so that border respect border radius
-	.CalendarMonth_table {
-		border-collapse: separate;
-		border-spacing: 2px;
-	}
-
-	.CalendarDay {
-		font-size: $default-font-size;
-		border: none;
-		border-radius: $radius-round;
-		text-align: center;
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
-			outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
-		}
-	}
-
-	.CalendarDay__selected {
-		background: var(--wp-admin-theme-color);
-		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.
-
-		&:hover {
-			background: var(--wp-admin-theme-color-darker-20);
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 $border-width $white;
-		}
-	}
-
-	.DayPickerNavigation_button__horizontalDefault {
-		padding: 2px 8px;
-		top: 20px;
-
-		&:focus {
-			@include input-style__focus();
-		}
-	}
-
-	.DayPicker_weekHeader {
-		top: 50px;
-		.DayPicker_weekHeader_ul {
-			margin: 1px;
-			padding-left: 0;
-			padding-right: 0;
-		}
-	}
-
-	&.is-description-visible .DayPicker {
-		visibility: hidden;
-	}
-}
-
-.components-datetime__date .CalendarDay .components-datetime__date__day {
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-content: center;
-	flex-direction: column;
-	position: relative;
-
-	&.has-events::before {
-		content: " ";
-		width: 4px;
-		height: 4px;
-		border-radius: 2px;
-		position: absolute;
-		left: 50%;
-		margin-left: -2px;
-		bottom: 0;
-		background-color: $white;
-	}
-}
-
-.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
-	background: var(--wp-admin-theme-color);
-}
-
-.components-datetime__time {
-	padding-bottom: $grid-unit-20;
-
-	fieldset {
-		position: relative;
-		margin-bottom: 0.5em;
-	}
-
-	fieldset + fieldset {
-		margin-bottom: 0;
-	}
-
-	.components-datetime__time-field-am-pm fieldset {
-		margin-top: 0;
-	}
-
-	.components-datetime__time-wrapper {
-		display: flex;
-
-		.components-datetime__time-separator {
-			display: inline-block;
-			padding: 0 3px 0 0;
-		}
-
-		.components-datetime__time-field {
-
-			&-time {
-				/*rtl:ignore*/
-				direction: ltr;
-			}
-
-			select {
-				margin-right: $grid-unit-05;
-
-				&:focus {
-					position: relative;
-					z-index: 1;
-				}
-			}
-
-			input[type="number"] {
-				padding: 2px;
-				margin-right: $grid-unit-05;
-				text-align: center;
-				-moz-appearance: textfield;
-
-				&:focus {
-					position: relative;
-					z-index: 1;
-				}
-
-				&::-webkit-inner-spin-button {
-					-webkit-appearance: none;
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	// Makes the month appear before the day if time format uses AM/PM
-	// We are assuming MM-DD-YYY correlates with AM/PM
-	&.is-12-hour {
-		.components-datetime__time-field-day input {
-			margin: 0 -$grid-unit-05 0 0 !important;
-			border-radius: $radius-block-ui 0 0 $radius-block-ui !important;
-		}
-		.components-datetime__time-field-year input {
-			border-radius: 0 $radius-block-ui $radius-block-ui 0 !important;
-		}
-	}
-}
-
-.components-datetime__timezone {
-	line-height: 30px;
-	margin-left: $grid-unit-05;
-	text-decoration: underline dotted;
-}
-
-.components-datetime__time-legend {
-	font-weight: 600;
-	margin-top: 0.5em;
-
-	&.invisible {
-		position: absolute;
-		top: -999em;
-		left: -999em;
-	}
-}
-
-.components-datetime__time-field-integer-field {
-	font-family: inherit;
-}
-
-.components-datetime__time-field-hours-input,
-.components-datetime__time-field-minutes-input,
-.components-datetime__time-field-day-input {
-	width: 35px;
-}
-
-.components-datetime__time-field-year-input {
-	width: 55px;
-}
-
-.components-datetime__time-field-month-select {
-	max-width: 145px;
-}
-
-// Hack to center the datepicker component within the popover.
-// It sets its own styles so centering is tricky.
-.components-popover .components-datetime__date {
-	padding-left: $grid-unit-05;
-}
+@import "./date/style.scss";