@wordpress/dataviews 14.1.1-next.v.202604091042.0 → 14.2.0

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

@@ -4,13 +4,42 @@
 import type { Field, NormalizedRules } from '../../types';
 import type { FieldType } from '../../types/private';
 
+function supportsNumericRangeConstraint( type?: string ) {
+	return type === 'integer' || type === 'number';
+}
+
+function supportsDateRangeConstraint( type?: string ) {
+	return type === 'date' || type === 'datetime';
+}
+
+function normalizeRangeRule< Item >(
+	value: number | string | undefined,
+	fieldType: FieldType< Item >,
+	key: 'min' | 'max'
+): NormalizedRules< Item >[ 'min' ] {
+	const validator = fieldType.validate[ key ];
+	if (
+		validator &&
+		( ( typeof value === 'number' &&
+			supportsNumericRangeConstraint( fieldType.type ) ) ||
+			( typeof value === 'string' &&
+				supportsDateRangeConstraint( fieldType.type ) ) )
+	) {
+		return { constraint: value, validate: validator } as NonNullable<
+			NormalizedRules< Item >[ typeof key ]
+		>;
+	}
+	return undefined;
+}
+
 export default function getIsValid< Item >(
 	field: Field< Item >,
 	fieldType: FieldType< Item >
 ): NormalizedRules< Item > {
+	const rules = field.isValid;
 	let required;
 	if (
-		field.isValid?.required === true &&
+		rules?.required === true &&
 		fieldType.validate.required !== undefined
 	) {
 		required = {
@@ -21,9 +50,9 @@ export default function getIsValid< Item >(
 
 	let elements;
 	if (
-		( field.isValid?.elements === true ||
+		( rules?.elements === true ||
 			// elements is enabled unless the field opts-out
-			( field.isValid?.elements === undefined &&
+			( rules?.elements === undefined &&
 				( !! field.elements || !! field.getElements ) ) ) &&
 		fieldType.validate.elements !== undefined
 	) {
@@ -33,62 +62,46 @@ export default function getIsValid< Item >(
 		};
 	}
 
-	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,
-		};
-	}
+	const min = normalizeRangeRule( rules?.min, fieldType, 'min' );
+	const max = normalizeRangeRule( rules?.max, fieldType, 'max' );
 
+	const minLengthValue = rules?.minLength;
 	let minLength;
 	if (
-		typeof field.isValid?.minLength === 'number' &&
+		typeof minLengthValue === 'number' &&
 		fieldType.validate.minLength !== undefined
 	) {
 		minLength = {
-			constraint: field.isValid.minLength,
+			constraint: minLengthValue,
 			validate: fieldType.validate.minLength,
 		};
 	}
 
+	const maxLengthValue = rules?.maxLength;
 	let maxLength;
 	if (
-		typeof field.isValid?.maxLength === 'number' &&
+		typeof maxLengthValue === 'number' &&
 		fieldType.validate.maxLength !== undefined
 	) {
 		maxLength = {
-			constraint: field.isValid.maxLength,
+			constraint: maxLengthValue,
 			validate: fieldType.validate.maxLength,
 		};
 	}
 
+	const patternValue = rules?.pattern;
 	let pattern;
 	if (
-		field.isValid?.pattern !== undefined &&
+		patternValue !== undefined &&
 		fieldType.validate.pattern !== undefined
 	) {
 		pattern = {
-			constraint: field.isValid?.pattern,
+			constraint: patternValue,
 			validate: fieldType.validate.pattern,
 		};
 	}
 
-	const custom = field.isValid?.custom ?? fieldType.validate.custom;
+	const custom = rules?.custom ?? fieldType.validate.custom;
 
 	return {
 		required,

package/src/field-types/utils/is-valid-date-boundary.ts

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { isValid as isValidDate } from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { getDate } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type Boundary = 'min' | 'max';
+
+function parseDateLike( value?: string ) {
+	if ( ! value ) {
+		return null;
+	}
+
+	// Pre-check to avoid passing unparseable strings to getDate,
+	// which uses moment.js and emits deprecation warnings.
+	if ( ! isValidDate( new Date( value ) ) ) {
+		return null;
+	}
+
+	const parsed = getDate( value );
+	return parsed && isValidDate( parsed ) ? parsed : null;
+}
+
+function validateDateLikeBoundary< Item >(
+	item: Item,
+	field: NormalizedField< Item >,
+	boundary: Boundary
+): boolean {
+	const constraint = field.isValid[ boundary ]?.constraint;
+	if ( typeof constraint !== 'string' ) {
+		return false;
+	}
+
+	const value = field.getValue( { item } );
+	const boundaryValue = Array.isArray( value )
+		? value[ boundary === 'min' ? 0 : value.length - 1 ]
+		: value;
+
+	if (
+		boundaryValue === undefined ||
+		boundaryValue === null ||
+		boundaryValue === ''
+	) {
+		return true;
+	}
+
+	const parsedConstraint = parseDateLike( constraint );
+	const parsedValue = parseDateLike( String( boundaryValue ) );
+
+	return (
+		!! parsedConstraint &&
+		!! parsedValue &&
+		( boundary === 'min'
+			? parsedValue.getTime() >= parsedConstraint.getTime()
+			: parsedValue.getTime() <= parsedConstraint.getTime() )
+	);
+}
+
+export function isValidMinDate< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	return validateDateLikeBoundary( item, field, 'min' );
+}
+
+export function isValidMaxDate< Item >(
+	item: Item,
+	field: NormalizedField< Item >
+): boolean {
+	return validateDateLikeBoundary( item, field, 'max' );
+}

package/src/hooks/test/use-form-validity.ts

@@ -1039,6 +1039,485 @@ describe( 'useFormValidity', () => {
 		} );
 	} );
 
+	describe( 'isValid.min (date)', () => {
+		const MIN_MESSAGE = {
+			min: {
+				type: 'invalid',
+				message: 'Value is below the minimum.',
+			},
+		};
+
+		it( 'date is valid when value is at min', () => {
+			const item = { id: 1, eventDate: '2026-04-01' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'date is invalid when value is before min', () => {
+			const item = { id: 1, eventDate: '2026-03-15' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.eventDate ).toEqual( MIN_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+
+		it( 'date is valid when value is empty and min is defined', () => {
+			const item = { id: 1, eventDate: undefined };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'date range: from date is validated against min', () => {
+			const item = {
+				id: 1,
+				dateRange: [ '2026-03-15', '2026-04-10' ],
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'dateRange',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+					},
+				},
+			];
+			const form = { fields: [ 'dateRange' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.dateRange ).toEqual( MIN_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+	} );
+
+	describe( 'isValid.max (date)', () => {
+		const MAX_MESSAGE = {
+			max: {
+				type: 'invalid',
+				message: 'Value is above the maximum.',
+			},
+		};
+
+		it( 'date is valid when value is at max', () => {
+			const item = { id: 1, eventDate: '2026-04-20' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						max: '2026-04-20',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'date is invalid when value is after max', () => {
+			const item = { id: 1, eventDate: '2026-05-01' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						max: '2026-04-20',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.eventDate ).toEqual( MAX_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+
+		it( 'date range: to date is validated against max', () => {
+			const item = {
+				id: 1,
+				dateRange: [ '2026-04-05', '2026-04-25' ],
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'dateRange',
+					type: 'date',
+					isValid: {
+						max: '2026-04-20',
+					},
+				},
+			];
+			const form = { fields: [ 'dateRange' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.dateRange ).toEqual( MAX_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+	} );
+
+	describe( 'isValid.min (datetime)', () => {
+		const MIN_MESSAGE = {
+			min: {
+				type: 'invalid',
+				message: 'Value is below the minimum.',
+			},
+		};
+
+		it( 'datetime is valid when value is at min', () => {
+			const item = {
+				id: 1,
+				createdAt: '2026-04-01T10:00:00.000Z',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						min: '2026-04-01T10:00:00.000Z',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'datetime is invalid when value is before min', () => {
+			const item = {
+				id: 1,
+				createdAt: '2026-03-31T23:59:59.000Z',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						min: '2026-04-01T10:00:00.000Z',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.createdAt ).toEqual( MIN_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+
+		it( 'datetime is valid when min uses an offset-based ISO string', () => {
+			const item = {
+				id: 1,
+				createdAt: '2026-04-01T09:30:00.000Z',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						min: '2026-04-01T10:00:00+02:00',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+	} );
+
+	describe( 'isValid.max (datetime)', () => {
+		const MAX_MESSAGE = {
+			max: {
+				type: 'invalid',
+				message: 'Value is above the maximum.',
+			},
+		};
+
+		it( 'datetime is valid when value is at max', () => {
+			const item = {
+				id: 1,
+				createdAt: '2026-04-30T23:59:59.000Z',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						max: '2026-04-30T23:59:59.000Z',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'datetime is invalid when value is after max', () => {
+			const item = {
+				id: 1,
+				createdAt: '2026-05-01T00:00:00.000Z',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						max: '2026-04-30T23:59:59.000Z',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.createdAt ).toEqual( MAX_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+
+		it( 'datetime is invalid when max uses an offset-based ISO string', () => {
+			const item = {
+				id: 1,
+				createdAt: '2026-04-01T09:30:00.000Z',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						max: '2026-04-01T10:00:00+02:00',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.createdAt ).toEqual( MAX_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+
+		it( 'datetime is invalid when value cannot be parsed', () => {
+			const item = {
+				id: 1,
+				createdAt: 'not-a-date',
+			};
+			const fields: Field< {} >[] = [
+				{
+					id: 'createdAt',
+					type: 'datetime',
+					isValid: {
+						max: '2026-04-30T23:59:59.000Z',
+					},
+				},
+			];
+			const form = { fields: [ 'createdAt' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.createdAt ).toEqual( MAX_MESSAGE );
+			expect( isValid ).toBe( false );
+		} );
+	} );
+
+	describe( 'isValid combined min and max (date)', () => {
+		it( 'date is valid when value is within range', () => {
+			const item = { id: 1, eventDate: '2026-04-10' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+						max: '2026-04-30',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'date is invalid when value is below min with both min and max', () => {
+			const item = { id: 1, eventDate: '2026-03-15' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+						max: '2026-04-30',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.eventDate ).toEqual( {
+				min: {
+					type: 'invalid',
+					message: 'Value is below the minimum.',
+				},
+			} );
+			expect( isValid ).toBe( false );
+		} );
+
+		it( 'date is invalid when value is above max with both min and max', () => {
+			const item = { id: 1, eventDate: '2026-05-15' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'eventDate',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+						max: '2026-04-30',
+					},
+				},
+			];
+			const form = { fields: [ 'eventDate' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity?.eventDate ).toEqual( {
+				max: {
+					type: 'invalid',
+					message: 'Value is above the maximum.',
+				},
+			} );
+			expect( isValid ).toBe( false );
+		} );
+	} );
+
+	describe( 'isValid empty array (date)', () => {
+		it( 'empty array is valid for min validation', () => {
+			const item = { id: 1, dateRange: [] as string[] };
+			const fields: Field< {} >[] = [
+				{
+					id: 'dateRange',
+					type: 'date',
+					isValid: {
+						min: '2026-04-01',
+					},
+				},
+			];
+			const form = { fields: [ 'dateRange' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+
+		it( 'empty array is valid for max validation', () => {
+			const item = { id: 1, dateRange: [] as string[] };
+			const fields: Field< {} >[] = [
+				{
+					id: 'dateRange',
+					type: 'date',
+					isValid: {
+						max: '2026-04-30',
+					},
+				},
+			];
+			const form = { fields: [ 'dateRange' ] };
+			const {
+				result: {
+					current: { validity, isValid },
+				},
+			} = renderHook( () => useFormValidity( item, fields, form ) );
+			expect( validity ).toEqual( undefined );
+			expect( isValid ).toBe( true );
+		} );
+	} );
+
 	describe( 'isValid.minLength', () => {
 		const MIN_LENGTH_MESSAGE = {
 			minLength: {

package/src/types/dataviews.ts

@@ -527,6 +527,15 @@ export type ViewPickerProps< Item > =
 	| ViewPickerTableProps< Item >;
 
 export interface SupportedLayouts {
+	list?: Omit< ViewList, 'type' > | true;
+	grid?: Omit< ViewGrid, 'type' > | true;
+	table?: Omit< ViewTable, 'type' > | true;
+	activity?: Omit< ViewActivity, 'type' > | true;
+	pickerGrid?: Omit< ViewPickerGrid, 'type' > | true;
+	pickerTable?: Omit< ViewPickerTable, 'type' > | true;
+}
+
+export interface NormalizedSupportedLayouts {
 	list?: Omit< ViewList, 'type' >;
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;