@wordpress/dataviews 9.0.1-next.6f42e1382.0 → 9.1.1-next.f56bd8138.0

package/src/test/validation.ts

@@ -117,4 +117,196 @@ describe( 'validation', () => {
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( true );
 	} );
+
+	it( 'array field is invalid when required but empty', () => {
+		const item = { id: 1, tags: [] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				isValid: {
+					required: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field is invalid when required but not an array', () => {
+		const item = { id: 1, tags: null };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				isValid: {
+					required: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field is valid when required and has values', () => {
+		const item = { id: 1, tags: [ 'tag1', 'tag2' ] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				isValid: {
+					required: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'text field with isValid.elements validates against elements', () => {
+		const item = { id: 1, status: 'published' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'status',
+				type: 'text',
+				elements: [
+					{ value: 'draft', label: 'Draft' },
+					{ value: 'published', label: 'Published' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'status' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'text field with isValid.elements rejects invalid values', () => {
+		const item = { id: 1, status: 'invalid-status' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'status',
+				type: 'text',
+				elements: [
+					{ value: 'draft', label: 'Draft' },
+					{ value: 'published', label: 'Published' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'status' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field with isValid.elements validates against elements', () => {
+		const item = { id: 1, priority: 2 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'priority',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Low' },
+					{ value: 2, label: 'Medium' },
+					{ value: 3, label: 'High' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'priority' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field with isValid.elements rejects invalid values', () => {
+		const item = { id: 1, priority: 5 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'priority',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Low' },
+					{ value: 2, label: 'Medium' },
+					{ value: 3, label: 'High' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'priority' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field with isValid.elements validates all items against elements', () => {
+		const item = { id: 1, tags: [ 'red', 'blue' ] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				elements: [
+					{ value: 'red', label: 'Red' },
+					{ value: 'blue', label: 'Blue' },
+					{ value: 'green', label: 'Green' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'array field with isValid.elements rejects arrays with invalid items', () => {
+		const item = { id: 1, tags: [ 'red', 'yellow' ] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				elements: [
+					{ value: 'red', label: 'Red' },
+					{ value: 'blue', label: 'Blue' },
+					{ value: 'green', label: 'Green' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field with isValid.elements handles non-array values', () => {
+		const item = { id: 1, tags: 'not-an-array' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				elements: [
+					{ value: 'red', label: 'Red' },
+					{ value: 'blue', label: 'Blue' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
 } );

package/src/types.ts

@@ -18,6 +18,14 @@ import type { SetSelection } from './private-types';
  */
 import type { useFocusOnMount } from '@wordpress/compose';
 
+/**
+ * Utility type that makes all properties of T optional recursively.
+ * Used by field setValue functions to allow partial item updates.
+ */
+export type DeepPartial< T > = {
+	[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];
+};
+
 export type SortDirection = 'asc' | 'desc';
 
 /**
@@ -126,7 +134,11 @@ export type FieldTypeDefinition< Item > = {
 	/**
 	 * Callback used to render an edit control for the field or control name.
 	 */
-	Edit: ComponentType< DataFormControlProps< Item > > | string | null;
+	Edit:
+		| ComponentType< DataFormControlProps< Item > >
+		| string
+		| EditConfig
+		| null;
 
 	/**
 	 * Callback used to render the field.
@@ -152,9 +164,52 @@ export type FieldTypeDefinition< Item > = {
 
 export type Rules< Item > = {
 	required?: boolean;
+	elements?: boolean;
 	custom?: ( item: Item, field: NormalizedField< Item > ) => null | string;
 };
 
+/**
+ * Edit configuration for textarea controls.
+ */
+export type EditConfigTextarea = {
+	control: 'textarea';
+	/**
+	 * Number of rows for the textarea.
+	 */
+	rows?: number;
+};
+
+/**
+ * Edit configuration for text controls.
+ */
+export type EditConfigText = {
+	control: 'text';
+	/**
+	 * Prefix component to display before the input.
+	 */
+	prefix?: React.ComponentType;
+	/**
+	 * Suffix component to display after the input.
+	 */
+	suffix?: React.ComponentType;
+};
+
+/**
+ * Edit configuration for other control types (excluding 'text' and 'textarea').
+ */
+export type EditConfigGeneric = {
+	control: Exclude< FieldType, 'text' | 'textarea' >;
+};
+
+/**
+ * Edit configuration object with type-safe control options.
+ * Each control type has its own specific configuration properties.
+ */
+export type EditConfig =
+	| EditConfigTextarea
+	| EditConfigText
+	| EditConfigGeneric;
+
 /**
  * A dataview field for a specific property of a data type.
  */
@@ -198,7 +253,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render an edit control for the field.
 	 */
-	Edit?: ComponentType< DataFormControlProps< Item > > | string;
+	Edit?: ComponentType< DataFormControlProps< Item > > | string | EditConfig;
 
 	/**
 	 * Callback used to sort the field.
@@ -226,7 +281,7 @@ export type Field< Item > = {
 	enableGlobalSearch?: boolean;
 
 	/**
-	 * Whether the field is filterable.
+	 * Whether the field can be hidden in the UI.
 	 */
 	enableHiding?: boolean;
 
@@ -251,12 +306,19 @@ export type Field< Item > = {
 	 * Defaults to `item[ field.id ]`.
 	 */
 	getValue?: ( args: { item: Item } ) => any;
+
+	/**
+	 * Callback used to set the value of the field on the item.
+	 * Used for editing operations to update field values.
+	 */
+	setValue?: ( args: { item: Item; value: any } ) => DeepPartial< Item >;
 };
 
 export type NormalizedField< Item > = Omit< Field< Item >, 'Edit' > & {
 	label: string;
 	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
+	setValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;
 	render: ComponentType< DataViewRenderFieldProps< Item > >;
 	Edit: ComponentType< DataFormControlProps< Item > > | null;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
@@ -277,7 +339,7 @@ export type Data< Item > = Item[];
 export type DataFormControlProps< Item > = {
 	data: Item;
 	field: NormalizedField< Item >;
-	onChange: ( value: Record< string, any > ) => void;
+	onChange: ( value: DeepPartial< Item > ) => void;
 	hideLabelFromVision?: boolean;
 	/**
 	 * The currently selected filter operator for this field.
@@ -285,6 +347,14 @@ export type DataFormControlProps< Item > = {
 	 * Used by DataViews filters to determine which control to render based on the operator type.
 	 */
 	operator?: Operator;
+	/**
+	 * Configuration object for the control.
+	 */
+	config?: {
+		prefix?: React.ComponentType;
+		suffix?: React.ComponentType;
+		rows?: number;
+	};
 };
 
 export type DataViewRenderFieldProps< Item > = {
@@ -793,6 +863,7 @@ export type CombinedFormField = {
 	description?: string;
 	layout?: Layout;
 	children: Array< FormField | string >;
+	summary?: string | string[];
 };
 
 export type FormField = SimpleFormField | CombinedFormField;

package/src/validation.ts

@@ -25,6 +25,14 @@ export function isItemValid< Item >(
 	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 ) )
+		);
+	};
+
 	return _fields.every( ( field ) => {
 		const value = field.getValue( { item } );
 
@@ -39,6 +47,8 @@ export function isItemValid< Item >(
 					isEmptyNullOrUndefined( value ) ) ||
 				( field.type === 'integer' &&
 					isEmptyNullOrUndefined( value ) ) ||
+				( field.type === 'array' &&
+					isArrayOrElementsEmptyNullOrUndefined( value ) ) ||
 				( field.type === undefined && isEmptyNullOrUndefined( value ) )
 			) {
 				return false;
@@ -49,6 +59,26 @@ export function isItemValid< Item >(
 			}
 		}
 
+		if ( field.isValid.elements ) {
+			if ( field.elements ) {
+				const validValues = field.elements.map(
+					( element ) => element.value
+				);
+
+				if ( field.type === 'array' ) {
+					// For arrays, check if all values are valid elements
+					if ( Array.isArray( value ) ) {
+						return value.every( ( arrayItem ) =>
+							validValues.includes( arrayItem )
+						);
+					}
+					return false;
+				}
+				// For single-value fields, check if the value is a valid element
+				return validValues.includes( value );
+			}
+		}
+
 		if (
 			typeof field.isValid.custom === 'function' &&
 			field.isValid.custom( item, field ) !== null