@wordpress/dataviews 11.0.0 → 11.1.0

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

@@ -23,36 +23,6 @@ import type {
 	NormalizedField,
 	NormalizedFormField,
 } from '../types';
-const isEmptyNullOrUndefined = ( value: any ) =>
-	[ undefined, '', null ].includes( value );
-
-const isArrayOrElementsEmptyNullOrUndefined = ( value: any ) => {
-	return (
-		! Array.isArray( value ) ||
-		value.length === 0 ||
-		value.every( ( element: any ) => isEmptyNullOrUndefined( element ) )
-	);
-};
-
-function isInvalidForRequired( fieldType: string | undefined, value: any ) {
-	if (
-		( fieldType === undefined && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'text' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'email' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'url' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'telephone' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'password' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'integer' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'number' && isEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'array' &&
-			isArrayOrElementsEmptyNullOrUndefined( value ) ) ||
-		( fieldType === 'boolean' && value !== true )
-	) {
-		return true;
-	}
-
-	return false;
-}
 
 function isFormValid( formValidity: FormValidity | undefined ): boolean {
 	if ( ! formValidity ) {
@@ -223,57 +193,12 @@ function handleElementsValidationAsync< Item >(
 				return;
 			}
 
-			const validValues = result.map( ( el ) => el.value );
-			if (
-				!! formField.field &&
-				formField.field.type !== 'array' &&
-				! validValues.includes( formField.field.getValue( { item } ) )
-			) {
-				setFormValidity( ( prev ) => {
-					const newFormValidity = setValidityAtPath(
-						prev,
-						{
-							elements: {
-								type: 'invalid',
-								message: __(
-									'Value must be one of the elements.'
-								),
-							},
-						},
-						[ ...path, formField.id ]
-					);
-					return newFormValidity;
-				} );
-				return;
-			}
-
 			if (
-				!! formField.field &&
-				formField.field.type === 'array' &&
-				! Array.isArray( formField.field.getValue( { item } ) )
-			) {
-				setFormValidity( ( prev ) => {
-					const newFormValidity = setValidityAtPath(
-						prev,
-						{
-							elements: {
-								type: 'invalid',
-								message: __( 'Value must be an array.' ),
-							},
-						},
-						[ ...path, formField.id ]
-					);
-					return newFormValidity;
-				} );
-				return;
-			}
-
-			if (
-				!! formField.field &&
-				formField.field.type === 'array' &&
-				formField.field
-					.getValue( { item } )
-					.some( ( v: any ) => ! validValues.includes( v ) )
+				formField.field?.isValid.elements &&
+				! formField.field.isValid.elements.validate( item, {
+					...formField.field,
+					elements: result,
+				} )
 			) {
 				setFormValidity( ( prev ) => {
 					const newFormValidity = setValidityAtPath(
@@ -434,12 +359,8 @@ function validateFormField< Item >(
 ): FieldValidity | undefined {
 	// Validate the field: isValid.required
 	if (
-		!! formField.field &&
-		formField.field.isValid.required &&
-		isInvalidForRequired(
-			formField.field.type,
-			formField.field.getValue( { item } )
-		)
+		formField.field?.isValid.required &&
+		! formField.field.isValid.required.validate( item, formField.field )
 	) {
 		return {
 			required: { type: 'invalid' },
@@ -448,82 +369,83 @@ function validateFormField< Item >(
 
 	// Validate the field: isValid.pattern
 	if (
-		!! formField.field &&
-		formField.field.isValid.pattern &&
-		( formField.field.type === 'text' ||
-			formField.field.type === 'email' ||
-			formField.field.type === 'url' ||
-			formField.field.type === 'telephone' ||
-			formField.field.type === 'password' )
+		formField.field?.isValid.pattern &&
+		! formField.field.isValid.pattern.validate( item, formField.field )
 	) {
-		const value = formField.field.getValue( { item } );
-		// Only validate pattern if the value is not empty
-		if ( ! isEmptyNullOrUndefined( value ) ) {
-			try {
-				const regex = new RegExp( formField.field.isValid.pattern );
-				if ( ! regex.test( String( value ) ) ) {
-					return {
-						pattern: {
-							type: 'invalid',
-							message: __(
-								'Value does not match the required pattern.'
-							),
-						},
-					};
-				}
-			} catch ( error ) {
-				return {
-					pattern: {
-						type: 'invalid',
-						message: __( 'Invalid pattern configuration.' ),
-					},
-				};
-			}
-		}
+		return {
+			pattern: {
+				type: 'invalid',
+				message: __( 'Value does not match the required pattern.' ),
+			},
+		};
+	}
+
+	// Validate the field: isValid.min
+	if (
+		formField.field?.isValid.min &&
+		! formField.field.isValid.min.validate( item, formField.field )
+	) {
+		return {
+			min: {
+				type: 'invalid',
+				message: __( 'Value is below the minimum.' ),
+			},
+		};
+	}
+
+	// Validate the field: isValid.max
+	if (
+		formField.field?.isValid.max &&
+		! formField.field.isValid.max.validate( item, formField.field )
+	) {
+		return {
+			max: {
+				type: 'invalid',
+				message: __( 'Value is above the maximum.' ),
+			},
+		};
+	}
+
+	// Validate the field: isValid.minLength
+	if (
+		formField.field?.isValid.minLength &&
+		! formField.field.isValid.minLength.validate( item, formField.field )
+	) {
+		return {
+			minLength: {
+				type: 'invalid',
+				message: __( 'Value is too short.' ),
+			},
+		};
+	}
+
+	// Validate the field: isValid.maxLength
+	if (
+		formField.field?.isValid.maxLength &&
+		! formField.field.isValid.maxLength.validate( item, formField.field )
+	) {
+		return {
+			maxLength: {
+				type: 'invalid',
+				message: __( 'Value is too long.' ),
+			},
+		};
 	}
 
 	// Validate the field: isValid.elements (static)
 	if (
-		!! formField.field &&
-		formField.field.isValid.elements &&
+		formField.field?.isValid.elements &&
 		formField.field.hasElements &&
 		! formField.field.getElements &&
-		Array.isArray( formField.field.elements )
+		Array.isArray( formField.field.elements ) &&
+		! formField.field.isValid.elements.validate( item, formField.field )
 	) {
-		const value = formField.field.getValue( { item } );
-		const validValues = formField.field.elements.map( ( el ) => el.value );
-
-		if (
-			formField.field.type !== 'array' &&
-			! validValues.includes( value )
-		) {
-			return {
-				elements: {
-					type: 'invalid',
-					message: __( 'Value must be one of the elements.' ),
-				},
-			};
-		}
-
-		if ( formField.field.type === 'array' && ! Array.isArray( value ) ) {
-			return {
-				elements: {
-					type: 'invalid',
-					message: __( 'Value must be an array.' ),
-				},
-			};
-		}
-		if (
-			formField.field.type === 'array' &&
-			value.some( ( v: any ) => ! validValues.includes( v ) )
-		) {
-			return {
-				elements: {
-					type: 'invalid',
-					message: __( 'Value must be one of the elements.' ),
-				},
-			};
-		}
+		return {
+			elements: {
+				type: 'invalid',
+				message: __( 'Value must be one of the elements.' ),
+			},
+		};
 	}
 
 	// Validate the field: isValid.elements (async)
@@ -549,10 +471,10 @@ function validateFormField< Item >(
 
 	// Validate the field: isValid.custom (sync)
 	let customError;
-	if ( !! formField.field ) {
+	if ( !! formField.field && formField.field.isValid.custom ) {
 		try {
 			const value = formField.field.getValue( { item } );
-			customError = formField.field.isValid?.custom?.(
+			customError = formField.field.isValid.custom(
 				deepMerge(
 					item,
 					formField.field.setValue( {

package/src/stories/dataform.story.tsx

@@ -26,9 +26,9 @@ import type {
 	FieldValidity,
 	Form,
 	Layout,
+	NormalizedRules,
 	PanelLayout,
 	RegularLayout,
-	Rules,
 } from '../types';
 import { unlock } from '../lock-unlock';
 import DateControl from '../dataform-controls/date';
@@ -497,7 +497,7 @@ const LayoutPanelComponent = ( {
 };
 
 function getCustomValidity< Item >(
-	isValid: Rules< Item >,
+	isValid: NormalizedRules< Item >,
 	validity: FieldValidity | undefined
 ) {
 	let customValidity;
@@ -554,11 +554,13 @@ const ValidationComponent = ( {
 	elements,
 	custom,
 	pattern,
+	minMax,
 }: {
 	required: boolean;
 	elements: 'sync' | 'async' | 'none';
 	custom: 'sync' | 'async' | 'none';
 	pattern: boolean;
+	minMax: boolean;
 } ) => {
 	type ValidatedItem = {
 		text: string;
@@ -909,20 +911,63 @@ const ValidationComponent = ( {
 			return undefined;
 		};
 
+		// Helper functions to avoid nested ternary expressions
+		const getValidationPlaceholder = (
+			basePattern: string,
+			baseMinMax: string,
+			bothPattern: string
+		) => {
+			if ( pattern && minMax ) {
+				return bothPattern;
+			}
+			if ( pattern ) {
+				return basePattern;
+			}
+			if ( minMax ) {
+				return baseMinMax;
+			}
+			return undefined;
+		};
+
+		const getValidationDescription = (
+			patternDesc: string,
+			minMaxDesc: string,
+			bothDesc: string
+		) => {
+			if ( pattern && minMax ) {
+				return bothDesc;
+			}
+			if ( pattern ) {
+				return patternDesc;
+			}
+			if ( minMax ) {
+				return minMaxDesc;
+			}
+			return undefined;
+		};
+
 		return [
 			{
 				id: 'text',
 				type: 'text',
 				label: 'Text',
-				placeholder: pattern ? 'user_name123' : undefined,
-				description: pattern
-					? 'Must contain only letters, numbers, and underscores'
-					: undefined,
+				placeholder: getValidationPlaceholder(
+					'user_name (alphanumeric+underscore)',
+					'Min 5, max 20 characters',
+					'user_name (5-20 chars, alphanumeric+underscore)'
+				),
+				description: getValidationDescription(
+					'Must contain only letters, numbers, and underscores',
+					'Must be between 5 and 20 characters',
+					'Letters, numbers, underscores only AND 5-20 characters'
+				),
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextRule ),
 					pattern: pattern ? '^[a-zA-Z0-9_]+$' : undefined,
+					minLength: minMax ? 5 : undefined,
+					maxLength: minMax ? 20 : undefined,
 				},
 			},
 			{
@@ -971,61 +1016,89 @@ const ValidationComponent = ( {
 				type: 'text',
 				Edit: 'textarea',
 				label: 'Textarea',
+				placeholder: minMax ? 'Min 10, max 200 characters' : undefined,
+				description: minMax
+					? 'Must be between 10 and 200 characters'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextareaRule ),
+					minLength: minMax ? 10 : undefined,
+					maxLength: minMax ? 200 : undefined,
 				},
 			},
 			{
 				id: 'email',
 				type: 'email',
 				label: 'e-mail',
-				placeholder: pattern ? 'user@company.com' : undefined,
-				description: pattern
-					? 'Email must be from @company.com domain'
-					: undefined,
+				placeholder: getValidationPlaceholder(
+					'user@company.com',
+					'Min 15, max 100 characters',
+					'user@company.com (15-100 chars)'
+				),
+				description: getValidationDescription(
+					'Email must be from @company.com domain',
+					'Must be between 15 and 100 characters',
+					'Must be @company.com domain AND 15-100 characters'
+				),
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customEmailRule ),
-					pattern: pattern ? '^[a-zA-Z0-9]+@company.com$' : undefined,
+					pattern: pattern
+						? '^[a-zA-Z0-9._%+-]+@company\\.com$'
+						: undefined,
+					minLength: minMax ? 15 : undefined,
+					maxLength: minMax ? 100 : undefined,
 				},
 			},
 			{
 				id: 'telephone',
 				type: 'telephone',
 				label: 'telephone',
-				placeholder: pattern ? '+1-555-123-4567' : undefined,
-				description: pattern
-					? 'US phone format with country code'
-					: undefined,
+				placeholder: getValidationPlaceholder(
+					'+1-555-123-4567',
+					'Min 10, max 20 characters',
+					'+1-555-123-4567 (10-20 chars)'
+				),
+				description: getValidationDescription(
+					'US phone format with country code',
+					'Must be between 10 and 20 characters',
+					'US format +1-XXX... AND 10-20 characters'
+				),
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTelephoneRule ),
-					pattern: pattern
-						? '^\\+1-\\d{3}-\\d{3}-\\d{4}$'
-						: undefined,
+					pattern: pattern ? '^\\+1-\\d{3}-[0-9-]*$' : undefined,
+					minLength: minMax ? 10 : undefined,
+					maxLength: minMax ? 20 : undefined,
 				},
 			},
 			{
 				id: 'url',
 				type: 'url',
 				label: 'URL',
-				placeholder: pattern
-					? 'https://github.com/user/repo'
-					: undefined,
-				description: pattern
-					? 'Must be a GitHub repository URL'
-					: undefined,
+				placeholder: getValidationPlaceholder(
+					'https://github.com/user/repo',
+					'Min 25, max 255 characters',
+					'https://github.com/user/repo (10-255 chars)'
+				),
+				description: getValidationDescription(
+					'Must be a GitHub repository URL',
+					'Must be between 25 and 255 characters',
+					'GitHub repository URL AND 25-255 characters'
+				),
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customUrlRule ),
 					pattern: pattern
-						? '^https:\\/\\/github\\.com\\/.*'
+						? '^https:\\/\\/github\\.com\\/.+$'
 						: undefined,
+					minLength: minMax ? 25 : undefined,
+					maxLength: minMax ? 255 : undefined,
 				},
 			},
 			{
@@ -1042,20 +1115,28 @@ const ValidationComponent = ( {
 				id: 'integer',
 				type: 'integer',
 				label: 'Integer',
+				placeholder: minMax ? 'Min 10, max 100' : undefined,
+				description: minMax ? 'Must be between 10 and 100' : undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customIntegerRule ),
+					min: minMax ? 10 : undefined,
+					max: minMax ? 100 : undefined,
 				},
 			},
 			{
 				id: 'number',
 				type: 'number',
 				label: 'Number',
+				placeholder: minMax ? 'Min 10, max 100' : undefined,
+				description: minMax ? 'Must be between 0 and 100' : undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customNumberRule ),
+					min: minMax ? 10 : undefined,
+					max: minMax ? 100 : undefined,
 				},
 			},
 			{
@@ -1108,14 +1189,23 @@ const ValidationComponent = ( {
 				id: 'password',
 				type: 'password',
 				label: 'Password',
-				description: pattern
-					? 'Must have 8 numbers or letters'
-					: undefined,
+				placeholder: getValidationPlaceholder(
+					'Must be 8+ alphanumeric',
+					'Min 10, max 20 characters',
+					'abc12345 (10-20 chars alphanumeric)'
+				),
+				description: getValidationDescription(
+					'Must contain only letters and numbers (8+ chars)',
+					'Must be between 10 and 20 characters',
+					'alphanumeric chars AND 10-20 characters'
+				),
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customPasswordRule ),
-					pattern: pattern ? '^[0-9a-zA-Z]{8}$' : undefined,
+					pattern: pattern ? '^[a-zA-Z0-9]{8,}$' : undefined,
+					minLength: minMax ? 10 : undefined,
+					maxLength: minMax ? 20 : undefined,
 				},
 			},
 			{
@@ -1184,7 +1274,7 @@ const ValidationComponent = ( {
 				},
 			},
 		];
-	}, [ elements, custom, required, getElements ] );
+	}, [ elements, custom, required, pattern, minMax, getElements ] );
 
 	const form = useMemo(
 		() => ( {
@@ -2121,12 +2211,18 @@ export const Validation = {
 			description:
 				'Whether or not the pattern validation rule is active.',
 		},
+		minMax: {
+			control: { type: 'boolean' },
+			description:
+				'Whether or not the min/max validation rule is active.',
+		},
 	},
 	args: {
 		required: true,
 		elements: 'sync',
 		custom: 'sync',
 		pattern: false,
+		minMax: false,
 	},
 };
 

package/src/stories/dataviews-picker.story.tsx

@@ -265,23 +265,33 @@ export const WithModal = ( {
 				</p>
 			) }
 			{ isModalOpen && (
-				<Modal
-					title="Select Items"
-					onRequestClose={ () => setIsModalOpen( false ) }
-					isFullScreen={ false }
-					size="fill"
-				>
-					<DataViewsPickerContent
-						perPageSizes={ perPageSizes }
-						isMultiselectable={ isMultiselectable }
-						isGrouped={ isGrouped }
-						infiniteScrollEnabled={ infiniteScrollEnabled }
-						actions={ modalActions }
-						selection={ selectedItems.map( ( item ) =>
-							String( item.id )
-						) }
-					/>
-				</Modal>
+				<>
+					<style>{ `
+						.components-modal__content {
+							padding: 0;
+						}
+						.components-modal__frame.is-full-screen .components-modal__content {
+							margin-bottom: 0;
+						}
+					` }</style>
+					<Modal
+						title="Select Items"
+						onRequestClose={ () => setIsModalOpen( false ) }
+						isFullScreen={ false }
+						size="fill"
+					>
+						<DataViewsPickerContent
+							perPageSizes={ perPageSizes }
+							isMultiselectable={ isMultiselectable }
+							isGrouped={ isGrouped }
+							infiniteScrollEnabled={ infiniteScrollEnabled }
+							actions={ modalActions }
+							selection={ selectedItems.map( ( item ) =>
+								String( item.id )
+							) }
+						/>
+					</Modal>
+				</>
 			) }
 		</>
 	);