Add bulk editing support by passing array down to the fields

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

@@ -8,7 +8,7 @@ import { ToggleControl } from '@wordpress/components';
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { Field, Form } from '../../../types';
+import type { DataFormControlProps, Field, Form } from '../../../types';
 
 type SamplePost = {
 	title: string;
@@ -19,6 +19,7 @@ type SamplePost = {
 	date: string;
 	birthdate: string;
 	password?: string;
+	sticky?: boolean;
 };
 
 const meta = {
@@ -107,16 +108,19 @@ const fields = [
 		id: 'sticky',
 		label: 'Sticky',
 		type: 'integer',
-		Edit: ( { field, onChange, data, hideLabelFromVision } ) => {
-			const { id, getValue } = field;
+		Edit: ( {
+			field,
+			onChange,
+			value,
+			hideLabelFromVision,
+		}: DataFormControlProps< SamplePost > ) => {
+			const { id } = field;
 			return (
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ hideLabelFromVision ? '' : field.label }
-					checked={ getValue( { item: data } ) }
-					onChange={ () =>
-						onChange( { [ id ]: ! getValue( { item: data } ) } )
-					}
+					checked={ value }
+					onChange={ () => onChange( { [ id ]: ! value } ) }
 				/>
 			);
 		},

packages/dataviews/src/constants.ts

@@ -68,3 +68,6 @@ export const sortIcons = {
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_GRID = 'grid';
 export const LAYOUT_LIST = 'list';
+
+// Dataform mixed value.
+export const MIXED_VALUE = Symbol.for( 'DATAFORM_MIXED_VALUE' );

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

@@ -10,13 +10,12 @@ import { useCallback } from '@wordpress/element';
 import type { DataFormControlProps } from '../types';
 
 export default function DateTime< Item >( {
-	data,
 	field,
 	onChange,
 	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
+	value,
+}: DataFormControlProps< Item, string > ) {
 	const { id, label } = field;
-	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
 		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
@@ -34,7 +33,7 @@ export default function DateTime< Item >( {
 				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 			) }
 			<TimePicker
-				currentTime={ value }
+				currentTime={ typeof value === 'symbol' ? '' : value }
 				onChange={ onChangeControl }
 				hideLabelFromVision
 			/>

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

@@ -10,13 +10,12 @@ import { useCallback } from '@wordpress/element';
 import type { DataFormControlProps } from '../types';
 
 export default function Integer< Item >( {
-	data,
 	field,
 	onChange,
 	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
+	value,
+}: DataFormControlProps< Item, number > ) {
 	const { id, label, description } = field;
-	const value = field.getValue( { item: data } ) ?? '';
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( {
@@ -29,7 +28,7 @@ export default function Integer< Item >( {
 		<NumberControl
 			label={ label }
 			help={ description }
-			value={ value }
+			value={ typeof value === 'symbol' ? '' : value }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
 			hideLabelFromVision={ hideLabelFromVision }

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

@@ -10,13 +10,12 @@ import { useCallback } from '@wordpress/element';
 import type { DataFormControlProps } from '../types';
 
 export default function Radio< Item >( {
-	data,
 	field,
 	onChange,
 	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
+	value,
+}: DataFormControlProps< Item, string > ) {
 	const { id, label } = field;
-	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -32,7 +31,7 @@ export default function Radio< Item >( {
 				label={ label }
 				onChange={ onChangeControl }
 				options={ field.elements }
-				selected={ value }
+				selected={ typeof value === 'symbol' ? '' : value }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
 		);

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

@@ -11,13 +11,12 @@ import { __ } from '@wordpress/i18n';
 import type { DataFormControlProps } from '../types';
 
 export default function Select< Item >( {
-	data,
 	field,
 	onChange,
 	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
+	value,
+}: DataFormControlProps< Item, string | number > ) {
 	const { id, label } = field;
-	const value = field.getValue( { item: data } ) ?? '';
 	const onChangeControl = useCallback(
 		( newValue: any ) =>
 			onChange( {
@@ -41,7 +40,7 @@ export default function Select< Item >( {
 	return (
 		<SelectControl
 			label={ label }
-			value={ value }
+			value={ typeof value === 'symbol' ? '' : value }
 			options={ elements }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize

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

@@ -10,13 +10,12 @@ import { useCallback } from '@wordpress/element';
 import type { DataFormControlProps } from '../types';
 
 export default function Text< Item >( {
-	data,
 	field,
 	onChange,
 	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
+	value,
+}: DataFormControlProps< Item, string > ) {
 	const { id, label, placeholder } = field;
-	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -30,7 +29,7 @@ export default function Text< Item >( {
 		<TextControl
 			label={ label }
 			placeholder={ placeholder }
-			value={ value ?? '' }
+			value={ typeof value === 'symbol' ? '' : value ?? '' }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom

packages/dataviews/src/dataforms-layouts/data-form-layout.tsx

@@ -7,24 +7,43 @@ import { useContext, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { Form, FormField, SimpleFormField } from '../types';
+import type {
+	CombinedFormField,
+	Form,
+	FormField,
+	NormalizedField,
+	SimpleFormField,
+} from '../types';
 import { getFormFieldLayout } from './index';
 import DataFormContext from '../components/dataform-context';
 import { isCombinedField } from './is-combined-field';
 import normalizeFormFields from '../normalize-form-fields';
 
+function doesCombinedFieldSupportBulkEdits< Item >(
+	combinedField: CombinedFormField,
+	fieldDefinitions: NormalizedField< Item >[]
+): boolean {
+	return combinedField.children.some( ( child ) => {
+		const fieldId = typeof child === 'string' ? child : child.id;
+
+		return ! fieldDefinitions.find(
+			( fieldDefinition ) => fieldDefinition.id === fieldId
+		)?.unique;
+	} );
+}
+
 export function DataFormLayout< Item >( {
 	data,
 	form,
 	onChange,
 	children,
 }: {
-	data: Item;
+	data: Item | Item[];
 	form: Form;
 	onChange: ( value: any ) => void;
 	children?: (
 		FieldLayout: ( props: {
-			data: Item;
+			data: Item | Item[];
 			field: FormField;
 			onChange: ( value: any ) => void;
 			hideLabelFromVision?: boolean;
@@ -69,6 +88,18 @@ export function DataFormLayout< Item >( {
 					return null;
 				}
 
+				if (
+					Array.isArray( data ) &&
+					( ( isCombinedField( formField ) &&
+						! doesCombinedFieldSupportBulkEdits(
+							formField,
+							fieldDefinitions
+						) ) ||
+						( fieldDefinition && fieldDefinition.unique ) )
+				) {
+					return null;
+				}
+
 				if ( children ) {
 					return children( FieldLayout, formField );
 				}

packages/dataviews/src/dataforms-layouts/panel/index.tsx

@@ -26,6 +26,8 @@ import type {
 import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
+import { MIXED_VALUE } from '../../constants';
+import useFieldValue from '../use-field-value';
 
 function DropdownHeader( {
 	title,
@@ -70,7 +72,7 @@ function PanelDropdown< Item >( {
 	fieldDefinition: NormalizedField< Item >;
 	popoverAnchor: HTMLElement | null;
 	labelPosition: 'side' | 'top' | 'none';
-	data: Item;
+	data: Item | Item[];
 	onChange: ( value: any ) => void;
 	field: FormField;
 } ) {
@@ -98,6 +100,8 @@ function PanelDropdown< Item >( {
 		};
 	}, [ field ] );
 
+	const fieldValue = useFieldValue( data, field.id );
+
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
 		() => ( {
@@ -111,6 +115,8 @@ function PanelDropdown< Item >( {
 		[ popoverAnchor ]
 	);
 
+	const showMixedValue = Array.isArray( data ) && fieldValue === MIXED_VALUE;
+
 	return (
 		<Dropdown
 			contentClassName="dataforms-layouts-panel__field-dropdown"
@@ -138,7 +144,13 @@ function PanelDropdown< Item >( {
 					) }
 					onClick={ onToggle }
 				>
-					<fieldDefinition.render item={ data } />
+					{ showMixedValue ? (
+						__( 'Mixed' )
+					) : (
+						<fieldDefinition.render
+							item={ Array.isArray( data ) ? data[ 0 ] : data }
+						/>
+					) }
 				</Button>
 			) }
 			renderContent={ ( { onClose } ) => (

packages/dataviews/src/dataforms-layouts/regular/index.tsx

@@ -16,6 +16,7 @@ import type { Form, FieldLayoutProps } from '../../types';
 import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
+import useFieldValue from '../use-field-value';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -59,6 +60,8 @@ export default function FormRegularField< Item >( {
 		};
 	}, [ field ] );
 
+	const fieldValue = useFieldValue( data, field.id );
+
 	if ( isCombinedField( field ) ) {
 		return (
 			<>
@@ -95,6 +98,7 @@ export default function FormRegularField< Item >( {
 						field={ fieldDefinition }
 						onChange={ onChange }
 						hideLabelFromVision
+						value={ fieldValue }
 					/>
 				</div>
 			</HStack>
@@ -105,6 +109,7 @@ export default function FormRegularField< Item >( {
 		<div className="dataforms-layouts-regular__field">
 			<fieldDefinition.Edit
 				data={ data }
+				value={ fieldValue }
 				field={ fieldDefinition }
 				onChange={ onChange }
 				hideLabelFromVision={

packages/dataviews/src/dataforms-layouts/use-field-value.ts

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataFormContext from '../components/dataform-context';
+import { MIXED_VALUE } from '../constants';
+
+export default function useFieldValue< Item >(
+	data: Item | Item[],
+	fieldId: string
+) {
+	const { fields } = useContext( DataFormContext );
+	return useMemo( () => {
+		const fieldDefinition = fields.find(
+			( fieldDef ) => fieldDef.id === fieldId
+		);
+		if ( ! fieldDefinition ) {
+			return undefined;
+		}
+		if ( Array.isArray( data ) ) {
+			const [ firstRecord, ...remainingRecords ] = data;
+			const firstValue = fieldDefinition.getValue( {
+				item: firstRecord,
+			} );
+			const intersects = remainingRecords.every( ( item ) => {
+				return fieldDefinition.getValue( { item } ) === firstValue;
+			} );
+			return intersects ? firstValue : MIXED_VALUE;
+		}
+		return fieldDefinition.getValue( {
+			item: data,
+		} );
+	}, [ data, fields, fieldId ] );
+}

packages/dataviews/src/normalize-fields.ts

@@ -76,6 +76,7 @@ export function normalizeFields< Item >(
 			sort,
 			isValid,
 			Edit,
+			unique: field.unique ?? false,
 			enableHiding: field.enableHiding ?? true,
 			enableSorting: field.enableSorting ?? true,
 		};