@wordpress/components 19.11.0 → 19.12.0

package/src/color-picker/color-display.tsx

@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useCopyToClipboard } from '@wordpress/compose';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../text';
-import { Flex, FlexItem } from '../flex';
-import { Tooltip } from '../ui/tooltip';
-import type { ColorType } from './types';
-import { space } from '../ui/utils/space';
-import { COLORS } from '../utils/colors-values';
-
-interface ColorDisplayProps {
-	color: Colord;
-	colorType: ColorType;
-	enableAlpha: boolean;
-}
-
-interface DisplayProps {
-	color: Colord;
-	enableAlpha: boolean;
-}
-
-type Values = [ number, string ][];
-
-interface ValueDisplayProps {
-	values: Values;
-}
-
-const ValueDisplay = ( { values }: ValueDisplayProps ) => (
-	<>
-		{ values.map( ( [ value, abbreviation ] ) => {
-			return (
-				<FlexItem key={ abbreviation } isBlock display="flex">
-					<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>
-					<Text>{ value }</Text>
-				</FlexItem>
-			);
-		} ) }
-	</>
-);
-
-const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { h, s, l, a } = color.toHsl();
-
-	const values: Values = [
-		[ Math.floor( h ), 'H' ],
-		[ Math.round( s * 100 ), 'S' ],
-		[ Math.round( l * 100 ), 'L' ],
-	];
-	if ( enableAlpha ) {
-		values.push( [ Math.round( a * 100 ), 'A' ] );
-	}
-
-	return <ValueDisplay values={ values } />;
-};
-
-const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { r, g, b, a } = color.toRgb();
-
-	const values: Values = [
-		[ r, 'R' ],
-		[ g, 'G' ],
-		[ b, 'B' ],
-	];
-
-	if ( enableAlpha ) {
-		values.push( [ Math.round( a * 100 ), 'A' ] );
-	}
-
-	return <ValueDisplay values={ values } />;
-};
-
-const HexDisplay = ( { color }: DisplayProps ) => {
-	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
-	return (
-		<FlexItem>
-			<Text color={ COLORS.ui.theme }>#</Text>
-			<Text>{ colorWithoutHash }</Text>
-		</FlexItem>
-	);
-};
-
-const getComponent = ( colorType: ColorType ) => {
-	switch ( colorType ) {
-		case 'hsl':
-			return HslDisplay;
-		case 'rgb':
-			return RgbDisplay;
-		default:
-		case 'hex':
-			return HexDisplay;
-	}
-};
-
-export const ColorDisplay = ( {
-	color,
-	colorType,
-	enableAlpha,
-}: ColorDisplayProps ) => {
-	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
-	const props = { color, enableAlpha };
-	const Component = getComponent( colorType );
-	const copyRef = useCopyToClipboard< HTMLDivElement >(
-		() => {
-			switch ( colorType ) {
-				case 'hsl': {
-					return color.toHslString();
-				}
-				case 'rgb': {
-					return color.toRgbString();
-				}
-				default:
-				case 'hex': {
-					return color.toHex();
-				}
-			}
-		},
-		() => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
-			}
-			setCopiedColor( color.toHex() );
-			copyTimer.current = setTimeout( () => {
-				setCopiedColor( null );
-				copyTimer.current = undefined;
-			}, 3000 );
-		}
-	);
-	useEffect( () => {
-		// Clear copyTimer on component unmount.
-		return () => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
-			}
-		};
-	}, [] );
-	return (
-		<Tooltip
-			content={
-				<Text color="white">
-					{ copiedColor === color.toHex()
-						? __( 'Copied!' )
-						: __( 'Copy' ) }
-				</Text>
-			}
-		>
-			<Flex
-				justify="flex-start"
-				gap={ space( 1 ) }
-				ref={ copyRef }
-				style={ { height: 30 } }
-			>
-				<Component { ...props } />
-			</Flex>
-		</Tooltip>
-	);
-};

package/src/date-time/index.tsx

@@ -1,196 +0,0 @@
-/**
- * External dependencies
- */
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-import 'react-dates/initialize';
-import { noop } from 'lodash';
-import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useState, forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { default as DatePicker } from './date';
-import { default as TimePicker } from './time';
-import type { DateTimePickerProps } from './types';
-
-export { DatePicker, TimePicker };
-
-function UnforwardedDateTimePicker(
-	{
-		currentDate,
-		is12Hour,
-		isInvalidDate,
-		onMonthPreviewed = noop,
-		onChange,
-		events,
-	}: DateTimePickerProps,
-	ref: ForwardedRef< any >
-) {
-	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 && (
-				<>
-					<div className="components-datetime__calendar-help">
-						<h4>{ __( 'Click to Select' ) }</h4>
-						<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>
-						<h4>{ __( 'Navigating with a keyboard' ) }</h4>
-						<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>
-					</div>
-				</>
-			) }
-			<div className="components-datetime__buttons">
-				{ ! calendarHelpIsVisible && currentDate && (
-					<Button
-						className="components-datetime__date-reset-button"
-						variant="link"
-						onClick={ () => onChange?.( null ) }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				) }
-				<Button
-					className="components-datetime__date-help-toggle"
-					variant="link"
-					onClick={ onClickDescriptionToggle }
-				>
-					{ calendarHelpIsVisible
-						? __( 'Close' )
-						: __( 'Calendar Help' ) }
-				</Button>
-			</div>
-		</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/time.tsx

