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

package/src/components/dataviews/stories/fixtures.tsx

@@ -25,8 +25,10 @@ export type Theme = {
 
 export type SpaceObject = {
 	id: number;
-	title: string;
-	description: string;
+	name: {
+		title: string;
+		description: string;
+	};
 	image: string;
 	type: string;
 	isPlanet: boolean;
@@ -40,9 +42,11 @@ export type SpaceObject = {
 export const data: SpaceObject[] = [
 	{
 		id: 1,
-		title: 'Moon',
-		description:
-			'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.',
+		name: {
+			title: 'Moon',
+			description:
+				"The Moon is Earth's only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.",
+		},
 		image: 'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -54,8 +58,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 2,
-		title: 'Io',
-		description: 'Moon of Jupiter',
+		name: {
+			title: 'Io',
+			description: 'Moon of Jupiter',
+		},
 		image: 'https://live.staticflickr.com/5482/9460973502_07e8ab81fe_z.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -67,8 +73,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 3,
-		title: 'Europa',
-		description: 'Moon of Jupiter',
+		name: {
+			title: 'Europa',
+			description: 'Moon of Jupiter',
+		},
 		image: 'https://live.staticflickr.com/65535/31499273012_baf5f38cc1_z.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -80,8 +88,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 4,
-		title: 'Ganymede',
-		description: 'Largest moon of Jupiter',
+		name: {
+			title: 'Ganymede',
+			description: 'Largest moon of Jupiter',
+		},
 		image: 'https://live.staticflickr.com/7816/33436473218_a836235935_k.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -93,8 +103,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 5,
-		title: 'Callisto',
-		description: 'Outermost Galilean moon of Jupiter',
+		name: {
+			title: 'Callisto',
+			description: 'Outermost Galilean moon of Jupiter',
+		},
 		image: 'https://live.staticflickr.com/804/27604150528_4512448a9c_c.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -106,8 +118,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 6,
-		title: 'Amalthea',
-		description: 'Small irregular moon of Jupiter',
+		name: {
+			title: 'Amalthea',
+			description: 'Small irregular moon of Jupiter',
+		},
 		image: 'https://upload.wikimedia.org/wikipedia/commons/6/62/Amalthea.gif',
 		type: 'Satellite',
 		isPlanet: false,
@@ -119,8 +133,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 7,
-		title: 'Himalia',
-		description: 'Largest irregular moon of Jupiter',
+		name: {
+			title: 'Himalia',
+			description: 'Largest irregular moon of Jupiter',
+		},
 		image: 'https://upload.wikimedia.org/wikipedia/commons/c/c2/Cassini-Huygens_Image_of_Himalia.png',
 		type: 'Satellite',
 		isPlanet: false,
@@ -132,8 +148,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 8,
-		title: 'Neptune',
-		description: 'Ice giant in the Solar system',
+		name: {
+			title: 'Neptune',
+			description: 'Ice giant in the Solar system',
+		},
 		image: 'https://live.staticflickr.com/65535/29523683990_000ff4720c_z.jpg',
 		type: 'Ice giant',
 		isPlanet: true,
@@ -145,8 +163,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 9,
-		title: 'Triton',
-		description: 'Largest moon of Neptune',
+		name: {
+			title: 'Triton',
+			description: 'Largest moon of Neptune',
+		},
 		image: 'https://live.staticflickr.com/65535/50728384241_02c5126c30_h.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -158,8 +178,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 10,
-		title: 'Nereid',
-		description: 'Irregular moon of Neptune',
+		name: {
+			title: 'Nereid',
+			description: 'Irregular moon of Neptune',
+		},
 		image: 'https://upload.wikimedia.org/wikipedia/commons/b/b0/Nereid-Voyager2.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -171,8 +193,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 11,
-		title: 'Proteus',
-		description: 'Second-largest moon of Neptune',
+		name: {
+			title: 'Proteus',
+			description: 'Second-largest moon of Neptune',
+		},
 		image: 'https://live.staticflickr.com/65535/50727825808_bf427e007b_c.jpg',
 		type: 'Satellite',
 		isPlanet: false,
@@ -184,8 +208,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 12,
-		title: 'Mercury',
-		description: 'Terrestrial planet in the Solar system',
+		name: {
+			title: 'Mercury',
+			description: 'Terrestrial planet in the Solar system',
+		},
 		image: 'https://live.staticflickr.com/813/40199101735_e5e92ffd11_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
@@ -197,8 +223,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 13,
-		title: 'Venus',
-		description: 'La planète Vénus',
+		name: {
+			title: 'Venus',
+			description: 'La planète Vénus',
+		},
 		image: 'https://live.staticflickr.com/8025/7544560662_900e717727_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
@@ -210,8 +238,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 14,
-		title: 'Earth',
-		description: 'Terrestrial planet in the Solar system',
+		name: {
+			title: 'Earth',
+			description: 'Terrestrial planet in the Solar system',
+		},
 		image: 'https://live.staticflickr.com/3762/9460163562_964fe6af07_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
@@ -223,8 +253,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 15,
-		title: 'Mars',
-		description: 'Terrestrial planet in the Solar system',
+		name: {
+			title: 'Mars',
+			description: 'Terrestrial planet in the Solar system',
+		},
 		image: 'https://live.staticflickr.com/8151/7651156426_e047f4d219_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
@@ -236,8 +268,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 16,
-		title: 'Jupiter',
-		description: 'Gas giant in the Solar system',
+		name: {
+			title: 'Jupiter',
+			description: 'Gas giant in the Solar system',
+		},
 		image: 'https://staging-jubilee.flickr.com/2853/9458010071_6e6fc41408_z.jpg',
 		type: 'Gas giant',
 		isPlanet: true,
@@ -249,8 +283,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 17,
-		title: 'Saturn',
-		description: 'Gas giant in the Solar system',
+		name: {
+			title: 'Saturn',
+			description: 'Gas giant in the Solar system',
+		},
 		image: 'https://live.staticflickr.com/5524/9464658509_fc2d83dff5_z.jpg',
 		type: 'Gas giant',
 		isPlanet: true,
@@ -262,8 +298,10 @@ export const data: SpaceObject[] = [
 	},
 	{
 		id: 18,
-		title: 'Uranus',
-		description: 'Ice giant in the Solar system',
+		name: {
+			title: 'Uranus',
+			description: 'Ice giant in the Solar system',
+		},
 		image: 'https://live.staticflickr.com/65535/5553350875_3072df91e2_c.jpg',
 		type: 'Ice giant',
 		isPlanet: true,
@@ -722,7 +760,7 @@ export const actions: Action< SpaceObject >[] = [
 			return (
 				<VStack spacing="5">
 					<Text>
-						{ `Are you sure you want to delete "${ items[ 0 ].title }"?` }
+						{ `Are you sure you want to delete "${ items[ 0 ].name.title }"?` }
 					</Text>
 					<HStack justify="right">
 						<Button
@@ -777,6 +815,15 @@ export const fields: Field< SpaceObject >[] = [
 		filterBy: {
 			operators: [ 'contains', 'notContains', 'startsWith' ],
 		},
+		isValid: {
+			required: true,
+		},
+		getValue: ( { item } ) => item.name.title,
+		setValue: ( { value } ) => ( {
+			name: {
+				title: value,
+			},
+		} ),
 	},
 	{
 		id: 'date',
@@ -806,6 +853,9 @@ export const fields: Field< SpaceObject >[] = [
 		id: 'isPlanet',
 		label: 'Is Planet',
 		type: 'boolean',
+		setValue: ( { value } ) => ( {
+			isPlanet: value === 'true',
+		} ),
 		elements: [
 			{ value: true, label: 'True' },
 			{ value: false, label: 'False' },
@@ -823,7 +873,15 @@ export const fields: Field< SpaceObject >[] = [
 		type: 'text',
 		enableSorting: false,
 		enableGlobalSearch: true,
-		filterBy: false,
+		filterBy: {
+			operators: [ 'contains', 'notContains', 'startsWith' ],
+		},
+		getValue: ( { item } ) => item.name.description,
+		setValue: ( { value } ) => ( {
+			name: {
+				description: value,
+			},
+		} ),
 	},
 	{
 		label: 'Email',

package/src/components/dataviews/stories/index.story.tsx

@@ -96,7 +96,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 					onClick={ ( e ) => {
 						e.stopPropagation();
 						// eslint-disable-next-line no-alert
-						alert( 'Clicked: ' + item.title );
+						alert( 'Clicked: ' + item.name.title );
 					} }
 					{ ...props }
 				/>

package/src/components/dataviews-filters/input-widget.tsx

@@ -32,13 +32,52 @@ export default function InputWidget( {
 	const currentFilter = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
-
-	const field = fields.find( ( f ) => f.id === filter.field );
 	const currentValue = getCurrentValue( filter, currentFilter );
+
+	/*
+	 * We are reusing the field.Edit component for filters. By doing so,
+	 * we get for free a filter control specific to the field type
+	 * and other aspects of the field API (Edit control configuration, etc.).
+	 *
+	 * This approach comes with an issue: the field.Edit controls work with getValue
+	 * and setValue methods, which take an item (Item) as parameter. But, at this point,
+	 * we don't have an item and we don't know how to create one, either.
+	 *
+	 * So, what we do is to prepare the data and the relevant field configuration
+	 * as if Item was a plain object whose keys are the field ids:
+	 *
+	 * {
+	 *   [ fieldOne.id ]: value,
+	 *   [ fieldTwo.id ]: value,
+	 * }
+	 *
+	 */
+	const field = useMemo( () => {
+		const currentField = fields.find( ( f ) => f.id === filter.field );
+		if ( currentField ) {
+			return {
+				...currentField,
+				// Deactivate validation for filters.
+				isValid: {
+					required: false,
+					custom: () => null,
+				},
+				// Configure getValue/setValue as if Item was a plain object.
+				getValue: ( { item }: { item: any } ) =>
+					item[ currentField.id ],
+				setValue: ( { value }: { value: any } ) => ( {
+					[ currentField.id ]: value,
+				} ),
+			};
+		}
+		return currentField;
+	}, [ fields, filter.field ] );
+
 	const data = useMemo( () => {
 		return ( view.filters ?? [] ).reduce(
-			( acc, f ) => {
-				acc[ f.field ] = f.value;
+			( acc, activeFilter ) => {
+				// We can now assume the field is stored as a Item prop.
+				acc[ activeFilter.field ] = activeFilter.value;
 				return acc;
 			},
 			{} as Record< string, any >
@@ -49,7 +88,7 @@ export default function InputWidget( {
 		if ( ! field || ! currentFilter ) {
 			return;
 		}
-		const nextValue = updatedData[ field.id ];
+		const nextValue = field.getValue( { item: updatedData } );
 		if ( fastDeepEqual( nextValue, currentValue ) ) {
 			return;
 		}

package/src/components/dataviews-picker/stories/index.story.tsx

@@ -86,7 +86,7 @@ export const Default = ( {
 					.filter(
 						( item ) => selection?.includes( String( item.id ) )
 					)
-					.map( ( item ) => item.title )
+					.map( ( item ) => item.name.title )
 					.join( ', ' );
 				// eslint-disable-next-line no-alert
 				window.alert( selectedItemNames );

package/src/components/dataviews-view-config/index.tsx

@@ -562,9 +562,10 @@ function FieldControl() {
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
 			! togglableFields.includes( f.id ) &&
-			f.type !== 'media'
+			f.type !== 'media' &&
+			f.enableHiding !== false
 	);
-	const visibleFields = visibleFieldIds
+	let visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
 		.filter( isDefined );
 
@@ -622,7 +623,7 @@ function FieldControl() {
 			isVisibleFlag: 'showDescription',
 		},
 	].filter( ( { field } ) => isDefined( field ) );
-	const visibleLockedFields = lockedFields.filter(
+	let visibleLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
@@ -631,6 +632,20 @@ function FieldControl() {
 		isVisibleFlag: string;
 		ui?: ReactNode;
 	} >;
+
+	// If only one locked field is visible, prevent it from being hidden.
+	if ( visibleLockedFields.length === 1 ) {
+		visibleLockedFields = visibleLockedFields.map( ( locked ) => ( {
+			...locked,
+			field: { ...locked.field, enableHiding: false },
+		} ) );
+	}
+
+	// If no locked fields are visible but there are visibleFields, lock the last visible field.
+	if ( visibleLockedFields.length === 0 && visibleFields.length === 1 ) {
+		visibleFields = [ { ...visibleFields[ 0 ], enableHiding: false } ];
+	}
+
 	const hiddenLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error

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>;
+			} }
 		/>
 	);
 }