@wordpress/dataviews 10.0.1-next.ff1cebbba.0 → 10.1.0

package/src/dataform-controls/date.tsx

@@ -1,3 +1,17 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import {
+	format,
+	isValid as isValidDate,
+	subMonths,
+	subDays,
+	subYears,
+	startOfMonth,
+	startOfYear,
+} from 'date-fns';
+
 /**
  * WordPress dependencies
  */
@@ -21,21 +35,6 @@ import { __ } from '@wordpress/i18n';
 import { getDate, getSettings } from '@wordpress/date';
 import { error as errorIcon } from '@wordpress/icons';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import {
-	format,
-	isValid,
-	subMonths,
-	subDays,
-	subYears,
-	startOfMonth,
-	startOfYear,
-} from 'date-fns';
-import deepMerge from 'deepmerge';
-
 /**
  * Internal dependencies
  */
@@ -46,7 +45,12 @@ import {
 	OPERATOR_BETWEEN,
 } from '../constants';
 import { unlock } from '../lock-unlock';
-import type { DataFormControlProps } from '../types';
+import type {
+	DataFormControlProps,
+	FieldValidity,
+	NormalizedField,
+} from '../types';
+import getCustomValidity from './utils/get-custom-validity';
 
 const { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );
 
@@ -136,7 +140,7 @@ const parseDate = ( dateString?: string ): Date | null => {
 		return null;
 	}
 	const parsed = getDate( dateString );