@@ -1,321 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { isInteger } from 'lodash';
-import moment from 'moment';
-import type { FocusEvent } from 'react';
-import type { Moment } from 'moment';
-
-/**
- * WordPress dependencies
- */
-import {
-	createElement,
-	useState,
-	useMemo,
-	useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import ButtonGroup from '../button-group';
-import TimeZone from './timezone';
-import type { WordPressComponentProps } from '../ui/context';
-import type { UpdateOnBlurAsIntegerFieldProps, TimePickerProps } from './types';
-
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-
-function from12hTo24h( hours: number, isPm: boolean ) {
-	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
-}
-
-/**
- * A shared component to parse, validate, and handle remounting of the
- * underlying form field element like <input> and <select>.
- */
-function UpdateOnBlurAsIntegerField( {
-	as,
-	value,
-	onUpdate,
-	className,
-	...props
-}: WordPressComponentProps< UpdateOnBlurAsIntegerFieldProps, 'input', true > ) {
-	function handleBlur( event: FocusEvent< HTMLInputElement > ) {
-		const { target } = event;
-
-		if ( String( value ) === target.value ) {
-			return;
-		}
-
-		const parsedValue = parseInt( target.value, 10 );
-
-		// Run basic number validation on the input.
-		if (
-			! isInteger( parsedValue ) ||
-			( typeof props.max !== 'undefined' && parsedValue > props.max ) ||
-			( typeof props.min !== 'undefined' && parsedValue < props.min )
-		) {
-			// If validation failed, reset the value to the previous valid value.
-			target.value = String( value );
-		} else {
-			// Otherwise, it's valid, call onUpdate.
-			onUpdate( parsedValue );
-		}
-	}
-
-	return createElement( as || 'input', {
-		// Re-mount the input value to accept the latest value as the defaultValue.
-		key: value,
-		defaultValue: value,
-		onBlur: handleBlur,
-		className: classnames(
-			'components-datetime__time-field-integer-field',
-			className
-		),
-		...props,
-	} );
-}
-
-/**
- * TimePicker is a React component that renders a clock for time selection.
- *
- * ```jsx
- * import { TimePicker } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyTimePicker = () => {
- *   const [ time, setTime ] = useState( new Date() );
- *
- *   return (
- *     <TimePicker
- *       currentTime={ date }
- *       onChange={ ( newTime ) => setTime( newTime ) }
- *       is12Hour
- *     />
- *   );
- * };
- * ```
- */
-export function TimePicker( {
-	is12Hour,
-	currentTime,
-	onChange,
-}: TimePickerProps ) {
-	const [ date, setDate ] = useState( () =>
-		// Truncate the date at the minutes, see: #15495.
-		currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
-	);
-
-	// Reset the state when currentTime changed.
-	useEffect( () => {
-		setDate(
-			currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
-		);
-	}, [ currentTime ] );
-
-	const { day, month, year, minutes, hours, am } = useMemo(
-		() => ( {
-			day: date.format( 'DD' ),
-			month: date.format( 'MM' ),
-			year: date.format( 'YYYY' ),
-			minutes: date.format( 'mm' ),
-			hours: date.format( is12Hour ? 'hh' : 'HH' ),
-			am: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',
-		} ),
-		[ date, is12Hour ]
-	);
-
-	/**
-	 * Function that sets the date state and calls the onChange with a new date.
-	 * The date is truncated at the minutes.
-	 *
-	 * @param {Moment} newDate The date object.
-	 */
-	function changeDate( newDate: Moment ) {
-		setDate( newDate );
-		onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
-	}
-
-	function update( name: 'date' | 'month' | 'year' | 'hours' | 'minutes' ) {
-		return ( value: number ) => {
-			// 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.
-			let adjustedValue = value;
-			if ( name === 'hours' && is12Hour ) {
-				adjustedValue = from12hTo24h( value, am === 'PM' );
-			}
-
-			// Clone the date and call the specific setter function according to `name`.
-			const newDate = date.clone()[ name ]( adjustedValue );
-			changeDate( newDate );
-		};
-	}
-
-	function updateAmPm( value: 'AM' | 'PM' ) {
-		return () => {
-			if ( am === value ) {
-				return;
-			}
-
-			const parsedHours = parseInt( hours, 10 );
-
-			const newDate = date
-				.clone()
-				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
-
-			changeDate( newDate );
-		};
-	}
-
-	const dayFormat = (
-		<div className="components-datetime__time-field components-datetime__time-field-day">
-			<UpdateOnBlurAsIntegerField
-				aria-label={ __( 'Day' ) }
-				className="components-datetime__time-field-day-input"
-				type="number"
-				// The correct function to call in moment.js is "date" not "day".
-				name="date"
-				value={ day }
-				step={ 1 }
-				min={ 1 }
-				max={ 31 }
-				onUpdate={ update( 'date' ) }
-			/>
-		</div>
-	);
-
-	const monthFormat = (
-		<div className="components-datetime__time-field components-datetime__time-field-month">
-			<UpdateOnBlurAsIntegerField
-				as="select"
-				aria-label={ __( 'Month' ) }
-				className="components-datetime__time-field-month-select"
-				name="month"
-				value={ month }
-				// The value starts from 0, so we have to -1 when setting month.
-				onUpdate={ ( value ) => update( 'month' )( value - 1 ) }
-			>
-				<option value="01">{ __( 'January' ) }</option>
-				<option value="02">{ __( 'February' ) }</option>
-				<option value="03">{ __( 'March' ) }</option>
-				<option value="04">{ __( 'April' ) }</option>
-				<option value="05">{ __( 'May' ) }</option>
-				<option value="06">{ __( 'June' ) }</option>
-				<option value="07">{ __( 'July' ) }</option>
-				<option value="08">{ __( 'August' ) }</option>
-				<option value="09">{ __( 'September' ) }</option>
-				<option value="10">{ __( 'October' ) }</option>
-				<option value="11">{ __( 'November' ) }</option>
-				<option value="12">{ __( 'December' ) }</option>
-			</UpdateOnBlurAsIntegerField>
-		</div>
-	);
-
-	const dayMonthFormat = is12Hour ? (
-		<>
-			{ monthFormat }
-			{ dayFormat }
-		</>
-	) : (
-		<>
-			{ dayFormat }
-			{ monthFormat }
-		</>
-	);
-
-	return (
-		<div className={ classnames( 'components-datetime__time' ) }>
-			<fieldset>
-				<legend className="components-datetime__time-legend invisible">
-					{ __( 'Date' ) }
-				</legend>
-				<div className="components-datetime__time-wrapper">
-					{ dayMonthFormat }
-
-					<div className="components-datetime__time-field components-datetime__time-field-year">
-						<UpdateOnBlurAsIntegerField
-							aria-label={ __( 'Year' ) }
-							className="components-datetime__time-field-year-input"
-							type="number"
-							name="year"
-							step={ 1 }
-							min={ 0 }
-							max={ 9999 }
-							value={ year }
-							onUpdate={ update( 'year' ) }
-						/>
-					</div>
-				</div>
-			</fieldset>
-
-			<fieldset>
-				<legend className="components-datetime__time-legend invisible">
-					{ __( 'Time' ) }
-				</legend>
-				<div className="components-datetime__time-wrapper">
-					<div className="components-datetime__time-field components-datetime__time-field-time">
-						<UpdateOnBlurAsIntegerField
-							aria-label={ __( 'Hours' ) }
-							className="components-datetime__time-field-hours-input"
-							type="number"
-							name="hours"
-							step={ 1 }
-							min={ is12Hour ? 1 : 0 }
-							max={ is12Hour ? 12 : 23 }
-							value={ hours }
-							onUpdate={ update( 'hours' ) }
-						/>
-						<span
-							className="components-datetime__time-separator"
-							aria-hidden="true"
-						>
-							:
-						</span>
-						<UpdateOnBlurAsIntegerField
-							aria-label={ __( 'Minutes' ) }
-							className="components-datetime__time-field-minutes-input"
-							type="number"
-							name="minutes"
-							step={ 1 }
-							min={ 0 }
-							max={ 59 }
-							value={ minutes }
-							onUpdate={ update( 'minutes' ) }
-						/>
-					</div>
-					{ is12Hour && (
-						<ButtonGroup className="components-datetime__time-field components-datetime__time-field-am-pm">
-							<Button
-								variant={
-									am === 'AM' ? 'primary' : 'secondary'
-								}
-								onClick={ updateAmPm( 'AM' ) }
-								className="components-datetime__time-am-button"
-							>
-								{ __( 'AM' ) }
-							</Button>
-							<Button
-								variant={
-									am === 'PM' ? 'primary' : 'secondary'
-								}
-								onClick={ updateAmPm( 'PM' ) }
-								className="components-datetime__time-pm-button"
-							>
-								{ __( 'PM' ) }
-							</Button>
-						</ButtonGroup>
-					) }
-
-					<TimeZone />
-				</div>
-			</fieldset>
-		</div>
-	);
-}
-
-export default TimePicker;