@wordpress/dataviews 5.0.0 → 6.0.0

package/src/test/dataviews.tsx

@@ -285,6 +285,71 @@ describe( 'DataViews component', () => {
 			await user.click( titleField );
 			expect( onClickItemCallback ).toHaveBeenCalledWith( data[ 0 ] );
 		} );
+
+		it( 'accepts click for single selection', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						...DEFAULT_VIEW,
+						fields: [ 'author' ],
+						titleField: 'title',
+					} }
+					// A bulk action is required for the dataview to be multi-selectable.
+					actions={ actions }
+				/>
+			);
+			const firstItemElement = screen.getByText( data[ 0 ].title );
+			const thirdItemElement = screen.getByText( data[ 2 ].title );
+			const user = userEvent.setup();
+			await user.click( firstItemElement );
+
+			// First item should be selected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toBeChecked();
+			await user.click( thirdItemElement );
+
+			// Third item should be selected. First item was deselected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 2 ].title } )
+			).toBeChecked();
+		} );
+
+		it( 'accepts ctrl/cmd key and click for non-consecutive multi-selection', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						...DEFAULT_VIEW,
+						fields: [ 'author' ],
+						titleField: 'title',
+					} }
+					// A bulk action is required for the dataview to be multi-selectable.
+					actions={ actions }
+				/>
+			);
+			const firstItemElement = screen.getByText( data[ 0 ].title );
+			const thirdItemElement = screen.getByText( data[ 2 ].title );
+			const user = userEvent.setup();
+			await user.click( firstItemElement );
+
+			// First item should be selected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toBeChecked();
+			await user.keyboard( '{Control>}' );
+			await user.click( thirdItemElement );
+
+			// Both items should be selected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 2 ].title } )
+			).toBeChecked();
+
+			// Don't keep the modifier pressed down, that's just mean.
+			await user.keyboard( '{/Control}' );
+		} );
 	} );
 
 	describe( 'in grid view', () => {
@@ -363,6 +428,70 @@ describe( 'DataViews component', () => {
 			await user.click( imageField );
 			expect( mediaClickItemCallback ).toHaveBeenCalledWith( data[ 0 ] );
 		} );
+
+		it( 'accepts click for single selection', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						...DEFAULT_VIEW,
+						fields: [ 'author' ],
+						titleField: 'title',
+					} }
+					// A bulk action is required for the dataview to be multi-selectable.
+					actions={ actions }
+				/>
+			);
+			const firstItemElement = screen.getByText( data[ 0 ].title );
+			const thirdItemElement = screen.getByText( data[ 2 ].title );
+			const user = userEvent.setup();
+			await user.click( firstItemElement );
+
+			// First item should be selected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toBeChecked();
+			await user.click( thirdItemElement );
+
+			// Third item should be selected. First item was deselected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 2 ].title } )
+			).toBeChecked();
+		} );
+
+		it( 'accepts ctrl/cmd key and click for non-consecutive multi-selection', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						...DEFAULT_VIEW,
+						fields: [ 'author' ],
+						titleField: 'title',
+					} }
+					// A bulk action is required for the dataview to be multi-selectable.
+					actions={ actions }
+				/>
+			);
+			const firstItemElement = screen.getByText( data[ 0 ].title );
+			const thirdItemElement = screen.getByText( data[ 2 ].title );
+			const user = userEvent.setup();
+			await user.click( firstItemElement );
+
+			// First item should be selected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toBeChecked();
+			await user.keyboard( '{Control>}' );
+			await user.click( thirdItemElement );
+
+			// Both items should be selected.
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 0 ].title } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'checkbox', { name: data[ 2 ].title } )
+			).toBeChecked();
+
+			await user.keyboard( '{/Control}' );
+		} );
 	} );
 
 	describe( 'in list view', () => {

package/src/test/filter-and-sort-data-view.js

@@ -55,7 +55,9 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( result ).toHaveLength( 2 );
-		expect( result[ 0 ].description ).toBe( "Earth's satellite" );
+		expect( result[ 0 ].description ).toBe(
+			'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.'
+		);
 	} );
 
 	it( 'should perform case-insensitive and accent-insensitive search', () => {
@@ -71,6 +73,54 @@ describe( 'filters', () => {
 		expect( result[ 0 ].description ).toBe( 'La planète Vénus' );
 	} );
 
+	it( 'should search over array fields when enableGlobalSearch is true', () => {
+		const fieldsWithArraySearch = fields.map( ( field ) =>
+			field.id === 'categories'
+				? { ...field, enableGlobalSearch: true }
+				: field
+		);
+
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'Moon',
+				filters: [],
+			},
+			fieldsWithArraySearch
+		);
+
+		// Should find items with "satellite" in categories
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
+			'Europa',
+			'Io',
+			'Moon',
+		] );
+	} );
+
+	it( 'should search over array fields case-insensitively', () => {
+		const fieldsWithArraySearch = fields.map( ( field ) =>
+			field.id === 'categories'
+				? { ...field, enableGlobalSearch: true }
+				: field
+		);
+
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'planet',
+				filters: [],
+			},
+			fieldsWithArraySearch
+		);
+
+		// Should find items with "Planet" in categories (case-insensitive)
+		expect( result ).toHaveLength( 8 );
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Neptune' );
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Mercury' );
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Earth' );
+	} );
+
 	it( 'should search using IS filter', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
@@ -374,7 +424,7 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( result.map( ( r ) => r.description ) ).toEqual( [
-			"Earth's satellite",
+			'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.',
 			'Moon of Jupiter',
 			'Moon of Jupiter',
 			'La planète Vénus',

package/src/test/validation.ts

@@ -35,7 +35,7 @@ describe( 'validation', () => {
 		expect( result ).toBe( true );
 	} );
 
-	it( 'integer field is invalid if value is not integer', () => {
+	it( 'integer field is invalid if value is not integer when not empty', () => {
 		const item = { id: 1, order: 'd' };
 		const fields: Field< {} >[] = [
 			{
@@ -48,19 +48,6 @@ describe( 'validation', () => {
 		expect( result ).toBe( false );
 	} );
 
-	it( 'integer field is invalid if value is empty', () => {
-		const item = { id: 1, order: '' };
-		const fields: Field< {} >[] = [
-			{
-				id: 'order',
-				type: 'integer',
-			},
-		];
-		const form = { fields: [ 'order' ] };
-		const result = isItemValid( item, fields, form );
-		expect( result ).toBe( false );
-	} );
-
 	it( 'integer field is invalid if value is not one of the elements', () => {
 		const item = { id: 1, author: 3 };
 		const fields: Field< {} >[] = [
@@ -121,7 +108,9 @@ describe( 'validation', () => {
 					{ value: 'a', label: 'A' },
 					{ value: 'b', label: 'B' },
 				],
-				isValid: () => true, // Overrides the validation provided for integer types.
+				isValid: {
+					custom: () => null, // Overrides the validation provided for integer types.
+				},
 			},
 		];
 		const form = { fields: [ 'order' ] };

package/src/types.ts

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ComponentType, ComponentProps } from 'react';
+import type {
+	ReactElement,
+	ReactNode,
+	ComponentType,
+	ComponentProps,
+} from 'react';
 
 /**
  * Internal dependencies
@@ -100,10 +105,6 @@ export type FieldType =
 	| 'email'
 	| 'array';
 
-export type ValidationContext = {
-	elements?: Option[];
-};
-
 /**
  * An abstract interface for Field based on the field type.
  */
@@ -116,7 +117,7 @@ export type FieldTypeDefinition< Item > = {
 	/**
 	 * Callback used to validate the field.
 	 */
-	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+	isValid: Rules< Item >;
 
 	/**
 	 * Callback used to render an edit control for the field or control name.
@@ -145,6 +146,11 @@ export type FieldTypeDefinition< Item > = {
 	enableSorting: boolean;
 };
 
+export type Rules< Item > = {
+	required?: boolean;
+	custom?: ( item: Item, field: NormalizedField< Item > ) => null | string;
+};
+
 /**
  * A dataview field for a specific property of a data type.
  */
@@ -198,7 +204,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to validate the field.
 	 */
-	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
+	isValid?: Rules< Item >;
 
 	/**
 	 * Callback used to decide if a field should be displayed.
@@ -250,7 +256,7 @@ export type NormalizedField< Item > = Omit< Field< Item >, 'Edit' > & {
 	render: ComponentType< DataViewRenderFieldProps< Item > >;
 	Edit: ComponentType< DataFormControlProps< Item > > | null;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
-	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+	isValid: Rules< Item >;
 	enableHiding: boolean;
 	enableSorting: boolean;
 	filterBy: NormalizedFilterByConfig | false;
@@ -280,6 +286,9 @@ export type DataFormControlProps< Item > = {
 export type DataViewRenderFieldProps< Item > = {
 	item: Item;
 	field: NormalizedField< Item >;
+	config?: {
+		sizes: string;
+	};
 };
 
 /**
@@ -300,6 +309,11 @@ export interface Filter {
 	 * The value to filter by.
 	 */
 	value: any;
+
+	/**
+	 * Whether the filter can be edited by the user.
+	 */
+	isLocked?: boolean;
 }
 
 export interface NormalizedFilter {
@@ -337,6 +351,11 @@ export interface NormalizedFilter {
 	 * Whether it is a primary filter.
 	 */
 	isPrimary: boolean;
+
+	/**
+	 * Whether the filter can be edited by the user.
+	 */
+	isLocked: boolean;
 }
 
 interface ViewBase {
@@ -616,6 +635,7 @@ export interface ViewBaseProps< Item > {
 	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	view: View;
+	empty: ReactNode;
 }
 
 export interface ViewTableProps< Item > extends ViewBaseProps< Item > {

package/src/validation.ts

@@ -21,7 +21,36 @@ export function isItemValid< Item >(
 	const _fields = normalizeFields(
 		fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
 	);
+
+	const isEmptyNullOrUndefined = ( value: any ) =>
+		[ undefined, '', null ].includes( value );
+
 	return _fields.every( ( field ) => {
-		return field.isValid( item, { elements: field.elements } );
+		const value = field.getValue( { item } );
+
+		if ( field.isValid.required ) {
+			if (
+				( field.type === 'text' && isEmptyNullOrUndefined( value ) ) ||
+				( field.type === 'email' && isEmptyNullOrUndefined( value ) ) ||
+				( field.type === 'integer' &&
+					isEmptyNullOrUndefined( value ) ) ||
+				( field.type === undefined && isEmptyNullOrUndefined( value ) )
+			) {
+				return false;
+			}
+
+			if ( field.type === 'boolean' && value !== true ) {
+				return false;
+			}
+		}
+
+		if (
+			typeof field.isValid.custom === 'function' &&
+			field.isValid.custom( item, field ) !== null
+		) {
+			return false;
+		}
+
+		return true;
 	} );
 }

package/tsconfig.json

@@ -17,6 +17,7 @@
 		{ "path": "../element" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" },
 		{ "path": "../url" },