Use full item for custom validation functions

Author: straku

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -26,7 +26,6 @@ import type {
 	RegularLayout,
 	PanelLayout,
 	CardLayout,
-	DeepPartial,
 } from '../../../types';
 import { unlock } from '../../../lock-unlock';
 
@@ -427,75 +426,72 @@ const ValidationComponent = ( {
 		password: 'secretpassword123',
 	} );
 
-	const customTextRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.text && ! /^[a-zA-Z ]+$/.test( value.text ) ) {
+	const customTextRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z ]+$/.test( value.text ) ) {
 			return 'Value must only contain letters and spaces.';
 		}
 
 		return null;
 	};
-	const customTextareaRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.textarea && ! /^[a-zA-Z ]+$/.test( value.textarea ) ) {
+	const customTextareaRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z ]+$/.test( value.textarea ) ) {
 			return 'Value must only contain letters and spaces.';
 		}
 
 		return null;
 	};
-	const customEmailRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if (
-			value.email &&
-			! /^[a-zA-Z0-9._%+-]+@example\.com$/.test( value.email )
-		) {
+	const customEmailRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z0-9._%+-]+@example\.com$/.test( value.email ) ) {
 			return 'Email address must be from @example.com domain.';
 		}
 
 		return null;
 	};
-	const customTelephoneRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.telephone && ! /^\+30\d{10}$/.test( value.telephone ) ) {
+	const customTelephoneRule = ( value: ValidatedItem ) => {
+		if ( ! /^\+30\d{10}$/.test( value.telephone ) ) {
 			return 'Telephone number must start with +30 and have 10 digits after.';
 		}
 
 		return null;
 	};
-	const customUrlRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.url && ! /^https:\/\/example\.com$/.test( value.url ) ) {
+	const customUrlRule = ( value: ValidatedItem ) => {
+		if ( ! /^https:\/\/example\.com$/.test( value.url ) ) {
 			return 'URL must be from https://example.com domain.';
 		}
 
 		return null;
 	};
-	const customColorRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.color && ! /^#[0-9A-Fa-f]{6}$/.test( value.color ) ) {
+	const customColorRule = ( value: ValidatedItem ) => {
+		if ( ! /^#[0-9A-Fa-f]{6}$/.test( value.color ) ) {
 			return 'Color must be a valid hex format (e.g., #ff6600).';
 		}
 
 		return null;
 	};
-	const customIntegerRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.integer && value.integer % 2 !== 0 ) {
+	const customIntegerRule = ( value: ValidatedItem ) => {
+		if ( value.integer % 2 !== 0 ) {
 			return 'Integer must be an even number.';
 		}
 
 		return null;
 	};
 
-	const customPasswordRule = ( value: DeepPartial< ValidatedItem > ) => {
-		if ( value.password && value.password.length < 8 ) {
+	const customPasswordRule = ( value: ValidatedItem ) => {
+		if ( value.password.length < 8 ) {
 			return 'Password must be at least 8 characters long.';
 		}
-		if ( value.password && ! /[A-Z]/.test( value.password ) ) {
+		if ( ! /[A-Z]/.test( value.password ) ) {
 			return 'Password must contain at least one uppercase letter.';
 		}
-		if ( value.password && ! /[0-9]/.test( value.password ) ) {
+		if ( ! /[0-9]/.test( value.password ) ) {
 			return 'Password must contain at least one number.';
 		}
 
 		return null;
 	};
 
 	const maybeCustomRule = (
-		rule: ( item: DeepPartial< ValidatedItem > ) => null | string
+		rule: ( item: ValidatedItem ) => null | string
 	) => {
 		return custom ? rule : undefined;
 	};

packages/dataviews/src/dataform-controls/checkbox.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -35,7 +40,13 @@ export default function Checkbox< Item >( {
 	const onValidateControl = useCallback(
 		( newValue: any ) => {
 			const message = field.isValid?.custom?.(
-				setValue( { item: data, value: newValue } ),
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
 				field
 			);
 

packages/dataviews/src/dataform-controls/color.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { colord } from 'colord';
+import deepMerge from 'deepmerge';
 
 /**
  * WordPress dependencies
@@ -101,7 +102,13 @@ export default function Color< Item >( {
 	const onValidateControl = useCallback(
 		( newValue: any ) => {
 			const message = field.isValid?.custom?.(
-				setValue( { item: data, value: newValue } ),
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
 				field
 			);
 

packages/dataviews/src/dataform-controls/integer.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -121,12 +126,15 @@ export default function Integer< Item >( {
 	const onValidateControl = useCallback(
 		( newValue: any ) => {
 			const message = field.isValid?.custom?.(
-				setValue( {
-					item: data,
-					value: [ undefined, '', null ].includes( newValue )
-						? undefined
-						: Number( newValue ),
-				} ),
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: [ undefined, '', null ].includes( newValue )
+							? undefined
+							: Number( newValue ),
+					} ) as Partial< Item >
+				),
 				field
 			);
 

packages/dataviews/src/dataform-controls/textarea.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -36,7 +41,13 @@ export default function Textarea< Item >( {
 	const onValidateControl = useCallback(
 		( newValue: any ) => {
 			const message = field.isValid?.custom?.(
-				setValue( { item: data, value: newValue } ),
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
 				field
 			);
 

packages/dataviews/src/dataform-controls/toggle.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -35,7 +40,13 @@ export default function Toggle< Item >( {
 	const onValidateControl = useCallback(
 		( newValue: any ) => {
 			const message = field.isValid?.custom?.(
-				setValue( { item: data, value: newValue } ),
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
 				field
 			);
 

packages/dataviews/src/dataform-controls/utils/validated-input.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -66,7 +71,13 @@ export default function ValidatedText< Item >( {
 	const onValidateControl = useCallback(
 		( newValue: any ) => {
 			const message = isValid?.custom?.(
-				setValue( { item: data, value: newValue } ),
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
 				field
 			);
 

packages/dataviews/src/types.ts

@@ -160,10 +160,7 @@ export type FieldTypeDefinition< Item > = {
 
 export type Rules< Item > = {
 	required?: boolean;
-	custom?: (
-		item: DeepPartial< Item >,
-		field: NormalizedField< Item >
-	) => null | string;
+	custom?: ( item: Item, field: NormalizedField< Item > ) => null | string;
 };
 
 /**