@wordpress/dataviews 11.0.0 → 11.1.0

package/src/field-types/number.tsx

@@ -6,7 +6,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { DataViewRenderFieldProps, Rules } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	Field,
+	FormatNumber,
+	NormalizedField,
+} from '../types';
 import type { FieldType } from '../types/private';
 import {
 	OPERATOR_IS,
@@ -23,6 +28,52 @@ import {
 } from '../constants';
 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';
+
+function getFormat< Item >( field: Field< Item > ): Required< FormatNumber > {
+	const fieldFormat = field.format as FormatNumber | undefined;
+	return {
+		separatorThousand:
+			fieldFormat?.separatorThousand !== undefined &&
+			typeof fieldFormat.separatorThousand === 'string'
+				? fieldFormat.separatorThousand
+				: ',',
+		separatorDecimal:
+			fieldFormat?.separatorDecimal !== undefined &&
+			typeof fieldFormat.separatorDecimal === 'string'
+				? fieldFormat.separatorDecimal
+				: '.',
+		decimals:
+			fieldFormat?.decimals !== undefined &&
+			typeof fieldFormat.decimals === 'number' &&
+			fieldFormat.decimals >= 0 &&
+			fieldFormat.decimals <= 100 &&
+			Number.isInteger( fieldFormat.decimals )
+				? fieldFormat.decimals
+				: 2,
+	};
+}
+
+export function formatNumber(
+	value: number,
+	format: Required< FormatNumber >
+): string {
+	if ( ! Number.isFinite( value ) ) {
+		return String( value );
+	}
+	const { separatorThousand, separatorDecimal, decimals } = format;
+	const fixedValue = value.toFixed( decimals );
+	const [ integerPart, decimalPart ] = fixedValue.split( '.' );
+	const formattedInteger = separatorThousand
+		? integerPart.replace( /\B(?=(\d{3})+(?!\d))/g, separatorThousand )
+		: integerPart;
+	return decimals === 0
+		? formattedInteger
+		: formattedInteger + separatorDecimal + decimalPart;
+}
 
 function isEmpty( value: unknown ): value is '' | undefined | null {
 	return value === '' || value === undefined || value === null;
@@ -34,32 +85,40 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	}
 
 	const value = field.getValue( { item } );
-	if ( ! [ null, undefined ].includes( value ) ) {
-		return Number( value ).toFixed( 2 );
+	if ( [ null, undefined ].includes( value ) ) {
+		return '';
 	}
 
-	return null;
+	// If the field type is number, we've already normalized the format,
+	// and so it's safe to tell TypeScript to trust us ("as Required<FormatNumber>").
+	//
+	// There're no runtime paths where this render function is called with a non-number field,
+	// but TypeScript is unable to infer this, hence the type assertion.
+	let format: Required< FormatNumber >;
+	if ( field.type !== 'number' ) {
+		format = getFormat( field as Field< any > );
+	} else {
+		format = field.format as Required< FormatNumber >;
+	}
+
+	return formatNumber( Number( value ), format );
 }
 
-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 ( ! isEmpty( value ) && ! Number.isFinite( value ) ) {
-			return __( 'Value must be a number.' );
-		}
+	if ( ! isEmpty( value ) && ! Number.isFinite( value ) ) {
+		return __( 'Value must be a number.' );
+	}
 
-		return null;
-	},
-};
+	return null;
+}
 
 export default {
 	type: 'number',
 	render,
 	Edit: 'number',
 	sort,
-	isValid,
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [
@@ -86,5 +145,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/password.tsx

@@ -4,6 +4,11 @@
 import type { DataViewRenderFieldProps } from '../types';
 import type { FieldType } from '../types/private';
 import RenderFromElements from './utils/render-from-elements';
+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';
 
 function render( { item, field }: DataViewRenderFieldProps< any > ) {
 	return field.hasElements ? (
@@ -18,13 +23,16 @@ export default {
 	render,
 	Edit: 'password',
 	sort: () => 0, // Passwords should not be sortable for security reasons
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: false,
 	enableGlobalSearch: false,
 	defaultOperators: [],
 	validOperators: [],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		pattern: isValidPattern,
+		minLength: isValidMinLength,
+		maxLength: isValidMaxLength,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;

package/src/field-types/telephone.tsx

@@ -15,16 +15,17 @@ 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';
 
 export default {
 	type: 'telephone',
 	render,
 	Edit: 'telephone',
 	sort,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
@@ -41,4 +42,11 @@ export default {
 		OPERATOR_IS_NOT_ALL,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		pattern: isValidPattern,
+		minLength: isValidMinLength,
+		maxLength: isValidMaxLength,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;

package/src/field-types/text.tsx

@@ -15,16 +15,17 @@ 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';
 
 export default {
 	type: 'text',
 	render,
 	Edit: 'text',
 	sort,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
@@ -42,4 +43,11 @@ export default {
 		OPERATOR_IS_NOT_ALL,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		pattern: isValidPattern,
+		minLength: isValidMinLength,
+		maxLength: isValidMaxLength,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;

package/src/field-types/url.tsx

@@ -15,16 +15,17 @@ 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';
 
 export default {
 	type: 'url',
 	render,
 	Edit: 'url',
 	sort,
-	isValid: {
-		elements: true,
-		custom: () => null,
-	},
 	enableSorting: true,
 	enableGlobalSearch: false,
 	defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
@@ -41,4 +42,11 @@ export default {
 		OPERATOR_IS_NOT_ALL,
 	],
 	getFormat: () => ( {} ),
+	validate: {
+		required: isValidRequired,
+		pattern: isValidPattern,
+		minLength: isValidMinLength,
+		maxLength: isValidMaxLength,
+		elements: isValidElements,
+	},
 } satisfies FieldType< any >;

package/src/field-types/utils/get-is-valid.ts

@@ -0,0 +1,103 @@
+/**
+ * Internal dependencies
+ */
+import type { Field, NormalizedRules } from '../../types';
+import type { FieldType } from '../../types/private';
+
+export default function getIsValid< Item >(
+	field: Field< Item >,
+	fieldType: FieldType< Item >
+): NormalizedRules< Item > {
+	let required;
+	if (
+		field.isValid?.required === true &&
+		fieldType.validate.required !== undefined
+	) {
+		required = {
+			constraint: true,
+			validate: fieldType.validate.required,
+		};
+	}
+
+	let elements;
+	if (
+		( field.isValid?.elements === true ||
+			// elements is enabled unless the field opts-out
+			( field.isValid?.elements === undefined &&
+				( !! field.elements || !! field.getElements ) ) ) &&
+		fieldType.validate.elements !== undefined
+	) {
+		elements = {
+			constraint: true,
+			validate: fieldType.validate.elements,
+		};
+	}
+
+	let min;
+	if (
+		typeof field.isValid?.min === 'number' &&
+		fieldType.validate.min !== undefined
+	) {
+		min = {
+			constraint: field.isValid.min,
+			validate: fieldType.validate.min,
+		};
+	}
+
+	let max;
+	if (
+		typeof field.isValid?.max === 'number' &&
+		fieldType.validate.max !== undefined
+	) {
+		max = {
+			constraint: field.isValid.max,
+			validate: fieldType.validate.max,
+		};
+	}
+
+	let minLength;
+	if (
+		typeof field.isValid?.minLength === 'number' &&
+		fieldType.validate.minLength !== undefined
+	) {
+		minLength = {
+			constraint: field.isValid.minLength,
+			validate: fieldType.validate.minLength,
+		};
+	}
+
+	let maxLength;
+	if (
+		typeof field.isValid?.maxLength === 'number' &&
+		fieldType.validate.maxLength !== undefined
+	) {
+		maxLength = {
+			constraint: field.isValid.maxLength,
+			validate: fieldType.validate.maxLength,
+		};
+	}
+
+	let pattern;
+	if (
+		field.isValid?.pattern !== undefined &&
+		fieldType.validate.pattern !== undefined
+	) {
+		pattern = {
+			constraint: field.isValid?.pattern,
+			validate: fieldType.validate.pattern,
+		};
+	}
+
+	const custom = field.isValid?.custom ?? fieldType.validate.custom;
+
+	return {
+		required,
+		elements,
+		min,
+		max,
+		minLength,
+		maxLength,
+		pattern,
+		custom,
+	};
+}

package/src/field-types/utils/is-valid-elements.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidElements< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	const elements = field.elements ?? [];
+	const validValues = elements.map( ( el ) => el.value );
+	if ( validValues.length === 0 ) {
+		return true;
+	}
+
+	const value = field.getValue( { item } );
+
+	// Covers both array and non-array values.
+	return [].concat( value ).every( ( v ) => validValues.includes( v ) );
+}

package/src/field-types/utils/is-valid-max-length.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidMaxLength< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	if ( typeof field.isValid.maxLength?.constraint !== 'number' ) {
+		return false;
+	}
+
+	const value = field.getValue( { item } );
+
+	// Empty values are considered valid for maxLength validation
+	// (use required validation to enforce non-empty values)
+	if ( [ undefined, '', null ].includes( value ) ) {
+		return true;
+	}
+
+	return String( value ).length <= field.isValid.maxLength.constraint;
+}

package/src/field-types/utils/is-valid-max.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidMax< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	if ( typeof field.isValid.max?.constraint !== 'number' ) {
+		return false;
+	}
+
+	const value = field.getValue( { item } );
+
+	// Empty values are considered valid for max validation
+	// (use required validation to enforce non-empty values)
+	if ( [ undefined, '', null ].includes( value ) ) {
+		return true;
+	}
+
+	return Number( value ) <= field.isValid.max.constraint;
+}

package/src/field-types/utils/is-valid-min-length.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidMinLength< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	if ( typeof field.isValid.minLength?.constraint !== 'number' ) {
+		return false;
+	}
+
+	const value = field.getValue( { item } );
+
+	// Empty values are considered valid for minLength validation
+	// (use required validation to enforce non-empty values)
+	if ( [ undefined, '', null ].includes( value ) ) {
+		return true;
+	}
+
+	return String( value ).length >= field.isValid.minLength.constraint;
+}

package/src/field-types/utils/is-valid-min.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidMin< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	if ( typeof field.isValid.min?.constraint !== 'number' ) {
+		return false;
+	}
+
+	const value = field.getValue( { item } );
+
+	// Empty values are considered valid for min validation
+	// (use required validation to enforce non-empty values)
+	if ( [ undefined, '', null ].includes( value ) ) {
+		return true;
+	}
+
+	return Number( value ) >= field.isValid.min.constraint;
+}

package/src/field-types/utils/is-valid-pattern.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidPattern< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	if ( field.isValid.pattern?.constraint === undefined ) {
+		return true;
+	}
+
+	try {
+		const regexp = new RegExp( field.isValid.pattern.constraint );
+
+		const value = field.getValue( { item } );
+
+		// Empty values are considered valid for pattern validation
+		// (use required validation to enforce non-empty values)
+		if ( [ undefined, '', null ].includes( value ) ) {
+			return true;
+		}
+
+		return regexp.test( String( value ) );
+	} catch {
+		return false;
+	}
+}

package/src/field-types/utils/is-valid-required-for-array.ts

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidRequiredForArray< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+) {
+	const value = field.getValue( { item } );
+	return (
+		Array.isArray( value ) &&
+		value.length > 0 &&
+		value.every(
+			( element: any ) => ! [ undefined, '', null ].includes( element )
+		)
+	);
+}

package/src/field-types/utils/is-valid-required-for-bool.ts

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidRequiredForBool< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+) {
+	const value = field.getValue( { item } );
+
+	return value === true;
+}

package/src/field-types/utils/is-valid-required.ts

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+export default function isValidRequired< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+) {
+	const value = field.getValue( { item } );
+
+	return ! [ undefined, '', null ].includes( value );
+}