@wordpress/dataviews 13.1.1-next.v.202603161435.0 → 14.1.0

package/src/field-types/stories/index.story.tsx

@@ -66,12 +66,17 @@ const meta = {
 				'Add 10 more elements to push over the threshold and trigger Combobox rendering',
 			if: { arg: 'Edit', eq: 'adaptiveSelect' },
 		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Whether the field controls are disabled.',
+		},
 	},
 	args: {
 		type: 'regular',
 		Edit: 'default',
 		asyncElements: false,
 		manyElements: false,
+		disabled: false,
 	},
 };
 export default meta;
@@ -110,6 +115,7 @@ type DataType = {
 	booleanWithToggle: boolean;
 	booleanWithElements: boolean;
 	datetime: string;
+	datetimeCompact?: string;
 	datetimeWithElements: string;
 	date: string;
 	dateWithElements: string;
@@ -150,6 +156,7 @@ const data: DataType[] = [
 		booleanWithToggle: true,
 		booleanWithElements: true,
 		datetime: '2021-01-01T14:30:00Z',
+		datetimeCompact: '2021-01-01T14:30:00Z',
 		datetimeWithElements: '1982-05-10T20:30:00Z',
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
@@ -303,6 +310,16 @@ const fields: Field< DataType >[] = [
 		label: 'Datetime',
 		description: 'Help for datetime.',
 	},
+	{
+		id: 'datetimeCompact',
+		type: 'datetime',
+		label: 'Datetime (compact)',
+		description: 'Datetime field without the calendar widget.',
+		Edit: {
+			control: 'datetime',
+			compact: true,
+		},
+	},
 	{
 		id: 'datetimeWithElements',
 		type: 'datetime',
@@ -578,6 +595,7 @@ interface FieldTypeStoryProps {
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 }
 
 const FieldTypeStory = ( {
@@ -586,17 +604,27 @@ const FieldTypeStory = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: FieldTypeStoryProps ) => {
 	const storyFields = useMemo( () => {
 		let fieldsToProcess = _fields;
 
-		if ( Edit !== 'default' ) {
-			fieldsToProcess = _fields.map( ( field: Field< DataType > ) => ( {
+		if ( disabled ) {
+			fieldsToProcess = fieldsToProcess.map( ( field ) => ( {
 				...field,
-				Edit,
+				isDisabled: true,
 			} ) );
 		}
 
+		if ( Edit !== 'default' ) {
+			fieldsToProcess = fieldsToProcess.map(
+				( field: Field< DataType > ) => ( {
+					...field,
+					Edit,
+				} )
+			);
+		}
+
 		// Expand elements when adaptiveSelect is selected and manyElements is toggled
 		if ( Edit === 'adaptiveSelect' && manyElements ) {
 			fieldsToProcess = fieldsToProcess.map( ( field ) => {
@@ -636,7 +664,7 @@ const FieldTypeStory = ( {
 		}
 
 		return fieldsToProcess;
-	}, [ _fields, Edit, asyncElements, manyElements ] );
+	}, [ _fields, Edit, asyncElements, manyElements, disabled ] );
 	const form = useMemo(
 		() => ( {
 			layout: { type },
@@ -687,7 +715,7 @@ const FieldTypeStory = ( {
 						},
 					] }
 					defaultLayouts={ {
-						table: {},
+						table: true,
 					} }
 					selection={ selectedIds.map( ( id ) => id.toString() ) }
 					onChangeSelection={ ( newSelection ) =>
@@ -744,11 +772,13 @@ export const AllComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	return (
 		<FieldTypeStory
@@ -757,6 +787,7 @@ export const AllComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -767,11 +798,13 @@ export const TextComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const textFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'text' ),
@@ -785,6 +818,7 @@ export const TextComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -796,12 +830,14 @@ export const IntegerComponent = ( {
 	asyncElements,
 	manyElements,
 	formatSeparatorThousand,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
 	formatSeparatorThousand?: string;
+	disabled: boolean;
 } ) => {
 	const integerFields = useMemo(
 		() =>
@@ -828,6 +864,7 @@ export const IntegerComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -851,6 +888,7 @@ export const NumberComponent = ( {
 	formatSeparatorThousand,
 	formatSeparatorDecimal,
 	formatDecimals,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
@@ -859,6 +897,7 @@ export const NumberComponent = ( {
 	formatSeparatorThousand?: string;
 	formatSeparatorDecimal?: string;
 	formatDecimals?: number;
+	disabled: boolean;
 } ) => {
 	const numberFields = useMemo(
 		() =>
@@ -901,6 +940,7 @@ export const NumberComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -933,11 +973,13 @@ export const BooleanComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const booleanFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'boolean' ),
@@ -951,6 +993,7 @@ export const BooleanComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -963,6 +1006,7 @@ export const DateTimeComponent = ( {
 	manyElements,
 	formatDatetime,
 	formatWeekStartsOn,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
@@ -970,6 +1014,7 @@ export const DateTimeComponent = ( {
 	manyElements: boolean;
 	formatDatetime?: string;
 	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	disabled: boolean;
 } ) => {
 	const datetimeFields = useMemo(
 		() =>
@@ -994,7 +1039,7 @@ export const DateTimeComponent = ( {
 					}
 					return field;
 				} ),
-		[ fields, formatDatetime, formatWeekStartsOn ]
+		[ formatDatetime, formatWeekStartsOn ]
 	);
 
 	return (
@@ -1004,6 +1049,7 @@ export const DateTimeComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1042,6 +1088,7 @@ export const DateComponent = ( {
 	manyElements,
 	formatDate,
 	formatWeekStartsOn,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
@@ -1049,6 +1096,7 @@ export const DateComponent = ( {
 	manyElements: boolean;
 	formatDate?: string;
 	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	disabled: boolean;
 } ) => {
 	const dateFields = useMemo(
 		() =>
@@ -1083,6 +1131,7 @@ export const DateComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1119,11 +1168,13 @@ export const EmailComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const emailFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'email' ),
@@ -1137,6 +1188,7 @@ export const EmailComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1147,11 +1199,13 @@ export const TelephoneComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const telephoneFields = fields.filter( ( field ) =>
 		field.id.startsWith( 'telephone' )
@@ -1164,6 +1218,7 @@ export const TelephoneComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1174,11 +1229,13 @@ export const UrlComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const urlFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'url' ),
@@ -1192,6 +1249,7 @@ export const UrlComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1202,11 +1260,13 @@ export const ColorComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const colorFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'color' ),
@@ -1220,6 +1280,7 @@ export const ColorComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1230,11 +1291,13 @@ export const MediaComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const mediaFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'media' ),
@@ -1248,6 +1311,7 @@ export const MediaComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1258,11 +1322,13 @@ export const ArrayComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const arrayTextFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'array' ),
@@ -1276,6 +1342,7 @@ export const ArrayComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1286,11 +1353,13 @@ export const PasswordComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const passwordFields = fields.filter( ( field ) =>
 		field.id.startsWith( 'password' )
@@ -1303,6 +1372,7 @@ export const PasswordComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1313,11 +1383,13 @@ export const NoTypeComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const noTypeFields = useMemo(
 		() => fields.filter( ( field ) => field.type === undefined ),
@@ -1331,6 +1403,7 @@ export const NoTypeComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };

package/src/field-types/test/normalize-fields.ts

@@ -339,6 +339,50 @@ describe( 'normalizeFields: default getValue', () => {
 		} );
 	} );
 
+	describe( 'validation normalization', () => {
+		it( 'ignores string min/max rules on numeric fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+					isValid: {
+						min: '1',
+						max: '10',
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 0 ].isValid.max ).toBeUndefined();
+		} );
+
+		it( 'ignores numeric min/max rules on date-like fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'publishDate',
+					type: 'date',
+					isValid: {
+						min: 1,
+						max: 10,
+					},
+				},
+				{
+					id: 'publishedAt',
+					type: 'datetime',
+					isValid: {
+						min: 1,
+						max: 10,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 0 ].isValid.max ).toBeUndefined();
+			expect( normalizedFields[ 1 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 1 ].isValid.max ).toBeUndefined();
+		} );
+	} );
+
 	describe( 'format normalization', () => {
 		it( 'applies default format when not provided for date fields', () => {
 			const fields: Field< {} >[] = [

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/index.ts

@@ -2,3 +2,6 @@
  * Internal dependencies
  */
 export { default as useFormValidity } from './use-form-validity';
+export { default as useData } from './use-data';
+export { useInfiniteScroll } from './use-infinite-scroll';
+export { default as useSelectedItems } from './use-selected-items';