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

package/src/dataform-controls/textarea.tsx

@@ -1,19 +1,15 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { unlock } from '../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
 
 const { ValidatedTextareaControl } = unlock( privateApis );
 
@@ -23,16 +19,11 @@ export default function Textarea< Item >( {
 	onChange,
 	hideLabelFromVision,
 	config,
+	validity,
 }: DataFormControlProps< Item > ) {
 	const { rows = 4 } = config || {};
-	const { label, placeholder, description, setValue } = field;
+	const { label, placeholder, description, setValue, isValid } = field;
 	const value = field.getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedTextareaControl
-			>[ 'customValidity' ]
-		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -40,37 +31,10 @@ export default function Textarea< 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 ]
-	);
-
 	return (
 		<ValidatedTextareaControl
-			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			required={ !! isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }

package/src/dataform-controls/toggle-group.tsx

@@ -1,22 +1,20 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import {
 	privateApis,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	Spinner,
 } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+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 { ValidatedToggleGroupControl } = unlock( privateApis );
 
@@ -25,14 +23,9 @@ export default function ToggleGroup< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { getValue, setValue } = field;
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedToggleGroupControl
-			>[ 'customValidity' ]
-		>( undefined );
+	const { getValue, setValue, isValid } = field;
 	const value = getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -40,60 +33,41 @@ export default function ToggleGroup< Item >( {
 			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: newValue,
-					} ) as Partial< Item >
-				),
-				field
-			);
 
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
 
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
+	if ( isLoading ) {
+		return <Spinner />;
+	}
 
