@wordpress/dataviews 10.2.0 → 10.3.0

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

@@ -58,8 +58,10 @@ describe( 'useFormValidity', () => {
 			expect( validity ).toEqual( undefined );
 			expect( isValid ).toBe( true );
 		} );
+	} );
 
-		it( 'with children are checked for validity', () => {
+	describe( 'form fields', () => {
+		it( 'defined as strings are checked for validity', () => {
 			const item = { id: 1, order: undefined };
 			const fields: Field< {} >[] = [
 				{
@@ -71,7 +73,7 @@ describe( 'useFormValidity', () => {
 				},
 			];
 			const form = {
-				fields: [ { id: 'combinedField', children: [ 'order' ] } ],
+				fields: [ 'order' ],
 			};
 			const {
 				result: {
@@ -79,18 +81,14 @@ describe( 'useFormValidity', () => {
 				},
 			} = renderHook( () => useFormValidity( item, fields, form ) );
 			expect( validity ).toEqual( {
-				combinedField: {
-					children: {
-						order: {
-							required: { type: 'invalid' },
-						},
-					},
+				order: {
+					required: { type: 'invalid' },
 				},
 			} );
 			expect( isValid ).toBe( false );
 		} );
 
-		it( 'without children but defined as objects are checked for validity', () => {
+		it( 'defined as objects are checked for validity', () => {
 			const item = { id: 1, order: undefined };
 			const fields: Field< {} >[] = [
 				{
@@ -116,38 +114,78 @@ describe( 'useFormValidity', () => {
 			} );
 			expect( isValid ).toBe( false );
 		} );
-	} );
-
-	describe( 'isValid.required', () => {
-		const REQUIRED_MESSAGE = {
-			required: { type: 'invalid' },
-		};
 
-		it( 'is valid when validity object only contains type:valid messages', async () => {
-			const item = { id: 1, title: 'Valid Title', status: 'published' };
-			const fields: Field< {} >[] = [
+		it( 'with children are checked for validity', async () => {
+			type TestValidity = {
+				id: number;
+				field1?: number;
+				field2?: number;
+				field3?: number;
+				field4?: number;
+			};
+			const item: TestValidity = {
+				id: 1,
+				field1: 2,
+				field2: 3,
+				field3: undefined,
+				field4: undefined,
+			};
+			const fields: Field< TestValidity >[] = [
 				{
-					id: 'title',
-					type: 'text',
+					id: 'field1',
+					type: 'integer',
+					elements: [ { value: 1, label: 'One' } ],
 					isValid: {
-						custom: async () =>
-							await new Promise( ( resolve ) =>
-								setTimeout( resolve, 5 )
-							).then( () => null ),
+						elements: true,
 					},
 				},
 				{
-					id: 'status',
-					type: 'text',
+					id: 'field2',
+					type: 'integer',
+					getElements: async () =>
+						await new Promise( ( resolve ) => {
+							setTimeout( resolve, 5 );
+						} ).then( () => [ { value: 2, label: 'Two' } ] ),
+					isValid: {
+						elements: true,
+					},
+				},
+				{
+					id: 'field3',
+					type: 'integer',
+					isValid: {
+						required: true,
+					},
+				},
+				{
+					id: 'field4',
+					type: 'integer',
 					isValid: {
 						custom: async () =>
 							await new Promise( ( resolve ) =>
 								setTimeout( resolve, 5 )
-							).then( () => null ),
+							).then( () => 'Field is invalid.' ),
 					},
 				},
 			];
-			const form = { fields: [ 'title', 'status' ] };
+			const form = {
+				fields: [
+					'field1',
+					{
+						id: 'combined1',
+						children: [
+							'field2',
+							{
+								id: 'combined2',
+								children: [
+									'field3',
+									{ id: 'combined3', children: [ 'field4' ] },
+								],
+							},
+						],
+					},
+				],
+			};
 			const { result } = renderHook( () =>
 				useFormValidity( item, fields, form )
 			);
@@ -155,17 +193,52 @@ describe( 'useFormValidity', () => {
 			await waitFor( () => {
 				expect( result.current ).toEqual( {
 					validity: {
-						title: {
-							custom: { type: 'valid', message: 'Valid' },
+						combined1: {
+							children: {
+								combined2: {
+									children: {
+										combined3: {
+											children: {
+												field4: {
+													custom: {
+														type: 'invalid',
+														message:
+															'Field is invalid.',
+													},
+												},
+											},
+										},
+										field3: {
+											required: { type: 'invalid' },
+										},
+									},
+								},
+								field2: {
+									elements: {
+										type: 'invalid',
+										message:
+											'Value must be one of the elements.',
+									},
+								},
+							},
 						},
-						status: {
-							custom: { type: 'valid', message: 'Valid' },
+						field1: {
+							elements: {
+								type: 'invalid',
+								message: 'Value must be one of the elements.',
+							},
 						},
 					},
-					isValid: true,
+					isValid: false,
 				} );
 			} );
 		} );
+	} );
+
+	describe( 'isValid.required', () => {
+		const REQUIRED_MESSAGE = {
+			required: { type: 'invalid' },
+		};
 
 		it( 'array is invalid when required but empty', () => {
 			const item = { id: 1, tags: [] };
@@ -542,5 +615,217 @@ describe( 'useFormValidity', () => {
 			} );
 			expect( isValid ).toBe( false );
 		} );
+
+		describe( 'async', () => {
+			it( 'is valid when validity object only contains type:valid messages', async () => {
+				const item = {
+					id: 1,
+					title: 'Valid Title',
+					status: 'published',
+				};
+				const fields: Field< {} >[] = [
+					{
+						id: 'title',
+						type: 'text',
+						isValid: {
+							custom: async () =>
+								await new Promise( ( resolve ) =>
+									setTimeout( resolve, 5 )
+								).then( () => null ),
+						},
+					},
+					{
+						id: 'status',
+						type: 'text',
+						isValid: {
+							custom: async () =>
+								await new Promise( ( resolve ) =>
+									setTimeout( resolve, 5 )
+								).then( () => null ),
+						},
+					},
+				];
+				const form = { fields: [ 'title', 'status' ] };
+				const { result } = renderHook( () =>
+					useFormValidity( item, fields, form )
+				);
+
+				await waitFor( () => {
+					expect( result.current ).toEqual( {
+						validity: {
+							title: {
+								custom: { type: 'valid', message: 'Valid' },
+							},
+							status: {
+								custom: { type: 'valid', message: 'Valid' },
+							},
+						},
+						isValid: true,
+					} );
+				} );
+			} );
+
+			it( 'is invalid and message is "Validating…" when promise is in flight', async () => {
+				const item = {
+					id: 1,
+					title: 'Invalid Title',
+					status: 'published',
+				};
+				const fields: Field< {} >[] = [
+					{
+						id: 'title',
+						type: 'text',
+						isValid: {
+							// This promise is never resolved.
+							// Serves to test in flight behavior of validation.
+							custom: async () => await new Promise( () => {} ),
+						},
+					},
+				];
+				const form = { fields: [ 'title' ] };
+				const { result } = renderHook( () =>
+					useFormValidity( item, fields, form )
+				);
+
+				await waitFor( () => {
+					expect( result.current ).toEqual( {
+						validity: {
+							title: {
+								custom: {
+									type: 'validating',
+									message: 'Validating…',
+								},
+							},
+						},
+						isValid: false,
+					} );
+				} );
+			} );
+
+			it( 'is invalid when validity object contains at least one type:invalid message', async () => {
+				const item = {
+					id: 1,
+					title: 'Invalid Title',
+					status: 'published',
+				};
+				const fields: Field< {} >[] = [
+					{
+						id: 'title',
+						type: 'text',
+						isValid: {
+							custom: async () =>
+								await new Promise( ( resolve ) =>
+									setTimeout( resolve, 5 )
+								).then( () => 'Title is invalid.' ),
+						},
+					},
+				];
+				const form = { fields: [ 'title' ] };
+				const { result } = renderHook( () =>
+					useFormValidity( item, fields, form )
+				);
+
+				await waitFor( () => {
+					expect( result.current ).toEqual( {
+						validity: {
+							title: {
+								custom: {
+									type: 'invalid',
+									message: 'Title is invalid.',
+								},
+							},
+						},
+						isValid: false,
+					} );
+				} );
+			} );
+
+			it( 'is invalid when custom returns anything other than null or a string', async () => {
+				const item = {
+					id: 1,
+					title: 'Invalid Title',
+					status: 'published',
+				};
+				const fields: Field< {} >[] = [
+					{
+						id: 'title',
+						type: 'text',
+						isValid: {
+							// @ts-ignore returns wrong type for testing purposes
+							custom: async () =>
+								await new Promise( ( resolve ) =>
+									setTimeout( resolve, 5 )
+								).then( () => 3 ),
+						},
+					},
+				];
+				const form = { fields: [ 'title' ] };
+				const { result } = renderHook( () =>
+					useFormValidity( item, fields, form )
+				);
+
+				await waitFor( () => {
+					expect( result.current ).toEqual( {
+						validity: {
+							title: {
+								custom: {
+									type: 'invalid',
+									message:
+										'Validation could not be processed.',
+								},
+							},
+						},
+						isValid: false,
+					} );
+				} );
+			} );
+
+			it( 'is invalid when promise was rejected', async () => {
+				const item = {
+					id: 1,
+					title: 'Invalid Title',
+					status: 'published',
+				};
+				const fields: Field< {} >[] = [
+					{
+						id: 'title',
+						type: 'text',
+						isValid: {
+							custom: async () =>
+								await new Promise( ( resolve, reject ) =>
+									setTimeout(
+										() =>
+											reject(
+												new Error(
+													'Validation did not complete successfully.'
+												)
+											),
+										5
+									)
+								),
+						},
+					},
+				];
+				const form = { fields: [ 'title' ] };
+				const { result } = renderHook( () =>
+					useFormValidity( item, fields, form )
+				);
+
+				await waitFor( () => {
+					expect( result.current ).toEqual( {
+						validity: {
+							title: {
+								custom: {
+									type: 'invalid',
+									message:
+										'Validation did not complete successfully.',
+								},
+							},
+						},
+						isValid: false,
+					} );
+				} );
+			} );
+		} );
 	} );
 } );

package/src/types/dataform.ts

@@ -6,7 +6,7 @@ import type { Field, FieldValidity } from './field-api';
 /**
  * DataForm layouts.
  */
-export type LayoutType = 'regular' | 'panel' | 'card' | 'row';
+export type LayoutType = 'regular' | 'panel' | 'card' | 'row' | 'details';
 export type LabelPosition = 'top' | 'side' | 'none';
 
 export type PanelSummaryField = string | string[];
@@ -97,32 +97,47 @@ export type NormalizedRowLayout = {
 	styles: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;
 };
 
-export type Layout = RegularLayout | PanelLayout | CardLayout | RowLayout;
+export type DetailsLayout = {
+	type: 'details';
+	summary?: string;
+};
+export type NormalizedDetailsLayout = {
+	type: 'details';
+	summary: string;
+};
+
+export type Layout =
+	| RegularLayout
+	| PanelLayout
+	| CardLayout
+	| RowLayout
+	| DetailsLayout;
 export type NormalizedLayout =
 	| NormalizedRegularLayout
 	| NormalizedPanelLayout
 	| NormalizedCardLayout
-	| NormalizedRowLayout;
+	| NormalizedRowLayout
+	| NormalizedDetailsLayout;
 
 export type NormalizedSummaryField =
 	| NormalizedPanelSummaryField
 	| NormalizedCardSummaryField;
 
-export type SimpleFormField = {
+export type FormField = {
 	id: string;
+	label?: string;
+	description?: string;
 	layout?: Layout;
+	children?: Array< FormField | string >;
 };
-
-export type CombinedFormField = {
+export type NormalizedFormField = {
 	id: string;
+	layout: NormalizedLayout;
 	label?: string;
 	description?: string;
-	layout?: Layout;
-	children: Array< FormField | string >;
+	children?: NormalizedFormField[];
 };
 
-export type FormField = SimpleFormField | CombinedFormField;
-
 /**
  * The form configuration.
  */
@@ -130,6 +145,10 @@ export type Form = {
 	layout?: Layout;
 	fields?: Array< FormField | string >;
 };
+export type NormalizedForm = {
+	layout: NormalizedLayout;
+	fields: NormalizedFormField[];
+};
 
 export interface DataFormProps< Item > {
 	data: Item;
@@ -143,7 +162,7 @@ export type FormValidity = Record< string, FieldValidity > | undefined;
 
 export interface FieldLayoutProps< Item > {
 	data: Item;
-	field: FormField;
+	field: NormalizedFormField;
 	onChange: ( value: any ) => void;
 	hideLabelFromVision?: boolean;
 	validity?: FieldValidity;

package/src/types/dataviews.ts

@@ -269,7 +269,33 @@ export interface ViewPickerGrid extends ViewBase {
 	};
 }
 
-export type View = ViewList | ViewGrid | ViewTable | ViewPickerGrid;
+export interface ViewPickerTable extends ViewBase {
+	type: 'pickerTable';
+
+	layout?: {
+		/**
+		 * The styles for the columns.
+		 */
+		styles?: Record< string, ColumnStyle >;
+
+		/**
+		 * The density of the view.
+		 */
+		density?: Density;
+
+		/**
+		 * Whether the view allows column moving.
+		 */
+		enableMoving?: boolean;
+	};
+}
+
+export type View =
+	| ViewList
+	| ViewGrid
+	| ViewTable
+	| ViewPickerGrid
+	| ViewPickerTable;
 
 interface ActionBase< Item > {
 	/**
@@ -428,16 +454,24 @@ export interface ViewPickerGridProps< Item >
 	view: ViewPickerGrid;
 }
 
+export interface ViewPickerTableProps< Item >
+	extends Omit< ViewPickerBaseProps< Item >, 'view' > {
+	view: ViewPickerTable;
+}
+
 export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
 
-export type ViewPickerProps< Item > = ViewPickerGridProps< Item >;
+export type ViewPickerProps< Item > =
+	| ViewPickerGridProps< Item >
+	| ViewPickerTableProps< Item >;
 
 export interface SupportedLayouts {
 	list?: Omit< ViewList, 'type' >;
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;
 	pickerGrid?: Omit< ViewPickerGrid, 'type' >;
+	pickerTable?: Omit< ViewPickerTable, 'type' >;
 }