@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.0

package/src/dataform-controls/date.tsx

@@ -31,6 +31,7 @@ import {
  */
 import RelativeDateControl, {
 	TIME_UNITS_OPTIONS,
+	type DateRelative,
 } from './relative-date-control';
 import {
 	OPERATOR_IN_THE_PAST,
@@ -42,6 +43,8 @@ import type { DataFormControlProps } from '../types';
 
 const { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );
 
+type DateRange = [ string, string ] | undefined;
+
 const DATE_PRESETS: {
 	id: string;
 	label: string;
@@ -146,7 +149,7 @@ function CalendarDateControl( {
 }: {
 	id: string;
 	value: string | undefined;
-	onChange: ( value: any ) => void;
+	onChange: ( value: string | undefined ) => void;
 	label: string;
 	hideLabelFromVision?: boolean;
 	className?: string;
@@ -165,10 +168,10 @@ function CalendarDateControl( {
 			const dateValue = newDate
 				? format( newDate, 'yyyy-MM-dd' )
 				: undefined;
-			onChange( { [ id ]: dateValue } );
+			onChange( dateValue );
 			setSelectedPresetId( null );
 		},
-		[ id, onChange ]
+		[ onChange ]
 	);
 
 	const handlePresetClick = useCallback(
@@ -177,15 +180,15 @@ function CalendarDateControl( {
 			const dateValue = formatDate( presetDate );
 
 			setCalendarMonth( presetDate );
-			onChange( { [ id ]: dateValue } );
+			onChange( dateValue );
 			setSelectedPresetId( preset.id );
 		},
-		[ id, onChange ]
+		[ onChange ]
 	);
 
 	const handleManualDateChange = useCallback(
 		( newValue?: string ) => {
-			onChange( { [ id ]: newValue } );
+			onChange( newValue );
 			if ( newValue ) {
 				const parsedDate = parseDate( newValue );
 				if ( parsedDate ) {
@@ -194,7 +197,7 @@ function CalendarDateControl( {
 			}
 			setSelectedPresetId( null );
 		},
-		[ id, onChange ]
+		[ onChange ]
 	);
 
 	const {
@@ -276,8 +279,8 @@ function CalendarDateRangeControl( {
 	className,
 }: {
 	id: string;
-	value: [ string, string ] | undefined;
-	onChange: ( value: any ) => void;
+	value: DateRange;
+	onChange: ( value: DateRange ) => void;
 	label: string;
 	hideLabelFromVision?: boolean;
 	className?: string;
@@ -305,15 +308,13 @@ function CalendarDateRangeControl( {
 	const updateDateRange = useCallback(
 		( fromDate?: Date | string, toDate?: Date | string ) => {
 			if ( fromDate && toDate ) {
-				onChange( {
-					[ id ]: [ formatDate( fromDate ), formatDate( toDate ) ],
-				} );
+				onChange( [ formatDate( fromDate ), formatDate( toDate ) ] );
 			} else if ( ! fromDate && ! toDate ) {
-				onChange( { [ id ]: undefined } );
+				onChange( undefined );
 			}
 			// Do nothing if only one date is set - wait for both
 		},
-		[ id, onChange ]
+		[ onChange ]
 	);
 
 	const onSelectCalendarRange = useCallback(
@@ -446,8 +447,33 @@ export default function DateControl< Item >( {
 	hideLabelFromVision,
 	operator,
 }: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } );
+	const { id, label, getValue, setValue } = field;
+	const value = getValue( { item: data } );
+
+	const onChangeRelativeDateControl = useCallback(
+		( newValue: DateRelative ) => {
+			onChange( setValue( { item: data, value: newValue } ) );
+		},
+		[ data, onChange, setValue ]
+	);
+
+	const onChangeCalendarDateRangeControl = useCallback(
+		( newValue: DateRange ) => {
+			onChange(
+				setValue( {
+					item: data,
+					value: newValue,
+				} )
+			);
+		},
+		[ data, onChange, setValue ]
+	);
+
+	const onChangeCalendarDateControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
 
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
@@ -455,7 +481,7 @@ export default function DateControl< Item >( {
 				className="dataviews-controls__date"
 				id={ id }
 				value={ value && typeof value === 'object' ? value : {} }
-				onChange={ onChange }
+				onChange={ onChangeRelativeDateControl }
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 				options={ TIME_UNITS_OPTIONS[ operator ] }
@@ -464,14 +490,14 @@ export default function DateControl< Item >( {
 	}
 
 	if ( operator === OPERATOR_BETWEEN ) {
-		let dateRangeValue: [ string, string ] | undefined;
+		let dateRangeValue: DateRange;
 		if (
 			Array.isArray( value ) &&
 			value.length === 2 &&
 			value.every( ( date ) => typeof date === 'string' )
 		) {
 			// Ensure the value is expected format
-			dateRangeValue = value as unknown as [ string, string ];
+			dateRangeValue = value as DateRange;
 		}
 
 		return (
@@ -479,7 +505,7 @@ export default function DateControl< Item >( {
 				className="dataviews-controls__date"
 				id={ id }
 				value={ dateRangeValue }
-				onChange={ onChange }
+				onChange={ onChangeCalendarDateRangeControl }
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
@@ -491,7 +517,7 @@ export default function DateControl< Item >( {
 			className="dataviews-controls__date"
 			id={ id }
 			value={ typeof value === 'string' ? value : undefined }
-			onChange={ onChange }
+			onChange={ onChangeCalendarDateControl }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 		/>

package/src/dataform-controls/datetime.tsx

@@ -1,8 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import {
+	BaseControl,
+	privateApis as componentsPrivateApis,
+	__experimentalInputControl as InputControl,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { getDate, getSettings } from '@wordpress/date';
+
+/**
+ * External dependencies
+ */
+import { format, isValid } from 'date-fns';
 
 /**
  * Internal dependencies
@@ -11,7 +23,142 @@ import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 import RelativeDateControl, {
 	TIME_UNITS_OPTIONS,
+	type DateRelative,
 } from './relative-date-control';
+import { unlock } from '../lock-unlock';
+
+const { DateCalendar } = unlock( componentsPrivateApis );
+
+const parseDateTime = ( dateTimeString?: string ): Date | null => {
+	if ( ! dateTimeString ) {
+		return null;
+	}
+	const parsed = getDate( dateTimeString );
+	return parsed && isValid( parsed ) ? parsed : null;
+};
+
+const formatDateTime = ( date?: Date | string ): string => {
+	if ( ! date ) {
+		return '';
+	}
+	if ( typeof date === 'string' ) {
+		return date;
+	}
+	// Format as datetime-local input expects: YYYY-MM-DDTHH:mm
+	return format( date, "yyyy-MM-dd'T'HH:mm" );
+};
+
+function CalendarDateTimeControl( {
+	id,
+	value,
+	onChange,
+	label,
+	description,
+	hideLabelFromVision,
+}: {
+	id: string;
+	value: string | undefined;
+	onChange: ( value: string | undefined ) => void;
+	label: string;
+	description?: string;
+	hideLabelFromVision?: boolean;
+} ) {
+	const [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {
+		const parsedDate = parseDateTime( value );
+		return parsedDate || new Date(); // Default to current month
+	} );
+
+	const onSelectDate = useCallback(
+		( newDate: Date | undefined | null ) => {
+			if ( newDate ) {
+				// Preserve time if it exists in current value, otherwise use current time
+				let finalDateTime = newDate;
+
+				if ( value ) {
+					const currentDateTime = parseDateTime( value );
+					if ( currentDateTime ) {
+						// Preserve the time part
+						finalDateTime = new Date( newDate );
+						finalDateTime.setHours( currentDateTime.getHours() );
+						finalDateTime.setMinutes(
+							currentDateTime.getMinutes()
+						);
+					}
+				}
+
+				const dateTimeValue = finalDateTime.toISOString();
+				onChange( dateTimeValue );
+			} else {
+				onChange( undefined );
+			}
+		},
+		[ onChange, value ]
+	);
+
+	const handleManualDateTimeChange = useCallback(
+		( newValue?: string ) => {
+			if ( newValue ) {
+				// Convert from datetime-local format to ISO string
+				const dateTime = new Date( newValue );
+				onChange( dateTime.toISOString() );
+
+				// Update calendar month to match
+				const parsedDate = parseDateTime( dateTime.toISOString() );
+				if ( parsedDate ) {
+					setCalendarMonth( parsedDate );
+				}
+			} else {
+				onChange( undefined );
+			}
+		},
+		[ onChange ]
+	);
+
+	const {
+		timezone: { string: timezoneString },
+		l10n: { startOfWeek },
+	} = getSettings();
+
+	return (
+		<BaseControl
+			__nextHasNoMarginBottom
+			id={ id }
+			label={ label }
+			help={ description }
+			hideLabelFromVision={ hideLabelFromVision }
+		>
+			<VStack spacing={ 4 }>
+				{ /* Calendar widget */ }
+				<DateCalendar
+					style={ { width: '100%' } }
+					selected={
+						value ? parseDateTime( value ) || undefined : undefined
+					}
+					onSelect={ onSelectDate }
+					month={ calendarMonth }
+					onMonthChange={ setCalendarMonth }
+					timeZone={ timezoneString || undefined }
+					weekStartsOn={ startOfWeek }
+				/>
+				{ /* Manual datetime input */ }
+				<InputControl
+					__next40pxDefaultSize
+					type="datetime-local"
+					label={ __( 'Date time' ) }
+					hideLabelFromVision
+					value={
+						value
+							? formatDateTime(
+									parseDateTime( value ) || undefined
+							  )
+							: ''
+					}
+					onChange={ handleManualDateTimeChange }
+				/>
+			</VStack>
+		</BaseControl>
+	);
+}
 
 export default function DateTime< Item >( {
 	data,
@@ -20,20 +167,28 @@ export default function DateTime< Item >( {
 	hideLabelFromVision,
 	operator,
 }: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } );
+	const { id, label, description, getValue, setValue } = field;
+	const value = getValue( { item: data } );
 
-	const onChangeControl = useCallback(
-		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
-		[ id, onChange ]
+	const onChangeRelativeDateControl = useCallback(
+		( newValue: DateRelative ) =>
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	const onChangeCalendarDateTimeControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
 	);
 
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
 			<RelativeDateControl
+				className="dataviews-controls__datetime"
 				id={ id }
 				value={ value && typeof value === 'object' ? value : {} }
-				onChange={ onChange }
+				onChange={ onChangeRelativeDateControl }
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 				options={ TIME_UNITS_OPTIONS[ operator ] }
@@ -42,20 +197,13 @@ export default function DateTime< Item >( {
 	}
 
 	return (
-		<fieldset className="dataviews-controls__datetime">
-			{ ! hideLabelFromVision && (
-				<BaseControl.VisualLabel as="legend">
-					{ label }
-				</BaseControl.VisualLabel>
-			) }
-			{ hideLabelFromVision && (
-				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
-			) }
-			<TimePicker
-				currentTime={ typeof value === 'string' ? value : undefined }
-				onChange={ onChangeControl }
-				hideLabelFromVision
-			/>
-		</fieldset>
+		<CalendarDateTimeControl
+			id={ id }
+			value={ typeof value === 'string' ? value : undefined }
+			onChange={ onChangeCalendarDateTimeControl }
+			label={ label }
+			description={ description }
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
 	);
 }

package/src/dataform-controls/email.tsx

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import {
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { atSymbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedTextControl } = unlock( privateApis );
+import ValidatedText from './utils/validated-input';
 
 export default function Email< Item >( {
 	data,
@@ -18,55 +19,20 @@ export default function Email< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
-	const value = field.getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedTextControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
 	return (
-		<ValidatedTextControl
-			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'email',
+				prefix: (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ atSymbol } />
+					</InputControlPrefixWrapper>
+				),
 			} }
-			customValidity={ customValidity }
-			type="email"
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			help={ description }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
 		/>
 	);
 }

package/src/dataform-controls/index.tsx

@@ -10,18 +10,24 @@ import type {
 	DataFormControlProps,
 	Field,
 	FieldTypeDefinition,
+	EditConfig,
 } from '../types';
 import checkbox from './checkbox';
 import datetime from './datetime';
 import date from './date';
 import email from './email';
+import telephone from './telephone';
+import url from './url';
 import integer from './integer';
 import radio from './radio';
 import select from './select';
 import text from './text';
+import toggle from './toggle';
+import textarea from './textarea';
 import toggleGroup from './toggle-group';
-import boolean from './boolean';
 import array from './array';
+import color from './color';
+import password from './password';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
@@ -29,18 +35,40 @@ interface FormControls {
 
 const FORM_CONTROLS: FormControls = {
 	array,
-	boolean,
 	checkbox,
+	color,
 	datetime,
 	date,
 	email,
+	telephone,
+	url,
 	integer,
+	password,
 	radio,
 	select,
 	text,
+	toggle,
+	textarea,
 	toggleGroup,
 };
 
+function isEditConfig( value: any ): value is EditConfig {
+	return (
+		value && typeof value === 'object' && typeof value.control === 'string'
+	);
+}
+
+function createConfiguredControl( config: EditConfig ) {
+	const { control, ...controlConfig } = config;
+	const BaseControlType = getControlByType( control );
+
+	return function ConfiguredControl< Item >(
+		props: DataFormControlProps< Item >
+	) {
+		return <BaseControlType { ...props } config={ controlConfig } />;
+	};
+}
+
 export function getControl< Item >(
 	field: Field< Item >,
 	fieldTypeDefinition: FieldTypeDefinition< Item >
@@ -53,6 +81,10 @@ export function getControl< Item >(
 		return getControlByType( field.Edit );
 	}
 
+	if ( isEditConfig( field.Edit ) ) {
+		return createConfiguredControl( field.Edit );
+	}
+
 	if ( field.elements && field.type !== 'array' ) {
 		return getControlByType( 'select' );
 	}
@@ -61,6 +93,10 @@ export function getControl< Item >(
 		return getControlByType( fieldTypeDefinition.Edit );
 	}
 
+	if ( isEditConfig( fieldTypeDefinition.Edit ) ) {
+		return createConfiguredControl( fieldTypeDefinition.Edit );
+	}
+
 	return fieldTypeDefinition.Edit;
 }