@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

package/src/dataform-controls/datetime.tsx

@@ -1,40 +1,37 @@
+/**
+ * External dependencies
+ */
+import { format, isValid as isValidDate } from 'date-fns';
+
 /**
  * WordPress dependencies
  */
 import {
 	BaseControl,
 	privateApis as componentsPrivateApis,
-	__experimentalInputControl as InputControl,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getDate, getSettings } from '@wordpress/date';
 
-/**
- * External dependencies
- */
-import { format, isValid } from 'date-fns';
-
 /**
  * Internal dependencies
  */
 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 RelativeDateControl from './utils/relative-date-control';
+import getCustomValidity from './utils/get-custom-validity';
 import { unlock } from '../lock-unlock';
 
-const { DateCalendar } = unlock( componentsPrivateApis );
+const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
 
 const parseDateTime = ( dateTimeString?: string ): Date | null => {
 	if ( ! dateTimeString ) {
 		return null;
 	}
 	const parsed = getDate( dateTimeString );
-	return parsed && isValid( parsed ) ? parsed : null;
+	return parsed && isValidDate( parsed ) ? parsed : null;
 };
 
 const formatDateTime = ( date?: Date | string ): string => {
@@ -48,28 +45,44 @@ const formatDateTime = ( date?: Date | string ): string => {
 	return format( date, "yyyy-MM-dd'T'HH:mm" );
 };
 
-function CalendarDateTimeControl( {
-	id,
-	value,
+function CalendarDateTimeControl< Item >( {
+	data,
+	field,
 	onChange,
-	label,
-	description,
 	hideLabelFromVision,
-}: {
-	id: string;
-	value: string | undefined;
-	onChange: ( value: string | undefined ) => void;
-	label: string;
-	description?: string;
-	hideLabelFromVision?: boolean;
-} ) {
+	validity,
+}: DataFormControlProps< Item > ) {
+	const { id, label, description, setValue, getValue, isValid } = field;
+	const fieldValue = getValue( { item: data } );
+	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
+
 	const [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {
 		const parsedDate = parseDateTime( value );
 		return parsedDate || new Date(); // Default to current month
 	} );
 
+	const inputControlRef = useRef< HTMLInputElement >( null );
+	const validationTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
+	const previousFocusRef = useRef< Element | null >( null );
+
+	const onChangeCallback = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	// Cleanup timeout on unmount
+	useEffect( () => {
+		return () => {
+			if ( validationTimeoutRef.current ) {
+				clearTimeout( validationTimeoutRef.current );
+			}
+		};
+	}, [] );
+
 	const onSelectDate = useCallback(
 		( newDate: Date | undefined | null ) => {
+			let dateTimeValue: string | undefined;
 			if ( newDate ) {
 				// Preserve time if it exists in current value, otherwise use current time
 				let finalDateTime = newDate;
@@ -86,13 +99,40 @@ function CalendarDateTimeControl( {
 					}
 				}
 
-				const dateTimeValue = finalDateTime.toISOString();
-				onChange( dateTimeValue );
+				dateTimeValue = finalDateTime.toISOString();
+				onChangeCallback( dateTimeValue );
+
+				// Clear any existing timeout
+				if ( validationTimeoutRef.current ) {
+					clearTimeout( validationTimeoutRef.current );
+				}
 			} else {
-				onChange( undefined );
+				onChangeCallback( undefined );
 			}
+			// Save the currently focused element
+			previousFocusRef.current =
+				inputControlRef.current &&
+				inputControlRef.current.ownerDocument.activeElement;
+
+			// Trigger validation display by simulating focus, blur, and changes.
+			// Use a timeout to ensure it runs after the value update.
+			validationTimeoutRef.current = setTimeout( () => {
+				if ( inputControlRef.current ) {
+					inputControlRef.current.focus();
+					inputControlRef.current.blur();
+					onChangeCallback( dateTimeValue );
+
+					// Restore focus to the previously focused element
+					if (
+						previousFocusRef.current &&
+						previousFocusRef.current instanceof HTMLElement
+					) {
+						previousFocusRef.current.focus();
+					}
+				}
+			}, 0 );
 		},
-		[ onChange, value ]
+		[ onChangeCallback, value ]
 	);
 
 	const handleManualDateTimeChange = useCallback(
@@ -100,7 +140,7 @@ function CalendarDateTimeControl( {
 			if ( newValue ) {
 				// Convert from datetime-local format to ISO string
 				const dateTime = new Date( newValue );
-				onChange( dateTime.toISOString() );
+				onChangeCallback( dateTime.toISOString() );
 
 				// Update calendar month to match
 				const parsedDate = parseDateTime( dateTime.toISOString() );
@@ -108,10 +148,10 @@ function CalendarDateTimeControl( {
 					setCalendarMonth( parsedDate );
 				}
 			} else {
-				onChange( undefined );
+				onChangeCallback( undefined );
 			}
 		},
-		[ onChange ]
+		[ onChangeCallback ]
 	);
 
 	const {
@@ -119,11 +159,16 @@ function CalendarDateTimeControl( {
 		l10n: { startOfWeek },
 	} = getSettings();
 
+	const displayLabel =
+		isValid?.required && ! hideLabelFromVision
+			? `${ label } (${ __( 'Required' ) })`
+			: label;
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
 			id={ id }
-			label={ label }
+			label={ displayLabel }
 			help={ description }
 			hideLabelFromVision={ hideLabelFromVision }
 		>
@@ -141,8 +186,11 @@ function CalendarDateTimeControl( {
 					weekStartsOn={ startOfWeek }
 				/>
 				{ /* Manual datetime input */ }
-				<InputControl
+				<ValidatedInputControl
+					ref={ inputControlRef }
 					__next40pxDefaultSize
+					required={ !! isValid?.required }
+					customValidity={ getCustomValidity( isValid, validity ) }
 					type="datetime-local"
 					label={ __( 'Date time' ) }
 					hideLabelFromVision
@@ -166,44 +214,28 @@ export default function DateTime< Item >( {
 	onChange,
 	hideLabelFromVision,
 	operator,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, description, getValue, setValue } = field;
-	const value = getValue( { item: data } );
-
-	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={ onChangeRelativeDateControl }
-				label={ label }
+				data={ data }
+				field={ field }
+				onChange={ onChange }
 				hideLabelFromVision={ hideLabelFromVision }
-				options={ TIME_UNITS_OPTIONS[ operator ] }
+				operator={ operator }
 			/>
 		);
 	}
 
 	return (
 		<CalendarDateTimeControl
-			id={ id }
-			value={ typeof value === 'string' ? value : undefined }
-			onChange={ onChangeCalendarDateTimeControl }
-			label={ label }
-			description={ description }
+			data={ data }
+			field={ field }
+			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
+			validity={ validity }
 		/>
 	);
 }

package/src/dataform-controls/email.tsx

@@ -18,6 +18,7 @@ export default function Email< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	return (
 		<ValidatedText
@@ -26,6 +27,7 @@ export default function Email< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				validity,
 				type: 'email',
 				prefix: (
 					<InputControlPrefixWrapper variant="icon">

package/src/dataform-controls/index.tsx

@@ -19,6 +19,7 @@ import email from './email';
 import telephone from './telephone';
 import url from './url';
 import integer from './integer';
+import number from './number';
 import radio from './radio';
 import select from './select';
 import text from './text';
@@ -28,6 +29,7 @@ import toggleGroup from './toggle-group';
 import array from './array';
 import color from './color';
 import password from './password';
+import hasElements from '../utils/has-elements';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
@@ -43,6 +45,7 @@ const FORM_CONTROLS: FormControls = {
 	telephone,
 	url,
 	integer,
+	number,
 	password,
 	radio,
 	select,
@@ -85,7 +88,7 @@ export function getControl< Item >(
 		return createConfiguredControl( field.Edit );
 	}
 
-	if ( field.elements && field.type !== 'array' ) {
+	if ( hasElements( field ) && field.type !== 'array' ) {
 		return getControlByType( 'select' );
 	}
 

package/src/dataform-controls/integer.tsx

@@ -1,185 +1,9 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
-/**
- * WordPress dependencies
- */
-import {
-	Flex,
-	BaseControl,
-	__experimentalNumberControl as NumberControl,
-	privateApis,
-} from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import { OPERATOR_BETWEEN } from '../constants';
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedNumberControl } = unlock( privateApis );
-
-type IntegerBetween = [ number | string, number | string ];
-
-function BetweenControls( {
-	value,
-	onChange,
-	hideLabelFromVision,
-}: {
-	value: IntegerBetween;
-	onChange: ( [ min, max ]: IntegerBetween ) => void;
-	hideLabelFromVision?: boolean;
-} ) {
-	const [ min = '', max = '' ] = value;
-
-	const onChangeMin = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( [ Number( newValue ), max ] ),
-		[ onChange, max ]
-	);
-
-	const onChangeMax = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( [ min, Number( newValue ) ] ),
-		[ onChange, min ]
-	);
-
-	return (
-		<BaseControl
-			__nextHasNoMarginBottom
-			help={ __( 'The max. value must be greater than the min. value.' ) }
-		>
-			<Flex direction="row" gap={ 4 }>
-				<NumberControl
-					label={ __( 'Min.' ) }
-					value={ min }
-					max={ max ? Number( max ) - 1 : undefined }
-					onChange={ onChangeMin }
-					__next40pxDefaultSize
-					hideLabelFromVision={ hideLabelFromVision }
-				/>
-				<NumberControl
-					label={ __( 'Max.' ) }
-					value={ max }
-					min={ min ? Number( min ) + 1 : undefined }
-					onChange={ onChangeMax }
-					__next40pxDefaultSize
-					hideLabelFromVision={ hideLabelFromVision }
-				/>
-			</Flex>
-		</BaseControl>
-	);
-}
-
-export default function Integer< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-	operator,
-}: DataFormControlProps< Item > ) {
-	const { label, description, getValue, setValue } = field;
-	const value = getValue( { item: data } ) ?? '';
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedNumberControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string | undefined ) => {
-			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 );
-		},
-		[ 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
-				value={ valueBetween }
-				onChange={ onChangeBetweenControls }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
+import ValidatedNumber from './utils/validated-number';
 
-	return (
-		<ValidatedNumberControl
-			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
-			label={ label }
-			help={ description }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
+export default function Number< Item >( props: DataFormControlProps< Item > ) {
+	return <ValidatedNumber { ...props } decimals={ 0 } />;
 }

package/src/dataform-controls/number.tsx

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedNumber from './utils/validated-number';
+
+export default function Number< Item >( props: DataFormControlProps< Item > ) {
+	// TODO: remove this hardcoded value when the decimal number is configurable
+	return <ValidatedNumber { ...props } decimals={ 2 } />;
+}

package/src/dataform-controls/password.tsx

@@ -16,6 +16,7 @@ export default function Password< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const [ isVisible, setIsVisible ] = useState( false );
 
@@ -30,6 +31,7 @@ export default function Password< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (
 					<Button

package/src/dataform-controls/radio.tsx

@@ -1,19 +1,16 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { privateApis, Spinner } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { unlock } from '../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
+import useElements from '../hooks/use-elements';
 
 const { ValidatedRadioControl } = unlock( privateApis );
 
@@ -22,15 +19,14 @@ export default function Radio< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { label, description, elements, getValue, setValue } = field;
+	const { label, description, getValue, setValue, isValid } = field;
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
 	const value = getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedRadioControl
-			>[ 'customValidity' ]
-		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -38,47 +34,20 @@ export default function Radio< Item >( {
 		[ data, onChange, setValue ]
 	);
 
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = field.isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: newValue,
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
-
-	if ( elements ) {
-		return (
-			<ValidatedRadioControl
-				required={ !! field.isValid?.required }
-				onValidate={ onValidateControl }
-				customValidity={ customValidity }
-				label={ label }
-				help={ description }
-				onChange={ onChangeControl }
-				options={ elements }
-				selected={ value }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
+	if ( isLoading ) {
+		return <Spinner />;
 	}
 
-	return null;
+	return (
+		<ValidatedRadioControl
+			required={ !! field.isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
+			label={ label }
+			help={ description }
+			onChange={ onChangeControl }
+			options={ elements }
+			selected={ value }
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
 }