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

package/src/dataform-controls/array.tsx

@@ -1,13 +1,22 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import { FormTokenField } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { privateApis } from '@wordpress/components';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedFormTokenField } = unlock( privateApis );
 
 export default function ArrayControl< Item >( {
 	data,
@@ -15,71 +24,157 @@ export default function ArrayControl< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, elements } = field;
-	const value = field.getValue( { item: data } );
-
-	const findElementByValue = useCallback(
-		( suggestionValue: string ) => {
-			return elements?.find(
-				( suggestion ) => suggestion.value === suggestionValue
-			);
-		},
-		[ elements ]
-	);
+	const { label, placeholder, elements, getValue, setValue } = field;
+	const value = getValue( { item: data } );
 
-	const findElementByLabel = useCallback(
-		( suggestionLabel: string ) => {
-			return elements?.find(
-				( suggestion ) => suggestion.label === suggestionLabel
-			);
-		},
-		[ elements ]
-	);
+	const [ customValidity, setCustomValidity ] = useState<
+		| {
+				type: 'validating' | 'valid' | 'invalid';
+				message: string;
+		  }
+		| undefined
+	>( undefined );
 
-	// Ensure value is an array
-	const arrayValue = useMemo(
+	// Convert stored values to element objects for the token field
+	const arrayValueAsElements = useMemo(
 		() =>
 			Array.isArray( value )
 				? value.map( ( token ) => {
-						const tokenLabel = findElementByValue( token )?.label;
-						return tokenLabel || token;
+						const element = elements?.find(
+							( suggestion ) => suggestion.value === token
+						);
+						return element || { value: token, label: token };
 				  } )
 				: [],
-		[ value, findElementByValue ]
+		[ value, elements ]
 	);
 
-	const onChangeControl = useCallback(
-		( tokens: ( string | { value: string } )[] ) => {
-			// Convert TokenItem objects to strings
-			const stringTokens = tokens.map( ( token ) => {
-				if ( typeof token !== 'string' ) {
+	const validateTokens = useCallback(
+		( tokens: ( string | { value: string; label?: string } )[] ) => {
+			// Extract actual values from tokens for validation
+			const tokenValues = tokens.map( ( token ) => {
+				if ( typeof token === 'object' && 'value' in token ) {
 					return token.value;
 				}
+				return token;
+			} );
 
-				const tokenByLabel = findElementByLabel( token );
+			// First, check if elements validation is required and any tokens are invalid
+			if ( field.isValid?.elements && elements ) {
+				const invalidTokens = tokenValues.filter( ( tokenValue ) => {
+					return ! elements.some(
+						( element ) => element.value === tokenValue
+					);
+				} );
 
-				return tokenByLabel?.value || token;
-			} );
+				if ( invalidTokens.length > 0 ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message: sprintf(
+							/* translators: %s: list of invalid tokens */
+							_n(
+								'Please select from the available options: %s is invalid.',
+								'Please select from the available options: %s are invalid.',
+								invalidTokens.length
+							),
+							invalidTokens.join( ', ' )
+						),
+					} );
+					return;
+				}
+			}
+
+			// Then check custom validation if provided.
+			if ( field.isValid?.custom ) {
+				const result = field.isValid?.custom?.(
+					deepMerge(
+						data,
+						setValue( {
+							item: data,
+							value: tokenValues,
+						} ) as Partial< Item >
+					),
+					field
+				);
+
+				if ( result ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message: result,
+					} );
+					return;
+				}
+			}
+
+			// If no validation errors, clear custom validity
+			setCustomValidity( undefined );
+		},
+		[ elements, data, field, setValue ]
+	);
 
-			onChange( {
-				[ id ]: stringTokens,
+	const onChangeControl = useCallback(
+		( tokens: ( string | { value: string; label?: string } )[] ) => {
+			const valueTokens = tokens.map( ( token ) => {
+				if ( typeof token === 'object' && 'value' in token ) {
+					return token.value;
+				}
+				// If it's a string, it's either a new suggestion value or user input
+				return token;
 			} );
+
+			onChange( setValue( { item: data, value: valueTokens } ) );
 		},
-		[ id, onChange, findElementByLabel ]
+		[ onChange, setValue, data ]
 	);
 
 	return (
-		<FormTokenField
+		<ValidatedFormTokenField
+			required={ !! field.isValid?.required }
+			onValidate={ validateTokens }
+			customValidity={ customValidity }
 			label={ hideLabelFromVision ? undefined : label }
-			value={ arrayValue }
+			value={ arrayValueAsElements }
 			onChange={ onChangeControl }
 			placeholder={ placeholder }
-			suggestions={
-				elements?.map( ( suggestion ) => suggestion.label ) ?? []
-			}
+			suggestions={ elements?.map( ( element ) => element.value ) }
+			__experimentalValidateInput={ ( token: string ) => {
+				// If elements validation is required, check if token is valid
+				if ( field.isValid?.elements && elements ) {
+					return elements.some(
+						( element ) =>
+							element.value === token || element.label === token
+					);
+				}
+
+				// For non-elements validation, allow all tokens
+				return true;
+			} }
 			__experimentalExpandOnFocus={ elements && elements.length > 0 }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
+			__experimentalShowHowTo={ ! field.isValid?.elements }
+			displayTransform={ ( token: any ) => {
+				// For existing tokens (element objects), display their label
+				if ( typeof token === 'object' && 'label' in token ) {
+					return token.label;
+				}
+				// For suggestions (value strings), find the corresponding element and show its label
+				if ( typeof token === 'string' && elements ) {
+					const element = elements.find(
+						( el ) => el.value === token
+					);
+					return element?.label || token;
+				}
+				return token;
+			} }
+			__experimentalRenderItem={ ( { item }: { item: any } ) => {
+				// Custom rendering for suggestion items (item is a value string)
+				if ( typeof item === 'string' && elements ) {
+					const element = elements.find(
+						( el ) => el.value === item
+					);
+					return <span>{ element?.label || item }</span>;
+				}
+				return <span>{ item }</span>;
+			} }
 		/>
 	);
 }

package/src/dataform-controls/checkbox.tsx

@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,7 +23,7 @@ export default function Checkbox< Item >( {
 	data,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, getValue, label, description } = field;
+	const { getValue, setValue, label, description } = field;
 	const [ customValidity, setCustomValidity ] =
 		useState<
 			React.ComponentProps<
@@ -26,36 +31,48 @@ export default function Checkbox< Item >( {
 			>[ 'customValidity' ]
 		>( undefined );
 
+	const onChangeControl = useCallback( () => {
+		onChange(
+			setValue( { item: data, value: ! getValue( { item: data } ) } )
+		);
+	}, [ data, getValue, 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 (
 		<ValidatedCheckboxControl
 			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 }
 			hidden={ hideLabelFromVision }
 			label={ label }
 			help={ description }
 			checked={ getValue( { item: data } ) }
-			onChange={ () =>
-				onChange( { [ id ]: ! getValue( { item: data } ) } )
-			}
+			onChange={ onChangeControl }
 		/>
 	);
 }

package/src/dataform-controls/color.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { colord } from 'colord';
+import deepMerge from 'deepmerge';
 
 /**
  * WordPress dependencies
@@ -75,7 +76,7 @@ export default function Color< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
+	const { label, placeholder, description, setValue } = field;
 	const value = field.getValue( { item: data } ) || '';
 	const [ customValidity, setCustomValidity ] =
 		useState<
@@ -86,40 +87,48 @@ export default function Color< Item >( {
 
 	const handleColorChange = useCallback(
 		( colorObject: any ) => {
-			onChange( { [ id ]: colorObject.toHex() } );
+			onChange( setValue( { item: data, value: colorObject.toHex() } ) );
 		},
-		[ id, onChange ]
+		[ data, onChange, setValue ]
 	);
 
 	const handleInputChange = useCallback(
 		( newValue: string | undefined ) => {
-			onChange( { [ id ]: newValue || '' } );
+			onChange( setValue( { item: data, value: newValue || '' } ) );
 		},
-		[ id, onChange ]
+		[ 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 (
 		<ValidatedInputControl
 			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 }

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 }
 		/>