@wordpress/dataviews 9.0.1-next.6f42e1382.0 → 9.0.1-next.a730c9c8c.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/dataform-controls/array.tsx

@@ -15,8 +15,8 @@ export default function ArrayControl< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, elements } = field;
-	const value = field.getValue( { item: data } );
+	const { label, placeholder, elements, getValue, setValue } = field;
+	const value = getValue( { item: data } );
 
 	const findElementByValue = useCallback(
 		( suggestionValue: string ) => {
@@ -61,11 +61,9 @@ export default function ArrayControl< Item >( {
 				return tokenByLabel?.value || token;
 			} );
 
-			onChange( {
-				[ id ]: stringTokens,
-			} );
+			onChange( setValue( { item: data, value: stringTokens } ) );
 		},
-		[ id, onChange, findElementByLabel ]
+		[ onChange, setValue, data, findElementByLabel ]
 	);
 
 	return (

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 }