@wordpress/dataviews 9.0.1-next.6f42e1382.0 → 9.1.1-next.f56bd8138.0

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 }

package/src/dataform-controls/radio.tsx

@@ -1,13 +1,21 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import { RadioControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedRadioControl } = unlock( privateApis );
 
 export default function Radio< Item >( {
 	data,
@@ -15,23 +23,57 @@ export default function Radio< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } );
+	const { label, description, elements, getValue, setValue } = field;
+	const value = getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedRadioControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			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;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
-	if ( field.elements ) {
+	if ( elements ) {
 		return (
-			<RadioControl
+			<ValidatedRadioControl
+				required={ !! field.isValid?.required }
+				onValidate={ onValidateControl }
+				customValidity={ customValidity }
 				label={ label }
+				help={ description }
 				onChange={ onChangeControl }
-				options={ field.elements }
+				options={ elements }
 				selected={ value }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>

package/src/dataform-controls/relative-date-control.tsx

@@ -20,10 +20,15 @@ import { __ } from '@wordpress/i18n';
  */
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 
+export type DateRelative = {
+	value?: string | number;
+	unit?: string;
+};
+
 interface RelativeDateControlProps {
 	id: string;
-	value: { value?: string | number; unit?: string };
-	onChange: ( value: any ) => void;
+	value: DateRelative;
+	onChange: ( args: DateRelative ) => void;
 	label: string;
 	hideLabelFromVision?: boolean;
 	options: { value: string; label: string }[];
@@ -58,18 +63,14 @@ export default function RelativeDateControl( {
 
 	const onChangeValue = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( {
-				[ id ]: { value: Number( newValue ), unit },
-			} ),
-		[ id, onChange, unit ]
+			onChange( { value: Number( newValue ), unit } ),
+		[ onChange, unit ]
 	);
 
 	const onChangeUnit = useCallback(
 		( newUnit: string | undefined ) =>
-			onChange( {
-				[ id ]: { value: relValue, unit: newUnit },
-			} ),
-		[ id, onChange, relValue ]
+			onChange( { value: relValue, unit: newUnit } ),
+		[ onChange, relValue ]
 	);
 
 	return (

package/src/dataform-controls/select.tsx

@@ -1,14 +1,22 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedSelectControl } = unlock( privateApis );
 
 export default function Select< Item >( {
 	data,
@@ -16,15 +24,47 @@ export default function Select< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, type } = field;
+	const { type, label, description, getValue, setValue } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedSelectControl
+			>[ 'customValidity' ]
+		>( undefined );
+
 	const isMultiple = type === 'array';
-	const value = field.getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
+	const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
+
 	const onChangeControl = useCallback(
 		( newValue: any ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			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;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
 	const fieldElements = field?.elements ?? [];
@@ -48,10 +88,13 @@ export default function Select< Item >( {
 			  ];
 
 	return (
-		<SelectControl
+		<ValidatedSelectControl
+			required={ !! field.isValid?.required }
+			onValidate={ onValidateControl }
+			customValidity={ customValidity }
 			label={ label }
 			value={ value }
-			help={ field.description }
+			help={ description }
 			options={ elements }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize

package/src/dataform-controls/telephone.tsx

@@ -1,6 +1,10 @@
 /**
  * WordPress dependencies
  */
+import {
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
 import { mobile } from '@wordpress/icons';
 
 /**
@@ -23,7 +27,11 @@ export default function Telephone< Item >( {
 				onChange,
 				hideLabelFromVision,
 				type: 'tel',
-				icon: mobile,
+				prefix: (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ mobile } />
+					</InputControlPrefixWrapper>
+				),
 			} }
 		/>
 	);

package/src/dataform-controls/text.tsx

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createElement } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -9,8 +14,20 @@ export default function Text< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	config,
 }: DataFormControlProps< Item > ) {
+	const { prefix, suffix } = config || {};
+
 	return (
-		<ValidatedText { ...{ data, field, onChange, hideLabelFromVision } } />
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				prefix: prefix ? createElement( prefix ) : undefined,
+				suffix: suffix ? createElement( suffix ) : undefined,
+			} }
+		/>
 	);
 }

package/src/dataform-controls/textarea.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -17,8 +22,10 @@ export default function Textarea< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	config,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
+	const { rows = 4 } = config || {};
+	const { label, placeholder, description, setValue } = field;
 	const value = field.getValue( { item: data } );
 	const [ customValidity, setCustomValidity ] =
 		useState<
@@ -29,40 +36,47 @@ export default function Textarea< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			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;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
 	return (
 		<ValidatedTextareaControl
 			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 );
-			} }
+			onValidate={ onValidateControl }
 			customValidity={ customValidity }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }
 			help={ description }
 			onChange={ onChangeControl }
+			rows={ rows }
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			hideLabelFromVision={ hideLabelFromVision }

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

@@ -1,16 +1,24 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
 import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
+	privateApis,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedToggleGroupControl } = unlock( privateApis );
 
 export default function ToggleGroup< Item >( {
 	data,
@@ -18,15 +26,44 @@ export default function ToggleGroup< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id } = field;
-	const value = field.getValue( { item: data } );
+	const { getValue, setValue } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedToggleGroupControl
+			>[ 'customValidity' ]
+		>( undefined );
+	const value = getValue( { item: data } );
 
 	const onChangeControl = useCallback(
 		( newValue: string | number | undefined ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			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;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
 	if ( field.elements ) {
@@ -34,7 +71,10 @@ export default function ToggleGroup< Item >( {
 			( el ) => el.value === value
 		);
 		return (
-			<ToggleGroupControl
+			<ValidatedToggleGroupControl
+				required={ !! field.isValid?.required }
+				onValidate={ onValidateControl }
+				customValidity={ customValidity }
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				isBlock
@@ -51,7 +91,7 @@ export default function ToggleGroup< Item >( {
 						value={ el.value }
 					/>
 				) ) }
-			</ToggleGroupControl>
+			</ValidatedToggleGroupControl>
 		);
 	}