@wordpress/dataviews 6.0.0 → 7.0.0

package/src/test/filter-and-sort-data-view.js

@@ -41,8 +41,10 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 1 );
-		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result ).toHaveLength( 4 );
+		expect(
+			result.find( ( item ) => item.title === 'Neptune' )
+		).toBeDefined();
 	} );
 
 	it( 'should search using searchable fields (description)', () => {
@@ -89,13 +91,11 @@ describe( 'filters', () => {
 			fieldsWithArraySearch
 		);
 
-		// Should find items with "satellite" in categories
-		expect( result ).toHaveLength( 3 );
-		expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
-			'Europa',
-			'Io',
-			'Moon',
-		] );
+		// Should find items with "Moon" in categories
+		expect( result ).toHaveLength( 10 );
+		expect( result.map( ( r ) => r.title ).sort() ).toContain( 'Europa' );
+		expect( result.map( ( r ) => r.title ).sort() ).toContain( 'Io' );
+		expect( result.map( ( r ) => r.title ).sort() ).toContain( 'Moon' );
 	} );
 
 	it( 'should search over array fields case-insensitively', () => {
@@ -154,16 +154,23 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 9 );
+		expect( result ).toHaveLength( 16 );
 		expect( result[ 0 ].title ).toBe( 'Moon' );
 		expect( result[ 1 ].title ).toBe( 'Io' );
 		expect( result[ 2 ].title ).toBe( 'Europa' );
-		expect( result[ 3 ].title ).toBe( 'Mercury' );
-		expect( result[ 4 ].title ).toBe( 'Venus' );
-		expect( result[ 5 ].title ).toBe( 'Earth' );
-		expect( result[ 6 ].title ).toBe( 'Mars' );
-		expect( result[ 7 ].title ).toBe( 'Jupiter' );
-		expect( result[ 8 ].title ).toBe( 'Saturn' );
+		expect( result[ 3 ].title ).toBe( 'Ganymede' );
+		expect( result[ 4 ].title ).toBe( 'Callisto' );
+		expect( result[ 5 ].title ).toBe( 'Amalthea' );
+		expect( result[ 6 ].title ).toBe( 'Himalia' );
+		expect( result[ 7 ].title ).toBe( 'Triton' );
+		expect( result[ 8 ].title ).toBe( 'Nereid' );
+		expect( result[ 9 ].title ).toBe( 'Proteus' );
+		expect( result[ 10 ].title ).toBe( 'Mercury' );
+		expect( result[ 11 ].title ).toBe( 'Venus' );
+		expect( result[ 12 ].title ).toBe( 'Earth' );
+		expect( result[ 13 ].title ).toBe( 'Mars' );
+		expect( result[ 14 ].title ).toBe( 'Jupiter' );
+		expect( result[ 15 ].title ).toBe( 'Saturn' );
 	} );
 
 	it( 'should search using IS ANY filter for STRING values', () => {
@@ -199,10 +206,17 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 3 );
+		expect( result ).toHaveLength( 10 );
 		expect( result[ 0 ].title ).toBe( 'Moon' );
 		expect( result[ 1 ].title ).toBe( 'Io' );
 		expect( result[ 2 ].title ).toBe( 'Europa' );
+		expect( result[ 3 ].title ).toBe( 'Ganymede' );
+		expect( result[ 4 ].title ).toBe( 'Callisto' );
+		expect( result[ 5 ].title ).toBe( 'Amalthea' );
+		expect( result[ 6 ].title ).toBe( 'Himalia' );
+		expect( result[ 7 ].title ).toBe( 'Triton' );
+		expect( result[ 8 ].title ).toBe( 'Nereid' );
+		expect( result[ 9 ].title ).toBe( 'Proteus' );
 	} );
 
 	it( 'should search using IS ANY filter for ARRAY values', () => {
@@ -238,14 +252,21 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 7 );
+		expect( result ).toHaveLength( 14 );
 		expect( result[ 0 ].title ).toBe( 'Moon' );
 		expect( result[ 1 ].title ).toBe( 'Io' );
 		expect( result[ 2 ].title ).toBe( 'Europa' );
-		expect( result[ 3 ].title ).toBe( 'Neptune' );
-		expect( result[ 4 ].title ).toBe( 'Jupiter' );
-		expect( result[ 5 ].title ).toBe( 'Saturn' );
-		expect( result[ 6 ].title ).toBe( 'Uranus' );
+		expect( result[ 3 ].title ).toBe( 'Ganymede' );
+		expect( result[ 4 ].title ).toBe( 'Callisto' );
+		expect( result[ 5 ].title ).toBe( 'Amalthea' );
+		expect( result[ 6 ].title ).toBe( 'Himalia' );
+		expect( result[ 7 ].title ).toBe( 'Neptune' );
+		expect( result[ 8 ].title ).toBe( 'Triton' );
+		expect( result[ 9 ].title ).toBe( 'Nereid' );
+		expect( result[ 10 ].title ).toBe( 'Proteus' );
+		expect( result[ 11 ].title ).toBe( 'Jupiter' );
+		expect( result[ 12 ].title ).toBe( 'Saturn' );
+		expect( result[ 13 ].title ).toBe( 'Uranus' );
 	} );
 
 	it( 'should search using IS ALL filter', () => {
@@ -287,10 +308,17 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 3 );
+		expect( result ).toHaveLength( 10 );
 		expect( result[ 0 ].title ).toBe( 'Moon' );
 		expect( result[ 1 ].title ).toBe( 'Io' );
 		expect( result[ 2 ].title ).toBe( 'Europa' );
+		expect( result[ 3 ].title ).toBe( 'Ganymede' );
+		expect( result[ 4 ].title ).toBe( 'Callisto' );
+		expect( result[ 5 ].title ).toBe( 'Amalthea' );
+		expect( result[ 6 ].title ).toBe( 'Himalia' );
+		expect( result[ 7 ].title ).toBe( 'Triton' );
+		expect( result[ 8 ].title ).toBe( 'Nereid' );
+		expect( result[ 9 ].title ).toBe( 'Proteus' );
 	} );
 
 	it( 'should search using IS filter and return all values if filter.value is undefined', () => {
@@ -307,18 +335,25 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 11 );
+		expect( result ).toHaveLength( 18 );
 		expect( result[ 0 ].title ).toBe( 'Moon' );
 		expect( result[ 1 ].title ).toBe( 'Io' );
 		expect( result[ 2 ].title ).toBe( 'Europa' );
-		expect( result[ 3 ].title ).toBe( 'Neptune' );
-		expect( result[ 4 ].title ).toBe( 'Mercury' );
-		expect( result[ 5 ].title ).toBe( 'Venus' );
-		expect( result[ 6 ].title ).toBe( 'Earth' );
-		expect( result[ 7 ].title ).toBe( 'Mars' );
-		expect( result[ 8 ].title ).toBe( 'Jupiter' );
-		expect( result[ 9 ].title ).toBe( 'Saturn' );
-		expect( result[ 10 ].title ).toBe( 'Uranus' );
+		expect( result[ 3 ].title ).toBe( 'Ganymede' );
+		expect( result[ 4 ].title ).toBe( 'Callisto' );
+		expect( result[ 5 ].title ).toBe( 'Amalthea' );
+		expect( result[ 6 ].title ).toBe( 'Himalia' );
+		expect( result[ 7 ].title ).toBe( 'Neptune' );
+		expect( result[ 8 ].title ).toBe( 'Triton' );
+		expect( result[ 9 ].title ).toBe( 'Nereid' );
+		expect( result[ 10 ].title ).toBe( 'Proteus' );
+		expect( result[ 11 ].title ).toBe( 'Mercury' );
+		expect( result[ 12 ].title ).toBe( 'Venus' );
+		expect( result[ 13 ].title ).toBe( 'Earth' );
+		expect( result[ 14 ].title ).toBe( 'Mars' );
+		expect( result[ 15 ].title ).toBe( 'Jupiter' );
+		expect( result[ 16 ].title ).toBe( 'Saturn' );
+		expect( result[ 17 ].title ).toBe( 'Uranus' );
 	} );
 
 	it( 'should filter using LESS THAN operator for integer', () => {
@@ -423,11 +458,23 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result.map( ( r ) => r.description ) ).toEqual( [
-			'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.',
-			'Moon of Jupiter',
-			'Moon of Jupiter',
-			'La planète Vénus',
+		// Should return items that don't contain "Solar system" in description
+		expect( result ).toHaveLength( 11 );
+		expect(
+			result.filter( ( r ) => r.description.includes( 'Solar system' ) )
+		).toHaveLength( 0 );
+		expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
+			'Amalthea',
+			'Callisto',
+			'Europa',
+			'Ganymede',
+			'Himalia',
+			'Io',
+			'Moon',
+			'Nereid',
+			'Proteus',
+			'Triton',
+			'Venus',
 		] );
 	} );
 
