@wordpress/dataviews 5.0.1-next.719a03cbe.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

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	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 ) );
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const timeA = new Date( a ).getTime();
+	const timeB = new Date( b ).getTime();
+
+	return direction === 'asc' ? timeA - timeB : timeB - timeA;
+}
+
+export default {
+	sort,
+	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 } );
+		}
+
+		const value = field.getValue( { item } );
+		if ( ! value ) {
+			return '';
+		}
+
+		return getFormattedDate( value );
+	},
+	enableSorting: true,
+	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,17 +1,23 @@
+/**
+ * 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';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
+import { default as date } from './date';
 import { default as boolean } from './boolean';
 import { default as media } from './media';
 import { default as array } from './array';
@@ -43,6 +49,10 @@ export default function getFieldTypeDefinition< Item >(
 		return datetime;
 	}
 
+	if ( 'date' === type ) {
+		return date;
+	}
+
 	if ( 'boolean' === type ) {
 		return boolean;
 	}
@@ -67,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
+						)
+					);
+				} );
 		} );
 	}
 
@@ -375,16 +382,34 @@ export function filterSortAndPaginate< Item >(
 	}
 
 	// Handle sorting.
-	if ( view.sort ) {
-		const fieldId = view.sort.field;
-		const fieldToSort = _fields.find( ( field ) => {
-			return field.id === fieldId;
+	const sortByField = view.sort?.field
+		? _fields.find( ( field ) => {
+				return field.id === view.sort?.field;
+		  } )
+		: null;
+	const groupByField = view.groupByField
+		? _fields.find( ( field ) => {
+				return field.id === view.groupByField;
+		  } )
+		: null;
+	if ( sortByField || groupByField ) {
+		filteredData.sort( ( a, b ) => {
+			if ( groupByField ) {
+				const groupCompare = groupByField.sort( a, b, 'asc' );
+
+				// If items are in different groups, return the group comparison result.
+				// Otherwise, fall back to sorting by the sort field.
+				if ( groupCompare !== 0 ) {
+					return groupCompare;
+				}
+			}
+
+			if ( sortByField ) {
+				return sortByField.sort( a, b, view.sort?.direction ?? 'desc' );
+			}
+
+			return 0;
 		} );
-		if ( fieldToSort ) {
-			filteredData.sort( ( a, b ) => {
-				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
-			} );
-		}
 	}
 
 	// Handle pagination.

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 );