@wordpress/dataviews 5.0.0 → 6.0.0

package/src/field-types/array.tsx

@@ -1,11 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	ValidationContext,
 	FieldTypeDefinition,
+	NormalizedField,
 } from '../types';
 import {
 	OPERATOR_IS_ALL,
@@ -31,25 +36,6 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 		: joinedB.localeCompare( joinedA );
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	if ( ! Array.isArray( value ) ) {
-		return false;
-	}
-
-	// Only allow strings for now. Can be extended to other types in the future.
-	if ( ! value.every( ( v ) => typeof v === 'string' ) ) {
-		return false;
-	}
-
-	if ( context?.elements ) {
-		const validValues = context.elements.map( ( f ) => f.value );
-		if ( ! value.every( ( v ) => validValues.includes( v ) ) ) {
-			return false;
-		}
-	}
-	return true;
-}
-
 function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	const value = field.getValue( { item } ) || [];
 	return value.join( ', ' );
@@ -57,7 +43,33 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 
 const arrayFieldType: FieldTypeDefinition< any > = {
 	sort,
-	isValid,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+
+			if (
+				! [ undefined, '', null ].includes( value ) &&
+				! Array.isArray( value )
+			) {
+				return __( 'Value must be an array.' );
+			}
+
+			// Only allow strings for now. Can be extended to other types in the future.
+			if ( ! value.every( ( v: any ) => typeof v === 'string' ) ) {
+				return __( 'Every value must be a string.' );
+			}
+
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if (
+					! value.every( ( v: any ) => validValues.includes( v ) )
+				) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+			return null;
+		},
+	},
 	Edit: null, // Not implemented yet
 	render,
 	enableSorting: true,

package/src/field-types/boolean.tsx

@@ -10,6 +10,7 @@ import type {
 	DataViewRenderFieldProps,
 	SortDirection,
 	FieldTypeDefinition,
+	NormalizedField,
 } from '../types';
 import { renderFromElements } from '../utils';
 import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
@@ -31,17 +32,22 @@ function sort( a: any, b: any, direction: SortDirection ) {
 	return boolA ? -1 : 1;
 }
 
