@wordpress/dataviews 11.0.0 → 11.1.0

package/src/field-types/array.tsx

@@ -6,7 +6,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { DataViewRenderFieldProps, Rules, SortDirection } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	NormalizedField,
+	SortDirection,
+} from '../types';
 import type { FieldType } from '../types/private';
 import {
 	OPERATOR_IS_ALL,
@@ -14,32 +18,31 @@ import {
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_NOT_ALL,
 } from '../constants';
+import isValidRequiredForArray from './utils/is-valid-required-for-array';
+import isValidElements from './utils/is-valid-elements';
 
 function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	const value = field.getValue( { item } ) || [];
 	return value.join( ', ' );
 }
 
-const isValid: Rules< any > = {
-	elements: true,
-	custom: ( item: any, normalizedField ) => {
-		const value = normalizedField.getValue( { item } );
+function isValidCustom< Item >( item: Item, field: NormalizedField< Item > ) {
+	const value = field.getValue( { item } );
 
-		if (
-			! [ undefined, '', null ].includes( value ) &&
-			! Array.isArray( value )
-		) {
-			return __( 'Value must be an array.' );
-		}
+	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.' );
-		}
+	// 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.' );
+	}
 
-		return null;
-	},
-};
+	return null;
+}
 
 const sort = ( a: any, b: any, direction: SortDirection ) => {
 	// Sort arrays by length, then alphabetically by joined string
@@ -63,7 +66,6 @@ export default {
 	render,
 	Edit: 'array',
 	sort,
-	isValid,
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
@@ -74,4 +76,9 @@ export default {
 		OPERATOR_IS_NOT_ALL,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequiredForArray,
+		elements: isValidElements,
+		custom: isValidCustom,
+	},
 } satisfies FieldType< any >;

package/src/field-types/boolean.tsx

@@ -6,10 +6,16 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { DataViewRenderFieldProps, Rules, SortDirection } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	NormalizedField,
+	SortDirection,
+} from '../types';
 import type { FieldType } from '../types/private';
 import RenderFromElements from './utils/render-from-elements';
 import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
+import isValidElements from './utils/is-valid-elements';
+import isValidRequiredForBool from './utils/is-valid-required-for-bool';
 
 function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	if ( field.hasElements ) {
@@ -27,21 +33,18 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	return null;
 }
 
