@wordpress/dataviews 8.0.2-next.836ecdcae.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,8 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { atSymbol } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import ValidatedText from './utils/validated-text';
+import ValidatedText from './utils/validated-input';
 
 export default function Email< Item >( {
 	data,
@@ -12,7 +21,18 @@ export default function Email< Item >( {
 }: DataFormControlProps< Item > ) {
 	return (
 		<ValidatedText
-			{ ...{ data, field, onChange, hideLabelFromVision, type: 'email' } }
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'email',
+				prefix: (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ atSymbol } />
+					</InputControlPrefixWrapper>
+				),
+			} }
 		/>
 	);
 }

package/src/dataform-controls/index.tsx

@@ -10,19 +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 > >;
@@ -30,19 +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 >
@@ -55,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' );
 	}
@@ -63,6 +93,10 @@ export function getControl< Item >(
 		return getControlByType( fieldTypeDefinition.Edit );
 	}
 
+	if ( isEditConfig( fieldTypeDefinition.Edit ) ) {
+		return createConfiguredControl( fieldTypeDefinition.Edit );
+	}
+
 	return fieldTypeDefinition.Edit;
 }
 

package/src/dataform-controls/integer.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -19,33 +24,29 @@ import { unlock } from '../lock-unlock';
 
 const { ValidatedNumberControl } = unlock( privateApis );
 
-function BetweenControls< Item >( {
-	id,
+type IntegerBetween = [ number | string, number | string ];
+
+function BetweenControls( {
 	value,
 	onChange,
 	hideLabelFromVision,
 }: {
-	id: string;
-	value: any;
-	onChange: DataFormControlProps< Item >[ 'onChange' ];
+	value: IntegerBetween;
+	onChange: ( [ min, max ]: IntegerBetween ) => void;
 	hideLabelFromVision?: boolean;
 } ) {
-	const [ min = '', max = '' ] = Array.isArray( value ) ? value : [];
+	const [ min = '', max = '' ] = value;
 
 	const onChangeMin = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( {
-				[ id ]: [ Number( newValue ), max ],
-			} ),
-		[ id, onChange, max ]
+			onChange( [ Number( newValue ), max ] ),
+		[ onChange, max ]
 	);
 
 	const onChangeMax = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( {
-				[ id ]: [ min, Number( newValue ) ],
-			} ),
-		[ id, onChange, min ]
+			onChange( [ min, Number( newValue ) ] ),
+		[ onChange, min ]
 	);
 
 	return (
@@ -82,8 +83,8 @@ export default function Integer< Item >( {
 	hideLabelFromVision,
 	operator,
 }: DataFormControlProps< Item > ) {
-	const { id, label, description } = field;
-	const value = field.getValue( { item: data } ) ?? '';
+	const { label, description, getValue, setValue } = field;
+	const value = getValue( { item: data } ) ?? '';
 	const [ customValidity, setCustomValidity ] =
 		useState<
 			React.ComponentProps<
@@ -93,24 +94,76 @@ export default function Integer< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) => {
-			onChange( {
-				// Do not convert an empty string or undefined to a number,
-				// otherwise there's a mismatch between the UI control (empty)
-				// and the data relied by onChange (0).
-				[ id ]: [ '', undefined ].includes( newValue )
-					? undefined
-					: Number( newValue ),
-			} );
+			onChange(
+				setValue( {
+					item: data,
+					// Do not convert an empty string or undefined to a number,
+					// otherwise there's a mismatch between the UI control (empty)
+					// and the data relied by onChange (0).
+					value: [ '', undefined ].includes( newValue )
+						? undefined
+						: Number( newValue ),
+				} )
+			);
+		},
+		[ data, onChange, setValue ]
+	);
+
+	const onChangeBetweenControls = useCallback(
+		( newValue: IntegerBetween ) => {
+			onChange(
+				setValue( {
+					item: data,
+					value: newValue,
+				} )
+			);
+		},
+		[ data, onChange, setValue ]
+	);
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: [ undefined, '', null ].includes( newValue )
+							? undefined
+							: Number( newValue ),
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
 		},
-		[ id, onChange ]
+		[ data, field, setValue ]
 	);
 
 	if ( operator === OPERATOR_BETWEEN ) {
+		let valueBetween: IntegerBetween = [ '', '' ];
+		if (
+			Array.isArray( value ) &&
+			value.length === 2 &&
+			value.every(
+				( element ) => typeof element === 'number' || element === ''
+			)
+		) {
+			valueBetween = value as IntegerBetween;
+		}
 		return (
 			<BetweenControls
-				id={ id }
-				value={ value }
-				onChange={ onChange }
+				value={ valueBetween }
+				onChange={ onChangeBetweenControls }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
 		);
@@ -119,27 +172,7 @@ export default function Integer< Item >( {
 	return (
 		<ValidatedNumberControl
 			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: [ undefined, '', null ].includes( newValue )
-							? undefined
-							: Number( newValue ),
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
-			} }
+			onValidate={ onValidateControl }
 			customValidity={ customValidity }
 			label={ label }
 			help={ description }