-	if ( field.elements ) {
-		const selectedOption = field.elements.find(
-			( el ) => el.value === value
-		);
-		return (
-			<ValidatedToggleGroupControl
-				required={ !! field.isValid?.required }
-				onValidate={ onValidateControl }
-				customValidity={ customValidity }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				isBlock
-				label={ field.label }
-				help={ selectedOption?.description || field.description }
-				onChange={ onChangeControl }
-				value={ value }
-				hideLabelFromVision={ hideLabelFromVision }
-			>
-				{ field.elements.map( ( el ) => (
-					<ToggleGroupControlOption
-						key={ el.value }
-						label={ el.label }
-						value={ el.value }
-					/>
-				) ) }
-			</ValidatedToggleGroupControl>
-		);
+	if ( elements.length === 0 ) {
+		return null;
 	}
 
-	return null;
+	const selectedOption = elements.find( ( el ) => el.value === value );
+	return (
+		<ValidatedToggleGroupControl
+			required={ !! field.isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			isBlock
+			label={ field.label }
+			help={ selectedOption?.description || field.description }
+			onChange={ onChangeControl }
+			value={ value }
+			hideLabelFromVision={ hideLabelFromVision }
+		>
+			{ elements.map( ( el ) => (
+				<ToggleGroupControlOption
+					key={ el.value }
+					label={ el.label }
+					value={ el.value }
+				/>
+			) ) }
+		</ValidatedToggleGroupControl>
+	);
 }

package/src/dataform-controls/toggle.tsx

@@ -1,19 +1,15 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { unlock } from '../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
 
 const { ValidatedToggleControl } = unlock( privateApis );
 
@@ -22,14 +18,9 @@ export default function Toggle< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { label, description, getValue, setValue } = field;
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedToggleControl
-			>[ 'customValidity' ]
-		>( undefined );
+	const { label, description, getValue, setValue, isValid } = field;
 
 	const onChangeControl = useCallback( () => {
 		onChange(
@@ -37,37 +28,10 @@ export default function Toggle< Item >( {
 		);
 	}, [ onChange, setValue, data, getValue ] );
 
-	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 ]
-	);
-
 	return (
 		<ValidatedToggleControl
-			required={ !! field.isValid.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			required={ !! isValid.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }

package/src/dataform-controls/url.tsx

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

package/src/dataform-controls/utils/get-custom-validity.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import type { Rules, FieldValidity } from '../../types';
+
+export default function getCustomValidity< Item >(
+	isValid: Rules< Item >,
+	validity: FieldValidity | undefined
+) {
+	let customValidity;
+	if ( isValid?.required && validity?.required ) {
+		// If the consumer provides a message for required,
+		// use it instead of the native built-in message.
+		customValidity = validity?.required?.message
+			? validity.required
+			: undefined;
+	} else if ( isValid?.elements && validity?.elements ) {
+		customValidity = validity.elements;
+	} else if ( validity?.custom ) {
+		customValidity = validity.custom;
+	}
+
+	return customValidity;
+}

package/src/dataform-controls/utils/validated-input.tsx

@@ -1,19 +1,15 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../../types';
 import { unlock } from '../../lock-unlock';
+import getCustomValidity from './get-custom-validity';
 
 const { ValidatedInputControl } = unlock( privateApis );
 
@@ -41,16 +37,11 @@ export default function ValidatedText< Item >( {
 	type,
 	prefix,
 	suffix,
+	validity,
 }: DataFormValidatedTextControlProps< Item > ) {
 	const { label, placeholder, description, getValue, setValue, isValid } =
 		field;
 	const value = getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedInputControl
-			>[ 'customValidity' ]
-		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -63,37 +54,10 @@ export default function ValidatedText< Item >( {
 		[ data, setValue, onChange ]
 	);
 
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: newValue,
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, isValid, setValue ]
-	);
-
 	return (
 		<ValidatedInputControl
 			required={ !! isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }

package/src/dataform-controls/utils/validated-number.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
 /**
  * WordPress dependencies
  */
@@ -12,7 +7,7 @@ import {
 	__experimentalNumberControl as NumberControl,
 	privateApis,
 } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -21,6 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { OPERATOR_BETWEEN } from '../../constants';
 import type { DataFormControlProps } from '../../types';
 import { unlock } from '../../lock-unlock';
+import getCustomValidity from './get-custom-validity';
 
 const { ValidatedNumberControl } = unlock( privateApis );
 
@@ -103,16 +99,11 @@ export default function ValidatedNumber< Item >( {
 	hideLabelFromVision,
 	operator,
 	decimals,
+	validity,
 }: DataFormValidatedNumberControlProps< Item > ) {
 	const step = Math.pow( 10, Math.abs( decimals ) * -1 );
-	const { label, description, getValue, setValue } = field;
+	const { label, description, getValue, setValue, isValid } = field;
 	const value = getValue( { item: data } ) ?? '';
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedNumberControl
-			>[ 'customValidity' ]
-		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) => {
@@ -143,34 +134,6 @@ export default function ValidatedNumber< Item >( {
 		[ 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: NumberBetween = [ '', '' ];
 		if (
@@ -194,9 +157,8 @@ export default function ValidatedNumber< Item >( {
 
 	return (
 		<ValidatedNumberControl
-			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
+			required={ !! isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			help={ description }
 			value={ value }

package/src/dataform-layouts/card/index.tsx

@@ -127,6 +127,7 @@ export default function FormCardField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
@@ -191,6 +192,7 @@ export default function FormCardField< Item >( {
 							data={ data }
 							form={ form }
 							onChange={ onChange }
+							validity={ validity?.children }
 						/>
 					</CardBody>
 				) }
@@ -242,6 +244,7 @@ export default function FormCardField< Item >( {
 						hideLabelFromVision={
 							hideLabelFromVision || withHeader
 						}
+						validity={ validity }
 					/>
 				</CardBody>
 			) }

package/src/dataform-layouts/data-form-layout.tsx

@@ -7,7 +7,13 @@ import { useContext, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { Form, FormField, SimpleFormField } from '../types';
+import type {
+	FieldValidity,
+	Form,
+	FormField,
+	FormValidity,
+	SimpleFormField,
+} from '../types';
 import { getFormFieldLayout } from './index';
 import DataFormContext from '../components/dataform-context';
 import { isCombinedField } from './is-combined-field';
@@ -23,20 +29,24 @@ export function DataFormLayout< Item >( {
 	data,
 	form,
 	onChange,
+	validity,
 	children,
 	as,
 }: {
 	data: Item;
 	form: Form;
 	onChange: ( value: any ) => void;
+	validity?: FormValidity;
 	children?: (
 		FieldLayout: ( props: {
 			data: Item;
 			field: FormField;
 			onChange: ( value: any ) => void;
 			hideLabelFromVision?: boolean;
+			validity?: FieldValidity;
 		} ) => React.JSX.Element | null,
-		field: FormField
+		childField: FormField,
+		childFieldValidity?: FieldValidity
 	) => React.JSX.Element;
 	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
@@ -84,7 +94,11 @@ export function DataFormLayout< Item >( {
 				}
 
 				if ( children ) {
-					return children( FieldLayout, formField );
+					return children(
+						FieldLayout,
+						formField,
+						validity?.[ formField.id ]
+					);
 				}
 
 				return (
@@ -93,6 +107,7 @@ export function DataFormLayout< Item >( {
 						data={ data }
 						field={ formField }
 						onChange={ onChange }
+						validity={ validity?.[ formField.id ] }
 					/>
 				);
 			} ) }

package/src/dataform-layouts/panel/dropdown.tsx

@@ -16,7 +16,13 @@ import { closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import type { Form, FormField, NormalizedField } from '../../types';
+import type {
+	FieldValidity,
+	Form,
+	FormField,
+	FormValidity,
+	NormalizedField,
+} from '../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
 import { DEFAULT_LAYOUT } from '../normalize-form-fields';
@@ -55,21 +61,23 @@ function DropdownHeader( {
 }
 
 function PanelDropdown< Item >( {
-	fieldDefinition,
-	summaryFields,
-	popoverAnchor,
-	labelPosition = 'side',
 	data,
-	onChange,
 	field,
+	onChange,
+	validity,
+	labelPosition = 'side',
+	summaryFields,
+	fieldDefinition,
+	popoverAnchor,
 }: {
-	fieldDefinition: NormalizedField< Item >;
-	summaryFields: NormalizedField< Item >[];
-	popoverAnchor: HTMLElement | null;
-	labelPosition: 'side' | 'top' | 'none';
 	data: Item;
-	onChange: ( value: any ) => void;
 	field: FormField;
+	onChange: ( value: any ) => void;
+	validity?: FieldValidity;
+	labelPosition: 'side' | 'top' | 'none';
+	summaryFields: NormalizedField< Item >[];
+	fieldDefinition: NormalizedField< Item >;
+	popoverAnchor: HTMLElement | null;
 } ) {
 	const fieldLabel = isCombinedField( field )
 		? field.label
@@ -85,6 +93,17 @@ function PanelDropdown< Item >( {
 		} ),
 		[ field ]
 	);
+	const formValidity = useMemo( (): FormValidity => {
+		if ( validity === undefined ) {
+			return undefined;
+		}
+
+		if ( isCombinedField( field ) ) {
+			return validity?.children;
+		}
+
+		return { [ field.id ]: validity };
+	}, [ validity, field ] );
 
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
@@ -127,16 +146,18 @@ function PanelDropdown< Item >( {
 						data={ data }
 						form={ form }
 						onChange={ onChange }
+						validity={ formValidity }
 					>
-						{ ( FieldLayout, nestedField ) => (
+						{ ( FieldLayout, childField, childFieldValidity ) => (
 							<FieldLayout
-								key={ nestedField.id }
+								key={ childField.id }
 								data={ data }
-								field={ nestedField }
+								field={ childField }
 								onChange={ onChange }
 								hideLabelFromVision={
 									( form?.fields ?? [] ).length < 2
 								}
+								validity={ childFieldValidity }
 							/>
 						) }
 					</DataFormLayout>