-const isValid: Rules< any > = {
-	elements: true,
-	custom: ( item: any, normalizedField ) => {
-		const value = normalizedField.getValue( { item } );
+function isValidCustom< Item >( item: Item, field: NormalizedField< Item > ) {
+	const value = field.getValue( { item } );
 
-		if (
-			! [ undefined, '', null ].includes( value ) &&
-			! [ true, false ].includes( value )
-		) {
-			return __( 'Value must be true, false, or undefined' );
-		}
+	if (
+		! [ undefined, '', null ].includes( value ) &&
+		! [ true, false ].includes( value )
+	) {
+		return __( 'Value must be true, false, or undefined' );
+	}
 
-		return null;
-	},
-};
+	return null;
+}
 
 const sort = ( a: any, b: any, direction: SortDirection ) => {
 	const boolA = Boolean( a );
@@ -65,7 +68,11 @@ export default {
 	render,
 	Edit: 'checkbox',
 	sort,
-	isValid,
+	validate: {
+		required: isValidRequiredForBool,
+		elements: isValidElements,
+		custom: isValidCustom,
+	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],

package/src/field-types/color.tsx

@@ -11,7 +11,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { DataViewRenderFieldProps, Rules, SortDirection } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	NormalizedField,
+	SortDirection,
+} from '../types';
 import type { FieldType } from '../types/private';
 import RenderFromElements from './utils/render-from-elements';
 import {
@@ -20,6 +24,8 @@ import {
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_NOT,
 } from '../constants';
+import isValidElements from './utils/is-valid-elements';
+import isValidRequired from './utils/is-valid-required';
 
 function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	if ( field.hasElements ) {
@@ -50,21 +56,18 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	);
 }
 
-const isValid: Rules< any > = {
-	elements: true,
-	custom: ( item: any, normalizedField ) => {
-		const value = normalizedField.getValue( { item } );
+function isValidCustom< Item >( item: Item, field: NormalizedField< Item > ) {
+	const value = field.getValue( { item } );
 
-		if (
-			! [ undefined, '', null ].includes( value ) &&
-			! colord( value ).isValid()
-		) {
-			return __( 'Value must be a valid color.' );
-		}
+	if (
+		! [ undefined, '', null ].includes( value ) &&
+		! colord( value ).isValid()
+	) {
+		return __( 'Value must be a valid color.' );
+	}
 
-		return null;
-	},
-};
+	return null;
+}
 
 const sort = ( a: any, b: any, direction: SortDirection ) => {
 	// Convert colors to HSL for better sorting
@@ -99,7 +102,6 @@ export default {
 	render,
 	Edit: 'color',
 	sort,
-	isValid,
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
@@ -110,4 +112,9 @@ export default {
 		OPERATOR_IS_NONE,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		elements: isValidElements,
+		custom: isValidCustom,
+	},
 } satisfies FieldType< any >;

package/src/field-types/date.tsx

@@ -14,6 +14,7 @@ import type {
 } from '../types';
 import type { FieldType } from '../types/private';
 import RenderFromElements from './utils/render-from-elements';
+import isValidElements from './utils/is-valid-elements';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -26,18 +27,20 @@ import {
 	OPERATOR_BETWEEN,
 	DAYS_OF_WEEK,
 } from '../constants';
+import isValidRequired from './utils/is-valid-required';
 
 function getFormat< Item >( field: Field< Item > ): Required< FormatDate > {
+	const fieldFormat = field.format as FormatDate | undefined;
 	return {
 		date:
-			field.format?.date !== undefined &&
-			typeof field.format.date === 'string'
-				? field.format.date
+			fieldFormat?.date !== undefined &&
+			typeof fieldFormat.date === 'string'
+				? fieldFormat.date
 				: getSettings().formats.date,
 		weekStartsOn:
-			field.format?.weekStartsOn !== undefined &&
-			DAYS_OF_WEEK.includes( field.format?.weekStartsOn )
-				? field.format.weekStartsOn
+			fieldFormat?.weekStartsOn !== undefined &&
+			DAYS_OF_WEEK.includes( fieldFormat?.weekStartsOn )
+				? fieldFormat.weekStartsOn
 				: getSettings().l10n.startOfWeek,
 	};
 }
@@ -59,7 +62,7 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	// but TypeScript is unable to infer this, hence the type assertion.
 	let format: Required< FormatDate >;
 	if ( field.type !== 'date' ) {
-		format = getFormat( field as Field< any > );
+		format = getFormat( {} as Field< any > );
 	} else {
 		format = field.format as Required< FormatDate >;
 	}
@@ -79,10 +82,6 @@ export default {
 	render,
 	Edit: 'date',
 	sort,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [
@@ -108,4 +107,8 @@ export default {
 		OPERATOR_BETWEEN,
 	],
 	getFormat,
+	validate: {
+		required: isValidRequired,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;

package/src/field-types/datetime.tsx

@@ -5,6 +5,7 @@ import type { DataViewRenderFieldProps, SortDirection } from '../types';
 import type { FieldType } from '../types/private';
 import RenderFromElements from './utils/render-from-elements';
 import parseDateTime from './utils/parse-date-time';
+import isValidElements from './utils/is-valid-elements';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -15,6 +16,7 @@ import {
 	OPERATOR_IN_THE_PAST,
 	OPERATOR_OVER,
 } from '../constants';
+import isValidRequired from './utils/is-valid-required';
 
 function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	if ( field.elements ) {
@@ -46,10 +48,6 @@ export default {
 	render,
 	Edit: 'datetime',
 	sort,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [
@@ -73,4 +71,8 @@ export default {
 		OPERATOR_OVER,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;

package/src/field-types/email.tsx

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { Rules } from '../types';
+import type { NormalizedField } from '../types';
 import type { FieldType } from '../types/private';
 import {
 	OPERATOR_IS,
@@ -21,34 +21,35 @@ import {
 } from '../constants';
 import render from './utils/render-default';
 import sort from './utils/sort-text';
+import isValidRequired from './utils/is-valid-required';
+import isValidMinLength from './utils/is-valid-min-length';
+import isValidMaxLength from './utils/is-valid-max-length';
+import isValidPattern from './utils/is-valid-pattern';
+import isValidElements from './utils/is-valid-elements';
 
 // 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])?)*$/;
 
-const isValid: Rules< any > = {
-	elements: true,
-	custom: ( item: any, normalizedField ) => {
-		const value = normalizedField.getValue( { item } );
+function isValidCustom< Item >( item: Item, field: NormalizedField< Item > ) {
+	const value = field.getValue( { item } );
 
-		if (
-			! [ undefined, '', null ].includes( value ) &&
-			! emailRegex.test( value )
-		) {
-			return __( 'Value must be a valid email address.' );
-		}
+	if (
+		! [ undefined, '', null ].includes( value ) &&
+		! emailRegex.test( value )
+	) {
+		return __( 'Value must be a valid email address.' );
+	}
 
-		return null;
-	},
-};
+	return null;
+}
 
 export default {
 	type: 'email',
 	render,
 	Edit: 'email',
 	sort,
-	isValid,
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
@@ -65,4 +66,12 @@ export default {
 		OPERATOR_IS_NOT_ALL,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		pattern: isValidPattern,
+		minLength: isValidMinLength,
+		maxLength: isValidMaxLength,
+		elements: isValidElements,
+		custom: isValidCustom,
+	},
 } satisfies FieldType< any >;

package/src/field-types/index.tsx

@@ -27,6 +27,7 @@ import { default as telephone } from './telephone';
 import { default as color } from './color';
 import { default as url } from './url';
 import { default as noType } from './no-type';
+import getIsValid from './utils/get-is-valid';
 
 /**
  *
@@ -70,7 +71,7 @@ export default function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
-		const defaultProps = getFieldTypeByName< Item >( field.type );
+		const fieldType = getFieldTypeByName< Item >( field.type );
 
 		const getValue = field.getValue || getValueFromId( field.id );
 		const sort = function ( a: any, b: any, direction: SortDirection ) {
@@ -78,7 +79,7 @@ export default function normalizeFields< Item >(
 			const bValue = getValue( { item: b } );
 			return field.sort
 				? field.sort( aValue, bValue, direction )
-				: defaultProps.sort( aValue, bValue, direction );
+				: fieldType.sort( aValue, bValue, direction );
 		};
 
 		return {
@@ -96,23 +97,20 @@ export default function normalizeFields< Item >(
 			enableHiding: field.enableHiding ?? true,
 			readOnly: field.readOnly ?? false,
 			// The type provides defaults for the following props
-			type: defaultProps.type,
-			render: field.render ?? defaultProps.render,
-			Edit: getControl( field, defaultProps.Edit ),
+			type: fieldType.type,
+			render: field.render ?? fieldType.render,
+			Edit: getControl( field, fieldType.Edit ),
 			sort,
-			enableSorting: field.enableSorting ?? defaultProps.enableSorting,
+			enableSorting: field.enableSorting ?? fieldType.enableSorting,
 			enableGlobalSearch:
-				field.enableGlobalSearch ?? defaultProps.enableGlobalSearch,
-			isValid: {
-				...defaultProps.isValid,
-				...field.isValid,
-			},
+				field.enableGlobalSearch ?? fieldType.enableGlobalSearch,
+			isValid: getIsValid( field, fieldType ),
 			filterBy: getFilterBy(
 				field,
-				defaultProps.defaultOperators,
-				defaultProps.validOperators
+				fieldType.defaultOperators,
+				fieldType.validOperators
 			),
-			format: defaultProps.getFormat( field ),
+			format: fieldType.getFormat( field ),
 		};
 	} );
 }

package/src/field-types/integer.tsx

@@ -6,7 +6,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { Rules } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	Field,
+	FormatInteger,
+	NormalizedField,
+} from '../types';
 import type { FieldType } from '../types/private';
 import {
 	OPERATOR_IS,
@@ -21,30 +26,84 @@ import {
 	OPERATOR_IS_NOT_ALL,
 	OPERATOR_BETWEEN,
 } from '../constants';
-import render from './utils/render-default';
+import RenderFromElements from './utils/render-from-elements';
 import sort from './utils/sort-number';
+import isValidRequired from './utils/is-valid-required';
+import isValidMin from './utils/is-valid-min';
+import isValidMax from './utils/is-valid-max';
+import isValidElements from './utils/is-valid-elements';
 
-const isValid: Rules< any > = {
-	elements: true,
-	custom: ( item: any, normalizedField ) => {
-		const value = normalizedField.getValue( { item } );
-		if (
-			! [ undefined, '', null ].includes( value ) &&
-			! Number.isInteger( value )
-		) {
-			return __( 'Value must be an integer.' );
-		}
+function getFormat< Item >( field: Field< Item > ): Required< FormatInteger > {
+	const fieldFormat = field.format as FormatInteger | undefined;
+	return {
+		separatorThousand:
+			fieldFormat?.separatorThousand !== undefined &&
+			typeof fieldFormat.separatorThousand === 'string'
+				? fieldFormat.separatorThousand
+				: ',',
+	};
+}
 
-		return null;
-	},
-};
+export function formatInteger(
+	value: number,
+	format: Required< FormatInteger >
+): string {
+	if ( ! Number.isFinite( value ) ) {
+		return String( value );
+	}
+	const { separatorThousand } = format;
+	const integerValue = Math.trunc( value );
+	if ( ! separatorThousand ) {
+		return String( integerValue );
+	}
+	// Add thousand separators.
+	return String( integerValue ).replace(
+		/\B(?=(\d{3})+(?!\d))/g,
+		separatorThousand
+	);
+}
+
+function render( { item, field }: DataViewRenderFieldProps< any > ) {
+	if ( field.hasElements ) {
+		return <RenderFromElements item={ item } field={ field } />;
+	}
+
+	const value = field.getValue( { item } );
+	if ( [ null, undefined ].includes( value ) ) {
+		return '';
+	}
+
+	// If the field type is integer, we've already normalized the format,
+	// and so it's safe to tell TypeScript to trust us ("as Required<FormatInteger>").
+	//
+	// There're no runtime paths where this render function is called with a non-integer field,
+	// but TypeScript is unable to infer this, hence the type assertion.
+	let format: Required< FormatInteger >;
+	if ( field.type !== 'integer' ) {
+		format = getFormat( field as Field< any > );
+	} else {
+		format = field.format as Required< FormatInteger >;
+	}
+
+	return formatInteger( Number( value ), format );
+}
+
+function isValidCustom< Item >( item: Item, field: NormalizedField< Item > ) {
+	const value = field.getValue( { item } );
+	if (
+		! [ undefined, '', null ].includes( value ) &&
+		! Number.isInteger( value )
+	) {
+		return __( 'Value must be an integer.' );
+	}
+	return null;
+}
 
 export default {
 	type: 'integer',
 	render,
 	Edit: 'integer',
 	sort,
-	isValid,
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [
@@ -71,5 +130,12 @@ export default {
 		OPERATOR_IS_ALL,
 		OPERATOR_IS_NOT_ALL,
 	],
-	getFormat: () => ( {} ),
+	getFormat,
+	validate: {
+		required: isValidRequired,
+		min: isValidMin,
+		max: isValidMax,
+		elements: isValidElements,
+		custom: isValidCustom,
+	},
 } satisfies FieldType< any >;

package/src/field-types/media.tsx

@@ -8,13 +8,13 @@ export default {
 	render: () => null,
 	Edit: null,
 	sort: () => 0,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: false,
 	enableGlobalSearch: false,
 	defaultOperators: [],
 	validOperators: [],
 	getFormat: () => ( {} ),
+	// cannot validate any constraint, so
+	// the only available validation for the field author
+	// would be providing a custom validator.
+	validate: {},
 } satisfies FieldType< any >;

package/src/field-types/no-type.tsx

@@ -3,10 +3,13 @@
  */
 import type { SortDirection } from '../types';
 import type { FieldType } from '../types/private';
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
+import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
+import { getAllOperatorNames } from '../utils/operators';
 import render from './utils/render-default';
 import sortText from './utils/sort-text';
 import sortNumber from './utils/sort-number';
+import isValidRequired from './utils/is-valid-required';
+import isValidElements from './utils/is-valid-elements';
 
 const sort = ( a: any, b: any, direction: SortDirection ) => {
 	if ( typeof a === 'number' && typeof b === 'number' ) {
@@ -21,13 +24,13 @@ export default {
 	render,
 	Edit: null,
 	sort,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
-	validOperators: ALL_OPERATORS,
+	validOperators: getAllOperatorNames(),
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;