@@ -595,7 +642,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result.length ).toBe( 9 );
+		expect( result.length ).toBe( 16 );
 		expect( result.map( ( r ) => r.title ) ).not.toContain( 'Neptune' );
 	} );
 
@@ -808,7 +855,7 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 11 );
+		expect( result ).toHaveLength( 18 );
 
 		expect( result[ 0 ].type ).toBe( 'Gas giant' );
 		expect( result[ 0 ].title ).toBe( 'Saturn' );
@@ -820,21 +867,31 @@ describe( 'sorting', () => {
 		expect( result[ 3 ].type ).toBe( 'Ice giant' );
 		expect( result[ 3 ].title ).toBe( 'Neptune' );
 
-		expect( result[ 4 ].type ).toBe( 'Satellite' );
-		expect( result[ 4 ].title ).toBe( 'Moon' );
-		expect( result[ 5 ].type ).toBe( 'Satellite' );
-		expect( result[ 5 ].title ).toBe( 'Io' );
-		expect( result[ 6 ].type ).toBe( 'Satellite' );
-		expect( result[ 6 ].title ).toBe( 'Europa' );
-
-		expect( result[ 7 ].type ).toBe( 'Terrestrial' );
-		expect( result[ 7 ].title ).toBe( 'Venus' );
-		expect( result[ 8 ].type ).toBe( 'Terrestrial' );
-		expect( result[ 8 ].title ).toBe( 'Mercury' );
-		expect( result[ 9 ].type ).toBe( 'Terrestrial' );
-		expect( result[ 9 ].title ).toBe( 'Mars' );
-		expect( result[ 10 ].type ).toBe( 'Terrestrial' );
-		expect( result[ 10 ].title ).toBe( 'Earth' );
+		// All satellites should be grouped together
+		const satelliteItems = result.filter(
+			( item ) => item.type === 'Satellite'
+		);
+		expect( satelliteItems ).toHaveLength( 10 );
+		expect( satelliteItems[ 0 ].title ).toBe( 'Triton' );
+		expect( satelliteItems[ 1 ].title ).toBe( 'Proteus' );
+		expect( satelliteItems[ 2 ].title ).toBe( 'Nereid' );
+		expect( satelliteItems[ 3 ].title ).toBe( 'Moon' );
+		expect( satelliteItems[ 4 ].title ).toBe( 'Io' );
+		expect( satelliteItems[ 5 ].title ).toBe( 'Himalia' );
+		expect( satelliteItems[ 6 ].title ).toBe( 'Ganymede' );
+		expect( satelliteItems[ 7 ].title ).toBe( 'Europa' );
+		expect( satelliteItems[ 8 ].title ).toBe( 'Callisto' );
+		expect( satelliteItems[ 9 ].title ).toBe( 'Amalthea' );
+
+		// All terrestrial planets should be grouped together
+		const terrestrialItems = result.filter(
+			( item ) => item.type === 'Terrestrial'
+		);
+		expect( terrestrialItems ).toHaveLength( 4 );
+		expect( terrestrialItems[ 0 ].title ).toBe( 'Venus' );
+		expect( terrestrialItems[ 1 ].title ).toBe( 'Mercury' );
+		expect( terrestrialItems[ 2 ].title ).toBe( 'Mars' );
+		expect( terrestrialItems[ 3 ].title ).toBe( 'Earth' );
 	} );
 
 	it( 'should sort integer field types', () => {
@@ -846,7 +903,7 @@ describe( 'sorting', () => {
 			fields
 		);
 
-		expect( result ).toHaveLength( 11 );
+		expect( result ).toHaveLength( 18 );
 		expect( result[ 0 ].title ).toBe( 'Saturn' );
 		expect( result[ 1 ].title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].title ).toBe( 'Uranus' );
@@ -880,11 +937,12 @@ describe( 'sorting', () => {
 			},
 			fields
 		);
-		expect( resultDesc ).toHaveLength( 11 );
+		expect( resultDesc ).toHaveLength( 18 );
 		expect( resultDesc[ 0 ].title ).toBe( 'Europa' );
 		expect( resultDesc[ 1 ].title ).toBe( 'Earth' );
-		expect( resultDesc[ 9 ].title ).toBe( 'Io' );
-		expect( resultDesc[ 10 ].title ).toBe( 'Jupiter' );
+		// Skip intermediate items
+		expect( resultDesc[ resultDesc.length - 2 ].title ).toBe( 'Io' );
+		expect( resultDesc[ resultDesc.length - 1 ].title ).toBe( 'Jupiter' );
 
 		const { data: resultAsc } = filterSortAndPaginate(
 			data,
@@ -893,11 +951,12 @@ describe( 'sorting', () => {
 			},
 			fields
 		);
-		expect( resultAsc ).toHaveLength( 11 );
+		expect( resultAsc ).toHaveLength( 18 );
 		expect( resultAsc[ 0 ].title ).toBe( 'Jupiter' );
 		expect( resultAsc[ 1 ].title ).toBe( 'Io' );
-		expect( resultAsc[ 9 ].title ).toBe( 'Earth' );
-		expect( resultAsc[ 10 ].title ).toBe( 'Europa' );
+		// Skip intermediate items
+		expect( resultAsc[ resultAsc.length - 2 ].title ).toBe( 'Earth' );
+		expect( resultAsc[ resultAsc.length - 1 ].title ).toBe( 'Europa' );
 	} );
 
 	it( 'should sort untyped fields if the value is a number', () => {
@@ -914,7 +973,7 @@ describe( 'sorting', () => {
 			)
 		);
 
-		expect( result ).toHaveLength( 11 );
+		expect( result ).toHaveLength( 18 );
 		expect( result[ 0 ].title ).toBe( 'Saturn' );
 		expect( result[ 1 ].title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].title ).toBe( 'Uranus' );
@@ -979,10 +1038,10 @@ describe( 'pagination', () => {
 		);
 		expect( result ).toHaveLength( 2 );
 		expect( result[ 0 ].title ).toBe( 'Europa' );
-		expect( result[ 1 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Ganymede' );
 		expect( paginationInfo ).toStrictEqual( {
 			totalItems: data.length,
-			totalPages: 6,
+			totalPages: 9,
 		} );
 	} );
 } );

package/src/test/normalize-form-fields.ts

@@ -0,0 +1,247 @@
+/**
+ * Internal dependencies
+ */
+import normalizeFormFields from '../normalize-form-fields';
+import type { Form } from '../types';
+
+describe( 'normalizeFormFields', () => {
+	describe( 'empty form', () => {
+		it( 'returns empty array for undefined fields', () => {
+			const form: Form = {};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [] );
+		} );
+
+		it( 'returns empty array for empty fields', () => {
+			const form: Form = { fields: [] };
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [] );
+		} );
+	} );
+
+	describe( 'default layout', () => {
+		it( 'applies default layout when layout is not specified', () => {
+			const form: Form = {
+				fields: [ 'field1', 'field2' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: { type: 'regular', labelPosition: 'top' },
+				},
+				{
+					id: 'field2',
+					layout: { type: 'regular', labelPosition: 'top' },
+				},
+			] );
+		} );
+
+		it( 'handles mixed string and object field specifications', () => {
+			const form: Form = {
+				fields: [
+					'field1',
+					{
+						id: 'field2',
+						label: 'Field 2',
+					},
+				],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: { type: 'regular', labelPosition: 'top' },
+				},
+				{
+					id: 'field2',
+					label: 'Field 2',
+					layout: { type: 'regular', labelPosition: 'top' },
+				},
+			] );
+		} );
+	} );
+
+	describe( 'layout types', () => {
+		it( 'regular: with default layout options', () => {
+			const form: Form = {
+				layout: { type: 'regular' },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: { type: 'regular', labelPosition: 'top' },
+				},
+			] );
+		} );
+
+		it( 'regular: with layout options', () => {
+			const form: Form = {
+				layout: { type: 'regular', labelPosition: 'side' },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: { type: 'regular', labelPosition: 'side' },
+				},
+			] );
+		} );
+
+		it( 'panel: with default layout options', () => {
+			const form: Form = {
+				layout: { type: 'panel' },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'panel',
+						labelPosition: 'side',
+						openAs: 'dropdown',
+					},
+				},
+			] );
+		} );
+
+		it( 'panel: with layout options', () => {
+			const form: Form = {
+				layout: { type: 'panel', labelPosition: 'top' },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'panel',
+						labelPosition: 'top',
+						openAs: 'dropdown',
+					},
+				},
+			] );
+		} );
+
+		it( 'card: with default layout options', () => {
+			const form: Form = {
+				layout: { type: 'card' },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'card',
+						withHeader: true,
+						isOpened: true,
+					},
+				},
+			] );
+		} );
+
+		it( 'card: enforces isOpened=true when withHeader=false', () => {
+			const form: Form = {
+				// @ts-ignore - Test intentionally uses invalid type to verify runtime behavior.
+				layout: { type: 'card', withHeader: false, isOpened: false },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'card',
+						withHeader: false,
+						isOpened: true,
+					},
+				},
+			] );
+		} );
+
+		it( 'card: respects isOpened when withHeader=true', () => {
+			const form: Form = {
+				layout: { type: 'card', withHeader: true, isOpened: false },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'card',
+						withHeader: true,
+						isOpened: false,
+					},
+				},
+			] );
+		} );
+	} );
+
+	describe( 'layout overrides', () => {
+		it( 'fields can override form layout', () => {
+			const form: Form = {
+				layout: { type: 'regular', labelPosition: 'top' },
+				fields: [
+					'field1',
+					{
+						id: 'field2',
+						layout: { type: 'panel', labelPosition: 'side' },
+					},
+				],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: { type: 'regular', labelPosition: 'top' },
+				},
+				{
+					id: 'field2',
+					layout: {
+						type: 'panel',
+						labelPosition: 'side',
+						openAs: 'dropdown',
+					},
+				},
+			] );
+		} );
+
+		it( 'fields do not partially override form layout', () => {
+			const form: Form = {
+				layout: { type: 'card', withHeader: false, isOpened: true },
+				fields: [
+					'field1',
+					{
+						id: 'field2',
+						layout: { type: 'card', isOpened: false },
+					},
+				],
+			};
+			const result = normalizeFormFields( form );
+			expect( result ).toEqual( [
+				{
+					id: 'field1',
+					layout: {
+						type: 'card',
+						withHeader: false,
+						isOpened: true,
+					},
+				},
+				{
+					id: 'field2',
+					layout: {
+						type: 'card',
+						withHeader: true,
+						isOpened: false,
+					},
+				},
+			] );
+		} );
+	} );
+} );