-	return parsed && isValid( parsed ) ? parsed : null;
+	return parsed && isValidDate( parsed ) ? parsed : null;
 };
 
 const formatDate = ( date?: Date | string ): string => {
@@ -147,19 +151,15 @@ const formatDate = ( date?: Date | string ): string => {
 };
 
 function ValidatedDateControl< Item >( {
-	value,
 	field,
-	data,
-	setValue,
+	validity,
 	inputRefs,
 	isTouched,
 	setIsTouched,
 	children,
 }: {
-	value: any;
-	field: any;
-	data: Item;
-	setValue: any;
+	field: NormalizedField< Item >;
+	validity?: FieldValidity;
 	inputRefs:
 		| React.RefObject< HTMLInputElement >
 		| React.RefObject< HTMLInputElement >[];
@@ -167,62 +167,43 @@ function ValidatedDateControl< Item >( {
 	setIsTouched: ( touched: boolean ) => void;
 	children: React.ReactNode;
 } ) {
+	const { isValid } = field;
 	const [ customValidity, setCustomValidity ] = useState<
-		{ type: 'invalid'; message: string } | undefined
+		| { type: 'valid' | 'validating' | 'invalid'; message?: string }
+		| undefined
 	>( undefined );
 
-	const onValidate = useCallback(
-		( newValue: any ) => {
-			// Check custom validation (only if value exists)
-			if ( newValue ) {
-				const customMessage = field.isValid?.custom?.(
-					deepMerge(
-						data,
-						setValue( {
-							item: data,
-							value: newValue,
-						} ) as Partial< Item >
-					),
-					field
-				);
-
-				if ( customMessage ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message: customMessage,
-					} );
-					return;
-				}
-			}
-
-			// Check HTML5 validity on all refs
-			const refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];
-			for ( const ref of refs ) {
-				const input = ref.current;
-				if ( input && ! input.validity.valid ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message: input.validationMessage,
-					} );
-					return;
-				}
+	const validateRefs = useCallback( () => {
+		// Check HTML5 validity on all refs
+		const refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];
+		for ( const ref of refs ) {
+			const input = ref.current;
+			if ( input && ! input.validity.valid ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message: input.validationMessage,
+				} );
+				return;
 			}
+		}
 
-			// No errors
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue, inputRefs ]
-	);
+		// No errors
+		setCustomValidity( undefined );
+	}, [ inputRefs ] );
 
 	useEffect( () => {
 		if ( isTouched ) {
 			const timeoutId = setTimeout( () => {
-				onValidate( value );
+				if ( validity ) {
+					setCustomValidity( getCustomValidity( isValid, validity ) );
+				} else {
+					validateRefs();
+				}
 			}, 0 );
 			return () => clearTimeout( timeoutId );
 		}
 		return undefined;
-	}, [ isTouched, value, onValidate ] );
+	}, [ isTouched, isValid, validity, validateRefs ] );
 
 	const onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {
 		if ( isTouched ) {
@@ -247,7 +228,12 @@ function ValidatedDateControl< Item >( {
 					<p
 						className={ clsx(
 							'components-validated-control__indicator',
-							'is-invalid'
+							customValidity.type === 'invalid'
+								? 'is-invalid'
+								: undefined,
+							customValidity.type === 'valid'
+								? 'is-valid'
+								: undefined
 						) }
 					>
 						<Icon
@@ -269,8 +255,9 @@ function CalendarDateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, setValue, getValue } = field;
+	const { id, label, setValue, getValue, isValid } = field;
 	const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
 		null
 	);
@@ -336,16 +323,14 @@ function CalendarDateControl< Item >( {
 		l10n: { startOfWeek },
 	} = getSettings();
 
-	const displayLabel = field.isValid?.required
+	const displayLabel = isValid?.required
 		? `${ label } (${ __( 'Required' ) })`
 		: label;
 
 	return (
 		<ValidatedDateControl
-			value={ value }
 			field={ field }
-			data={ data }
-			setValue={ setValue }
+			validity={ validity }
 			inputRefs={ validityTargetRef }
 			isTouched={ isTouched }
 			setIsTouched={ setIsTouched }
@@ -424,6 +409,7 @@ function CalendarDateRangeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const { id, label, getValue, setValue } = field;
 	let value: DateRange;
@@ -543,10 +529,8 @@ function CalendarDateRangeControl< Item >( {
 
 	return (
 		<ValidatedDateControl
-			value={ value }
 			field={ field }
-			data={ data }
-			setValue={ setValue }
+			validity={ validity }
 			inputRefs={ [ fromInputRef, toInputRef ] }
 			isTouched={ isTouched }
 			setIsTouched={ setIsTouched }
@@ -639,6 +623,7 @@ export default function DateControl< Item >( {
 	onChange,
 	hideLabelFromVision,
 	operator,
+	validity,
 }: DataFormControlProps< Item > ) {
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
@@ -660,6 +645,7 @@ export default function DateControl< Item >( {
 				field={ field }
 				onChange={ onChange }
 				hideLabelFromVision={ hideLabelFromVision }
+				validity={ validity }
 			/>
 		);
 	}
@@ -670,6 +656,7 @@ export default function DateControl< Item >( {
 			field={ field }
 			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
+			validity={ validity }
 		/>
 	);
 }

package/src/dataform-controls/datetime.tsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import deepMerge from 'deepmerge';
-import { format, isValid } from 'date-fns';
+import { format, isValid as isValidDate } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -22,6 +21,7 @@ import { getDate, getSettings } from '@wordpress/date';
 import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 import RelativeDateControl from './utils/relative-date-control';
+import getCustomValidity from './utils/get-custom-validity';
 import { unlock } from '../lock-unlock';
 
 const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
@@ -31,7 +31,7 @@ const parseDateTime = ( dateTimeString?: string ): Date | null => {
 		return null;
 	}
 	const parsed = getDate( dateTimeString );
-	return parsed && isValid( parsed ) ? parsed : null;
+	return parsed && isValidDate( parsed ) ? parsed : null;
 };
 
 const formatDateTime = ( date?: Date | string ): string => {
@@ -50,8 +50,9 @@ function CalendarDateTimeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, description, setValue, getValue } = field;
+	const { id, label, description, setValue, getValue, isValid } = field;
 	const fieldValue = getValue( { item: data } );
 	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
 
@@ -60,13 +61,6 @@ function CalendarDateTimeControl< Item >( {
 		return parsedDate || new Date(); // Default to current month
 	} );
 
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedInputControl
-			>[ 'customValidity' ]
-		>( undefined );
-
 	const inputControlRef = useRef< HTMLInputElement >( null );
 	const validationTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
 	const previousFocusRef = useRef< Element | null >( null );
@@ -86,32 +80,6 @@ function CalendarDateTimeControl< Item >( {
 		};
 	}, [] );
 
-	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 ]
-	);
-
 	const onSelectDate = useCallback(
 		( newDate: Date | undefined | null ) => {
 			let dateTimeValue: string | undefined;
@@ -133,7 +101,6 @@ function CalendarDateTimeControl< Item >( {
 
 				dateTimeValue = finalDateTime.toISOString();
 				onChangeCallback( dateTimeValue );
-				onValidateControl( dateTimeValue );
 
 				// Clear any existing timeout
 				if ( validationTimeoutRef.current ) {
@@ -141,7 +108,6 @@ function CalendarDateTimeControl< Item >( {
 				}
 			} else {
 				onChangeCallback( undefined );
-				onValidateControl( undefined );
 			}
 			// Save the currently focused element
 			previousFocusRef.current =
@@ -155,7 +121,6 @@ function CalendarDateTimeControl< Item >( {
 					inputControlRef.current.focus();
 					inputControlRef.current.blur();
 					onChangeCallback( dateTimeValue );
-					onValidateControl( dateTimeValue );
 
 					// Restore focus to the previously focused element
 					if (
@@ -167,7 +132,7 @@ function CalendarDateTimeControl< Item >( {
 				}
 			}, 0 );
 		},
-		[ onChangeCallback, value, onValidateControl ]
+		[ onChangeCallback, value ]
 	);
 
 	const handleManualDateTimeChange = useCallback(
@@ -195,7 +160,7 @@ function CalendarDateTimeControl< Item >( {
 	} = getSettings();
 
 	const displayLabel =
-		field.isValid?.required && ! hideLabelFromVision
+		isValid?.required && ! hideLabelFromVision
 			? `${ label } (${ __( 'Required' ) })`
 			: label;
 
@@ -224,9 +189,8 @@ function CalendarDateTimeControl< Item >( {
 				<ValidatedInputControl
 					ref={ inputControlRef }
 					__next40pxDefaultSize
-					required={ !! field.isValid?.required }
-					onValidate={ onValidateControl }
-					customValidity={ customValidity }
+					required={ !! isValid?.required }
+					customValidity={ getCustomValidity( isValid, validity ) }
 					type="datetime-local"
 					label={ __( 'Date time' ) }
 					hideLabelFromVision
@@ -250,6 +214,7 @@ export default function DateTime< Item >( {
 	onChange,
 	hideLabelFromVision,
 	operator,
+	validity,
 }: DataFormControlProps< Item > ) {
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
@@ -270,6 +235,7 @@ export default function DateTime< Item >( {
 			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

@@ -29,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 > >;
@@ -87,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/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 }
+		/>
+	);
 }

package/src/dataform-controls/select.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 useElements from '../hooks/use-elements';
 import { unlock } from '../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
 
 const { ValidatedSelectControl } = unlock( privateApis );
 
@@ -22,14 +19,9 @@ export default function Select< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { type, label, description, getValue, setValue } = field;
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedSelectControl
-			>[ 'customValidity' ]
-		>( undefined );
+	const { type, label, description, getValue, setValue, isValid } = field;
 
 	const isMultiple = type === 'array';
 	const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
@@ -40,39 +32,19 @@ export default function Select< 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 ]
-	);
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
 
-	const elements = field?.elements ?? [];
+	if ( isLoading ) {
+		return <Spinner />;
+	}
 
 	return (
 		<ValidatedSelectControl
 			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			value={ value }
 			help={ description }

package/src/dataform-controls/telephone.tsx

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

package/src/dataform-controls/text.tsx

@@ -15,6 +15,7 @@ export default function Text< Item >( {
 	onChange,
 	hideLabelFromVision,
 	config,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const { prefix, suffix } = config || {};
 
@@ -25,6 +26,7 @@ export default function Text< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				validity,
 				prefix: prefix ? createElement( prefix ) : undefined,
 				suffix: suffix ? createElement( suffix ) : undefined,
 			} }