@wordpress/dataviews 5.0.0 → 6.0.1-next.46f643fa0.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

@@ -71,6 +71,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,

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

@@ -100,10 +100,6 @@ export type FieldType =
 	| 'email'
 	| 'array';
 
-export type ValidationContext = {
-	elements?: Option[];
-};
-
 /**
  * An abstract interface for Field based on the field type.
  */
@@ -116,7 +112,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 +141,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 +199,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 +251,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 +281,9 @@ export type DataFormControlProps< Item > = {
 export type DataViewRenderFieldProps< Item > = {
 	item: Item;
 	field: NormalizedField< Item >;
+	config?: {
+		sizes: string;
+	};
 };
 
 /**

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" },