package/src/types.ts

@@ -443,6 +443,11 @@ interface ViewBase {
 	 * The field to group by.
 	 */
 	groupByField?: string;
+
+	/**
+	 * Whether infinite scroll is enabled.
+	 */
+	infiniteScrollEnabled?: boolean;
 }
 
 export interface ColumnStyle {
@@ -482,6 +487,11 @@ export interface ViewTable extends ViewBase {
 		 * The density of the view.
 		 */
 		density?: Density;
+
+		/**
+		 * Whether the view allows column moving.
+		 */
+		enableMoving?: boolean;
 	};
 }
 
@@ -661,17 +671,74 @@ export interface SupportedLayouts {
 	table?: Omit< ViewTable, 'type' >;
 }
 
+/**
+ * DataForm layouts.
+ */
+export type LayoutType = 'regular' | 'panel' | 'card';
+export type LabelPosition = 'top' | 'side' | 'none';
+
+export type RegularLayout = {
+	type: 'regular';
+	labelPosition?: LabelPosition;
+};
+export type NormalizedRegularLayout = {
+	type: 'regular';
+	labelPosition: LabelPosition;
+};
+
+export type PanelLayout = {
+	type: 'panel';
+	labelPosition?: LabelPosition;
+	openAs?: 'dropdown' | 'modal';
+};
+export type NormalizedPanelLayout = {
+	type: 'panel';
+	labelPosition: LabelPosition;
+	openAs: 'dropdown' | 'modal';
+};
+
+export type CardLayout =
+	| {
+			type: 'card';
+			withHeader: false;
+			// isOpened cannot be false if withHeader is false as well.
+			// Otherwise, the card would not be visible.
+			isOpened?: true;
+	  }
+	| {
+			type: 'card';
+			withHeader?: true | undefined;
+			isOpened?: boolean;
+	  };
+export type NormalizedCardLayout =
+	| {
+			type: 'card';
+			withHeader: false;
+			// isOpened cannot be false if withHeader is false as well.
+			// Otherwise, the card would not be visible.
+			isOpened: true;
+	  }
+	| {
+			type: 'card';
+			withHeader: true;
+			isOpened: boolean;
+	  };
+
+export type Layout = RegularLayout | PanelLayout | CardLayout;
+export type NormalizedLayout =
+	| NormalizedRegularLayout
+	| NormalizedPanelLayout
+	| NormalizedCardLayout;
+
 export type SimpleFormField = {
 	id: string;
-	layout?: 'regular' | 'panel';
-	labelPosition?: 'side' | 'top' | 'none';
+	layout?: Layout;
 };
 
 export type CombinedFormField = {
 	id: string;
 	label?: string;
-	layout?: 'regular' | 'panel';
-	labelPosition?: 'side' | 'top' | 'none';
+	layout?: Layout;
 	children: Array< FormField | string >;
 };
 
@@ -681,9 +748,8 @@ export type FormField = SimpleFormField | CombinedFormField;
  * The form configuration.
  */
 export type Form = {
-	type?: 'regular' | 'panel';
+	layout?: Layout;
 	fields?: Array< FormField | string >;
-	labelPosition?: 'side' | 'top' | 'none';
 };
 
 export interface DataFormProps< Item > {