-function isValid( value: any ) {
-	if ( ! [ true, false, undefined ].includes( value ) ) {
-		return false;
-	}
-
-	return true;
-}
-
 export default {
 	sort,
-	isValid,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+
+			if (
+				! [ undefined, '', null ].includes( value ) &&
+				! [ true, false ].includes( value )
+			) {
+				return __( 'Value must be true, false, or undefined' );
+			}
+
+			return null;
+		},
+	},
 	Edit: 'boolean',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		if ( field.elements ) {

package/src/field-types/date.ts

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -9,10 +10,21 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	ValidationContext,
+	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
 import { renderFromElements } from '../utils';
+import {
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
+	OPERATOR_BETWEEN,
+} from '../constants';
 
 const getFormattedDate = ( dateToDisplay: string | null ) =>
 	dateI18n( getSettings().formats.date, getDate( dateToDisplay ) );
@@ -24,21 +36,22 @@ function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? timeA - timeB : timeB - timeA;
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	if ( context?.elements ) {
-		const validValues = context?.elements.map( ( f ) => f.value );
-		if ( ! validValues.includes( value ) ) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
 export default {
 	sort,
-	isValid,
-	Edit: null,
+	Edit: 'date',
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		if ( field.elements ) {
 			return renderFromElements( { item, field } );
@@ -52,5 +65,28 @@ export default {
 		return getFormattedDate( value );
 	},
 	enableSorting: true,
-	filterBy: false,
+	filterBy: {
+		defaultOperators: [
+			OPERATOR_ON,
+			OPERATOR_NOT_ON,
+			OPERATOR_BEFORE,
+			OPERATOR_AFTER,
+			OPERATOR_BEFORE_INC,
+			OPERATOR_AFTER_INC,
+			OPERATOR_IN_THE_PAST,
+			OPERATOR_OVER,
+			OPERATOR_BETWEEN,
+		],
+		validOperators: [
+			OPERATOR_ON,
+			OPERATOR_NOT_ON,
+			OPERATOR_BEFORE,
+			OPERATOR_AFTER,
+			OPERATOR_BEFORE_INC,
+			OPERATOR_AFTER_INC,
+			OPERATOR_IN_THE_PAST,
+			OPERATOR_OVER,
+			OPERATOR_BETWEEN,
+		],
+	},
 } satisfies FieldTypeDefinition< any >;

package/src/field-types/datetime.tsx

@@ -1,10 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	ValidationContext,
+	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
 import { renderFromElements } from '../utils';
@@ -26,20 +31,21 @@ function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? timeA - timeB : timeB - timeA;
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	if ( context?.elements ) {
-		const validValues = context?.elements.map( ( f ) => f.value );
-		if ( ! validValues.includes( value ) ) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
 export default {
 	sort,
-	isValid,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
 	Edit: 'datetime',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		return field.elements

package/src/field-types/email.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { isEmail } from '@wordpress/url';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import { isEmail } from '@wordpress/url';
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	ValidationContext,
+	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
 import { renderFromElements } from '../utils';
@@ -31,29 +31,34 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 		: valueB.localeCompare( valueA );
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	// TODO: this implicitly means the value is required.
-	if ( value === '' ) {
-		return false;
-	}
+// Email validation regex based on HTML5 spec
+// https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
+const emailRegex =
+	/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 
-	if ( ! isEmail( value ) ) {
-		return false;
-	}
+export default {
+	sort,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
 
-	if ( context?.elements ) {
-		const validValues = context?.elements?.map( ( f ) => f.value );
-		if ( ! validValues.includes( value ) ) {
-			return false;
-		}
-	}
+			if (
+				! [ undefined, '', null ].includes( value ) &&
+				! emailRegex.test( value )
+			) {
+				return __( 'Value must be a valid email address.' );
+			}
 
-	return true;
-}
+			if ( field.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
 
-export default {
-	sort,
-	isValid,
+			return null;
+		},
+	},
 	Edit: 'email',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		return field.elements

package/src/field-types/index.tsx

@@ -1,12 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
+	NormalizedField,
 	FieldType,
 	FieldTypeDefinition,
 	SortDirection,
-	ValidationContext,
 } from '../types';
 import { default as email } from './email';
 import { default as integer } from './integer';
@@ -72,15 +77,20 @@ export default function getFieldTypeDefinition< Item >(
 				? a.localeCompare( b )
 				: b.localeCompare( a );
 		},
-		isValid: ( value: any, context?: ValidationContext ) => {
-			if ( context?.elements ) {
-				const validValues = context?.elements?.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return false;
+		isValid: {
+			custom: ( item: any, field: NormalizedField< any > ) => {
+				if ( field?.elements ) {
+					const value = field.getValue( { item } );
+					const validValues = field?.elements?.map(
+						( f ) => f.value
+					);
+					if ( ! validValues.includes( value ) ) {
+						return __( 'Value must be one of the elements.' );
+					}
 				}
-			}
 
-			return true;
+				return null;
+			},
 		},
 		Edit: null,
 		render: ( { item, field }: DataViewRenderFieldProps< Item > ) => {

package/src/field-types/integer.tsx

@@ -1,10 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	ValidationContext,
+	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
 import { renderFromElements } from '../utils';
@@ -26,29 +31,28 @@ function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? a - b : b - a;
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	// TODO: this implicitly means the value is required.
-	if ( value === '' ) {
-		return false;
-	}
-
-	if ( ! Number.isInteger( Number( value ) ) ) {
-		return false;
-	}
-
-	if ( context?.elements ) {
-		const validValues = context?.elements.map( ( f ) => f.value );
-		if ( ! validValues.includes( Number( value ) ) ) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
 export default {
 	sort,
-	isValid,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if (
+				! [ undefined, '', null ].includes( value ) &&
+				! Number.isInteger( value )
+			) {
+				return __( 'Value must be an integer.' );
+			}
+
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( Number( value ) ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
 	Edit: 'integer',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		return field.elements

package/src/field-types/media.tsx

@@ -1,26 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-import type { ValidationContext, FieldTypeDefinition } from '../types';
+import type { NormalizedField, FieldTypeDefinition } from '../types';
 
 function sort() {
 	return 0;
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	if ( context?.elements ) {
-		const validValues = context?.elements.map( ( f ) => f.value );
-		if ( ! validValues.includes( value ) ) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
 export default {
 	sort,
-	isValid,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
 	Edit: null,
 	render: () => null,
 	enableSorting: false,

package/src/field-types/text.tsx

@@ -1,10 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	ValidationContext,
+	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
 import { renderFromElements } from '../utils';
@@ -26,20 +31,21 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 		: valueB.localeCompare( valueA );
 }
 
-function isValid( value: any, context?: ValidationContext ) {
-	if ( context?.elements ) {
-		const validValues = context?.elements?.map( ( f ) => f.value );
-		if ( ! validValues.includes( value ) ) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
 export default {
 	sort,
-	isValid,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
 	Edit: 'text',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		return field.elements

package/src/filter-and-sort-data-view.ts

@@ -98,10 +98,17 @@ export function filterSortAndPaginate< Item >(
 		filteredData = filteredData.filter( ( item ) => {
 			return _fields
 				.filter( ( field ) => field.enableGlobalSearch )
-				.map( ( field ) => {
-					return normalizeSearchInput( field.getValue( { item } ) );
-				} )
-				.some( ( field ) => field.includes( normalizedSearch ) );
+				.some( ( field ) => {
+					const fieldValue = field.getValue( { item } );
+					const values = Array.isArray( fieldValue )
+						? fieldValue
+						: [ fieldValue ];
+					return values.some( ( value ) =>
+						normalizeSearchInput( String( value ) ).includes(
+							normalizedSearch
+						)
+					);
+				} );
 		} );
 	}
 

package/src/normalize-fields.ts

@@ -139,14 +139,10 @@ export function normalizeFields< Item >(
 				);
 			};
 
-		const isValid =
-			field.isValid ??
-			function isValid( item, context ) {
-				return fieldTypeDefinition.isValid(
-					getValue( { item } ),
-					context
-				);
-			};
+		const isValid = {
+			...fieldTypeDefinition.isValid,
+			...field.isValid,
+		};
 
 		const Edit = getControl( field, fieldTypeDefinition );