@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

package/src/{components/dataform/stories/index.story.tsx → stories/dataform.story.tsx}

@@ -16,20 +16,24 @@ import {
 /**
  * Internal dependencies
  */
-import DataForm from '../index';
-import { isItemValid } from '../../../validation';
+import DataForm from '../components/dataform';
+import useFormValidity from '../hooks/use-form-validity';
+
 import type {
+	CardLayout,
+	DataFormControlProps,
 	Field,
+	FieldValidity,
 	Form,
-	DataFormControlProps,
 	Layout,
-	RegularLayout,
 	PanelLayout,
-	CardLayout,
-} from '../../../types';
-import { unlock } from '../../../lock-unlock';
+	RegularLayout,
+	Rules,
+} from '../types';
+import { unlock } from '../lock-unlock';
+import DateControl from '../dataform-controls/date';
 
-const { ValidatedTextControl } = unlock( privateApis );
+const { ValidatedTextControl, Badge } = unlock( privateApis );
 
 type SamplePost = {
 	title: string;
@@ -431,7 +435,6 @@ const LayoutPanelComponent = ( {
 					id: 'discussion',
 					label: 'Discussion',
 					children: [ 'comment_status', 'ping_status' ],
-					summary: 'discussion',
 				},
 				{
 					id: 'address1',
@@ -447,13 +450,19 @@ const LayoutPanelComponent = ( {
 						'flight_status',
 						'gate',
 					],
-					summary: [ 'origin', 'destination', 'flight_status' ],
+					layout: {
+						type: 'panel',
+						summary: [ 'origin', 'destination', 'flight_status' ],
+					},
 				},
 				{
 					id: 'passenger_details',
 					label: 'Passenger Details',
 					children: [ 'author', 'seat' ],
-					summary: [ 'author', 'seat' ],
+					layout: {
+						type: 'panel',
+						summary: [ 'author', 'seat' ],
+					},
 				},
 			],
 		};
@@ -474,13 +483,35 @@ const LayoutPanelComponent = ( {
 	);
 };
 
+function getCustomValidity< Item >(
+	isValid: Rules< Item >,
+	validity: FieldValidity | undefined
+) {
+	let customValidity;
+	if ( isValid?.required && validity?.required ) {
+		// If the consumer provides a message for required,
+		// use it instead of the native built-in message.
+		customValidity = validity?.required?.message
+			? validity.required
+			: undefined;
+	} else if ( isValid?.elements && validity?.elements ) {
+		customValidity = validity.elements;
+	} else if ( validity?.custom ) {
+		customValidity = validity.custom;
+	}
+
+	return customValidity;
+}
+
 function CustomEditControl< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: DataFormControlProps< Item > ) {
-	const { label, placeholder, description, getValue, setValue } = field;
+	const { label, placeholder, description, getValue, setValue, isValid } =
+		field;
 	const value = getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -491,7 +522,8 @@ function CustomEditControl< Item >( {
 
 	return (
 		<ValidatedTextControl
-			required={ !! field.isValid?.required }
+			required={ !! isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }
@@ -506,11 +538,13 @@ function CustomEditControl< Item >( {
 
 const ValidationComponent = ( {
 	required,
+	elements,
 	type,
 	custom,
 }: {
 	required: boolean;
-	custom: boolean;
+	elements: 'sync' | 'async' | 'none';
+	custom: 'sync' | 'async' | 'none';
 	type: 'regular' | 'panel';
 } ) => {
 	type ValidatedItem = {
@@ -523,6 +557,7 @@ const ValidationComponent = ( {
 		url: string;
 		color: string;
 		integer: number;
+		number: number;
 		boolean: boolean;
 		customEdit: string;
 		categories: string[];
@@ -530,6 +565,13 @@ const ValidationComponent = ( {
 		password: string;
 		toggle?: boolean;
 		toggleGroup?: string;
+		date?: string;
+		dateRange?: string;
+		datetime?: string;
+	};
+
+	const DateRangeEdit = ( props: DataFormControlProps< ValidatedItem > ) => {
+		return <DateControl { ...props } operator="between" />;
 	};
 
 	const [ post, setPost ] = useState< ValidatedItem >( {
@@ -542,6 +584,7 @@ const ValidationComponent = ( {
 		url: 'https://example.com',
 		color: '#ff6600',
 		integer: 2,
+		number: 3.14,
 		boolean: true,
 		categories: [ 'astronomy' ],
 		countries: [ 'us' ],
@@ -549,8 +592,22 @@ const ValidationComponent = ( {
 		password: 'secretpassword123',
 		toggle: undefined,
 		toggleGroup: undefined,
+		date: undefined,
+		dateRange: undefined,
+		datetime: undefined,
 	} );
 
+	const makeAsync = ( rule: ( item: ValidatedItem ) => null | string ) => {
+		return async ( value: ValidatedItem ) => {
+			return await new Promise< string | null >( ( resolve ) => {
+				setTimeout( () => {
+					const validationResult = rule( value );
+					resolve( validationResult );
+				}, 2000 );
+			} );
+		};
+	};
+
 	const customTextRule = ( value: ValidatedItem ) => {
 		if ( ! /^[a-zA-Z ]+$/.test( value.text ) ) {
 			return 'Value must only contain letters and spaces.';
@@ -616,6 +673,13 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customNumberRule = ( value: ValidatedItem ) => {
+		if ( ! /^\d+\.\d{2}$/.test( value?.number?.toString() ) ) {
+			return 'Number must have exactly two decimal places.';
+		}
+
+		return null;
+	};
 	const customBooleanRule = ( value: ValidatedItem ) => {
 		if ( value.boolean !== true ) {
 			return 'Boolean must be active.';
@@ -652,12 +716,164 @@ const ValidationComponent = ( {
 		return null;
 	};
 
+	const customDateRule = ( value: ValidatedItem ) => {
+		if ( ! value.date ) {
+			return null;
+		}
+		const selectedDate = new Date( value.date );
+		const today = new Date();
+		today.setHours( 0, 0, 0, 0 );
+		if ( selectedDate < today ) {
+			return 'Date must not be in the past.';
+		}
+
+		return null;
+	};
+	const customDateTimeRule = ( value: ValidatedItem ) => {
+		if ( ! value.datetime ) {
+			return null;
+		}
+		const selectedDateTime = new Date( value.datetime );
+		const now = new Date();
+		if ( selectedDateTime < now ) {
+			return 'Date and time must not be in the past.';
+		}
+
+		return null;
+	};
+
+	const customDateRangeRule = ( value: ValidatedItem ) => {
+		if ( ! value.dateRange ) {
+			return null;
+		}
+		const [ fromDate, toDate ] = value.dateRange;
+		if ( ! fromDate || ! toDate ) {
+			return null;
+		}
+		const from = new Date( fromDate );
+		const to = new Date( toDate );
+		const daysDiff = Math.ceil(
+			( to.getTime() - from.getTime() ) / ( 1000 * 60 * 60 * 24 )
+		);
+		if ( daysDiff > 30 ) {
+			return 'Date range must not exceed 30 days.';
+		}
+		return null;
+	};
+
 	const maybeCustomRule = (
 		rule: ( item: ValidatedItem ) => null | string
 	) => {
-		return custom ? rule : undefined;
+		if ( custom === 'sync' ) {
+			return rule;
+		}
+
+		if ( custom === 'async' ) {
+			return makeAsync( rule );
+		}
+
+		return undefined;
 	};
 
+	// Cache for getElements functions - ensures promises are only created once
+	const getElements = useMemo( () => {
+		const promiseCache: Record< string, Promise< any > > = {};
+
+		return ( fieldId: string ) => {
+			return () => {
+				if ( fieldId in promiseCache ) {
+					return promiseCache[ fieldId ];
+				}
+
+				switch ( fieldId ) {
+					case 'select':
+						promiseCache[ fieldId ] = new Promise( ( resolve ) =>
+							setTimeout(
+								() =>
+									resolve( [
+										{
+											value: 'option1',
+											label: 'Option 1',
+										},
+										{
+											value: 'option2',
+											label: 'Option 2',
+										},
+									] ),
+								3500
+							)
+						);
+						break;
+
+					case 'textWithRadio':
+						promiseCache[ fieldId ] = new Promise( ( resolve ) =>
+							setTimeout(
+								() =>
+									resolve( [
+										{ value: 'item1', label: 'Item 1' },
+										{ value: 'item2', label: 'Item 2' },
+									] ),
+								3500
+							)
+						);
+						break;
+
+					case 'countries':
+						promiseCache[ fieldId ] = new Promise( ( resolve ) =>
+							setTimeout(
+								() =>
+									resolve( [
+										{
+											value: 'us',
+											label: 'United States',
+										},
+										{ value: 'ca', label: 'Canada' },
+										{
+											value: 'uk',
+											label: 'United Kingdom',
+										},
+										{ value: 'fr', label: 'France' },
+										{ value: 'de', label: 'Germany' },
+										{ value: 'jp', label: 'Japan' },
+										{ value: 'au', label: 'Australia' },
+									] ),
+								3500
+							)
+						);
+						break;
+
+					case 'toggleGroup':
+						promiseCache[ fieldId ] = new Promise( ( resolve ) =>
+							setTimeout(
+								() =>
+									resolve( [
+										{
+											value: 'option1',
+											label: 'Option 1',
+										},
+										{
+											value: 'option2',
+											label: 'Option 2',
+										},
+										{
+											value: 'option3',
+											label: 'Option 3',
+										},
+									] ),
+								3500
+							)
+						);
+						break;
+
+					default:
+						throw new Error( `Unknown field ID: ${ fieldId }` );
+				}
+
+				return promiseCache[ fieldId ];
+			};
+		};
+	}, [ elements ] );
+
 	const _fields: Field< ValidatedItem >[] = [
 		{
 			id: 'text',
@@ -665,6 +881,7 @@ const ValidationComponent = ( {
 			label: 'Text',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customTextRule ),
 			},
 		},
@@ -672,12 +889,18 @@ const ValidationComponent = ( {
 			id: 'select',
 			type: 'text',
 			label: 'Select',
-			elements: [
-				{ value: 'option1', label: 'Option 1' },
-				{ value: 'option2', label: 'Option 2' },
-			],
+			elements:
+				elements === 'async'
+					? undefined
+					: [
+							{ value: 'option1', label: 'Option 1' },
+							{ value: 'option2', label: 'Option 2' },
+					  ],
+			getElements:
+				elements === 'async' ? getElements( 'select' ) : undefined,
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customSelectRule ),
 			},
 		},
@@ -686,12 +909,20 @@ const ValidationComponent = ( {
 			type: 'text',
 			Edit: 'radio',
 			label: 'Text with radio',
-			elements: [
-				{ value: 'item1', label: 'Item 1' },
-				{ value: 'item2', label: 'Item 2' },
-			],
+			elements:
+				elements === 'async'
+					? undefined
+					: [
+							{ value: 'item1', label: 'Item 1' },
+							{ value: 'item2', label: 'Item 2' },
+					  ],
+			getElements:
+				elements === 'async'
+					? getElements( 'textWithRadio' )
+					: undefined,
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customTextRadioRule ),
 			},
 		},
@@ -702,6 +933,7 @@ const ValidationComponent = ( {
 			label: 'Textarea',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customTextareaRule ),
 			},
 		},
@@ -711,6 +943,7 @@ const ValidationComponent = ( {
 			label: 'e-mail',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customEmailRule ),
 			},
 		},
@@ -720,6 +953,7 @@ const ValidationComponent = ( {
 			label: 'telephone',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customTelephoneRule ),
 			},
 		},
@@ -729,6 +963,7 @@ const ValidationComponent = ( {
 			label: 'URL',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customUrlRule ),
 			},
 		},
@@ -738,6 +973,7 @@ const ValidationComponent = ( {
 			label: 'Color',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customColorRule ),
 			},
 		},
@@ -747,32 +983,29 @@ const ValidationComponent = ( {
 			label: 'Integer',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customIntegerRule ),
 			},
 		},
 		{
-			id: 'boolean',
-			type: 'boolean',
-			label: 'Boolean',
+			id: 'number',
+			type: 'number',
+			label: 'Number',
 			isValid: {
 				required,
-				custom: maybeCustomRule( customBooleanRule ),
+				elements: elements !== 'none' ? true : false,
+				custom: maybeCustomRule( customNumberRule ),
 			},
 		},
 		{
-			id: 'categories',
-			type: 'array' as const,
-			label: 'Categories',
+			id: 'boolean',
+			type: 'boolean',
+			label: 'Boolean',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
+				custom: maybeCustomRule( customBooleanRule ),
 			},
-			elements: [
-				{ value: 'astronomy', label: 'Astronomy' },
-				{ value: 'book-review', label: 'Book review' },
-				{ value: 'event', label: 'Event' },
-				{ value: 'photography', label: 'Photography' },
-				{ value: 'travel', label: 'Travel' },
-			],
 		},
 		{
 			id: 'countries',
@@ -782,17 +1015,22 @@ const ValidationComponent = ( {
 			description: 'Countries you have visited',
 			isValid: {
 				required,
-				elements: true,
+				elements: elements !== 'none' ? true : false,
 			},
-			elements: [
-				{ value: 'us', label: 'United States' },
-				{ value: 'ca', label: 'Canada' },
-				{ value: 'uk', label: 'United Kingdom' },
-				{ value: 'fr', label: 'France' },
-				{ value: 'de', label: 'Germany' },
-				{ value: 'jp', label: 'Japan' },
-				{ value: 'au', label: 'Australia' },
-			],
+			elements:
+				elements === 'async'
+					? undefined
+					: [
+							{ value: 'us', label: 'United States' },
+							{ value: 'ca', label: 'Canada' },
+							{ value: 'uk', label: 'United Kingdom' },
+							{ value: 'fr', label: 'France' },
+							{ value: 'de', label: 'Germany' },
+							{ value: 'jp', label: 'Japan' },
+							{ value: 'au', label: 'Australia' },
+					  ],
+			getElements:
+				elements === 'async' ? getElements( 'countries' ) : undefined,
 		},
 		{
 			id: 'customEdit',
@@ -800,6 +1038,7 @@ const ValidationComponent = ( {
 			Edit: CustomEditControl,
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 			},
 		},
 		{
@@ -808,6 +1047,7 @@ const ValidationComponent = ( {
 			label: 'Password',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customPasswordRule ),
 			},
 		},
@@ -818,6 +1058,7 @@ const ValidationComponent = ( {
 			Edit: 'toggle',
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customToggleRule ),
 			},
 		},
@@ -826,22 +1067,60 @@ const ValidationComponent = ( {
 			type: 'text',
 			label: 'Toggle Group',
 			Edit: 'toggleGroup',
-			elements: [
-				{ value: 'option1', label: 'Option 1' },
-				{ value: 'option2', label: 'Option 2' },
-				{ value: 'option3', label: 'Option 3' },
-			],
+			elements:
+				elements === 'async'
+					? undefined
+					: [
+							{ value: 'option1', label: 'Option 1' },
+							{ value: 'option2', label: 'Option 2' },
+							{ value: 'option3', label: 'Option 3' },
+					  ],
+			getElements:
+				elements === 'async' ? getElements( 'toggleGroup' ) : undefined,
 			isValid: {
 				required,
+				elements: elements !== 'none' ? true : false,
 				custom: maybeCustomRule( customToggleGroupRule ),
 			},
 		},
+		{
+			id: 'date',
+			type: 'date',
+			label: 'Date',
+			isValid: {
+				required,
+				elements: elements !== 'none' ? true : false,
+				custom: maybeCustomRule( customDateRule ),
+			},
+		},
+		{
+			id: 'dateRange',
+			type: 'date',
+			label: 'Date Range',
+			Edit: DateRangeEdit,
+			isValid: {
+				required,
+				elements: elements !== 'none' ? true : false,
+				custom: maybeCustomRule( customDateRangeRule ),
+			},
+		},
+		{
+			id: 'datetime',
+			type: 'datetime',
+			label: 'Date Time',
+			isValid: {
+				required,
+				elements: elements !== 'none' ? true : false,
+				custom: maybeCustomRule( customDateTimeRule ),
+			},
+		},
 	];
 
 	const form = {
 		layout: { type },
 		fields: [
-			'text',
+			// Use field object for testing purposes.
+			{ id: 'text' },
 			'select',
 			'textWithRadio',
 			'textarea',
@@ -850,6 +1129,7 @@ const ValidationComponent = ( {
 			'url',
 			'color',
 			'integer',
+			'number',
 			'boolean',
 			'categories',
 			'countries',
@@ -857,10 +1137,16 @@ const ValidationComponent = ( {
 			'toggleGroup',
 			'password',
 			'customEdit',
+			// Use field object with children for testing purposes.
+			{
+				id: 'dates',
+				label: 'Dates',
+				children: [ 'date', 'dateRange', 'datetime' ],
+			},
 		],
 	};
 
-	const canSave = isItemValid( post, _fields, form );
+	const { validity, isValid } = useFormValidity( post, _fields, form );
 
 	return (
 		<form>
@@ -869,6 +1155,7 @@ const ValidationComponent = ( {
 					data={ post }
 					fields={ _fields }
 					form={ form }
+					validity={ validity }
 					onChange={ ( edits ) =>
 						setPost( ( prev ) => ( {
 							...prev,
@@ -879,7 +1166,7 @@ const ValidationComponent = ( {
 				<Button
 					__next40pxDefaultSize
 					accessibleWhenDisabled
-					disabled={ ! canSave }
+					disabled={ ! isValid }
 					variant="primary"
 				>
 					Submit
@@ -980,6 +1267,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 		hasVat: boolean;
 		vat: number;
 		commission: number;
+		dueDate: string;
 	};
 
 	const customerFields: Field< Customer >[] = [
@@ -1051,6 +1339,22 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 			label: 'Commission',
 			type: 'integer',
 		},
+		{
+			id: 'dueDate',
+			label: 'Due Date',
+			type: 'text',
+			render: ( { item } ) => {
+				return <Badge>Due on: { item.dueDate }</Badge>;
+			},
+		},
+		{
+			id: 'plan-summary',
+			type: 'text',
+			readOnly: true,
+			render: ( { item } ) => {
+				return <Badge>{ item.plan }</Badge>;
+			},
+		},
 	];
 
 	const [ customer, setCustomer ] = useState< Customer >( {
@@ -1067,6 +1371,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 		hasVat: true,
 		vat: 10,
 		commission: 5,
+		dueDate: 'March 1st, 2028',
 	} );
 
 	const form: Form = useMemo(
@@ -1078,6 +1383,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 			fields: [
 				{
 					id: 'customerCard',
+					layout: { type: 'card', summary: 'plan-summary' },
 					label: 'Customer',
 					description:
 						'Enter your contact details, plan type, and addresses to complete your customer information.',
@@ -1085,7 +1391,10 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 						{
 							id: 'customerContact',
 							label: 'Contact',
-							layout: { type: 'panel', labelPosition: 'top' },
+							layout: {
+								type: 'panel',
+								labelPosition: 'top',
+							},
 							children: [
 								{
 									id: 'name',
@@ -1138,6 +1447,7 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 					layout: {
 						type: 'card',
 						isOpened: false,
+						summary: [ { id: 'dueDate', visibility: 'always' } ],
 					},
 					children: [ 'vat', 'commission' ],
 				},
@@ -1185,6 +1495,10 @@ const LayoutRowComponent = ( {
 		hasDiscount: boolean;
 		vat: number;
 		commission: number;
+		cost: number;
+		tax: number;
+		quantity: number;
+		total: number;
 	};
 
 	const customerFields: Field< Customer >[] = [
@@ -1275,6 +1589,42 @@ const LayoutRowComponent = ( {
 				{ value: 'yearly', label: 'Yearly' },
 			],
 		},
+		{
+			id: 'cost',
+			label: 'Cost',
+			type: 'integer',
+			setValue: ( { item, value } ) => ( {
+				cost: value,
+				total: Number( value ) * item.quantity,
+			} ),
+		},
+		{
+			id: 'quantity',
+			label: 'Quantity',
+			type: 'integer',
+			elements: [
+				{ value: 1, label: '1' },
+				{ value: 2, label: '2' },
+				{ value: 3, label: '3' },
+				{ value: 4, label: '4' },
+				{ value: 5, label: '5' },
+				{ value: 6, label: '6' },
+				{ value: 7, label: '7' },
+				{ value: 8, label: '8' },
+				{ value: 9, label: '9' },
+				{ value: 10, label: '10' },
+			],
+			setValue: ( { item, value } ) => ( {
+				quantity: Number( value ),
+				total: Number( value ) * item.cost,
+			} ),
+		},
+		{
+			id: 'total',
+			label: 'Total',
+			type: 'integer',
+			readOnly: true,
+		},
 	];
 
 	const [ customer, setCustomer ] = useState< Customer >( {
@@ -1296,6 +1646,10 @@ const LayoutRowComponent = ( {
 		vat: 10,
 		commission: 5,
 		hasDiscount: true,
+		cost: 100,
+		tax: 20,
+		quantity: 5,
+		total: 600,
 	} );
 
 	const form: Form = useMemo(
@@ -1398,6 +1752,35 @@ const LayoutRowComponent = ( {
 					} ) )
 				}
 			/>
+			<h2>Field widths</h2>
+			<DataForm
+				data={ customer }
+				fields={ customerFields }
+				form={ {
+					fields: [
+						{
+							id: 'product',
+							label: 'Product',
+							layout: {
+								type: 'row',
+								alignment: 'end',
+								styles: {
+									total: { flex: 1 },
+									cost: { flex: 3 },
+									quantity: { flex: 3 },
+								},
+							},
+							children: [ 'total', 'cost', 'quantity' ],
+						},
+					],
+				} }
+				onChange={ ( edits ) =>
+					setCustomer( ( prev ) => ( {
+						...prev,
+						...edits,
+					} ) )
+				}
+			/>
 		</>
 	);
 };
@@ -1532,22 +1915,31 @@ export const Validation = {
 	argTypes: {
 		required: {
 			control: { type: 'boolean' },
-			description: 'Whether or not the fields are required.',
+			description:
+				'Whether or not the required validation rule is active.',
 		},
-		type: {
+		elements: {
 			control: { type: 'select' },
-			description: 'Chooses the validation type.',
-			options: [ 'regular', 'panel' ],
+			description:
+				'Whether or not the elements validation rule is active.',
+			options: [ 'sync', 'async', 'none' ],
 		},
 		custom: {
-			control: { type: 'boolean' },
-			description: 'Whether or not the fields have custom validation.',
+			control: { type: 'select' },
+			description: 'Whether or not the custom validation rule is active.',
+			options: [ 'sync', 'async', 'none' ],
+		},
+		type: {
+			control: { type: 'select' },
+			description: 'Chooses the layout type.',
+			options: [ 'regular', 'panel', 'card', 'row' ],
 		},
 	},
 	args: {
 		required: true,
+		elements: 'sync',
+		custom: 'sync',
 		type: 'regular',
-		custom: true,
 	},
 };