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

package/src/dataform-controls/toggle.tsx

@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,7 +23,7 @@ export default function Toggle< Item >( {
 	data,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, getValue, label, description } = field;
+	const { label, description, getValue, setValue } = field;
 	const [ customValidity, setCustomValidity ] =
 		useState<
 			React.ComponentProps<
@@ -26,37 +31,49 @@ export default function Toggle< Item >( {
 			>[ 'customValidity' ]
 		>( undefined );
 
+	const onChangeControl = useCallback( () => {
+		onChange(
+			setValue( { item: data, value: ! getValue( { item: data } ) } )
+		);
+	}, [ onChange, setValue, data, getValue ] );
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
+	);
+
 	return (
 		<ValidatedToggleControl
 			required={ !! field.isValid.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
-			} }
+			onValidate={ onValidateControl }
 			customValidity={ customValidity }
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }
 			help={ description }
 			checked={ getValue( { item: data } ) }
-			onChange={ () =>
-				onChange( { [ id ]: ! getValue( { item: data } ) } )
-			}
+			onChange={ onChangeControl }
 		/>
 	);
 }

package/src/dataform-controls/url.tsx

@@ -1,6 +1,10 @@
 /**
  * WordPress dependencies
  */
+import {
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
 import { link } from '@wordpress/icons';
 
 /**
@@ -23,7 +27,11 @@ export default function Url< Item >( {
 				onChange,
 				hideLabelFromVision,
 				type: 'url',
-				icon: link,
+				prefix: (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ link } />
+					</InputControlPrefixWrapper>
+				),
 			} }
 		/>
 	);

package/src/dataform-controls/utils/validated-input.tsx

@@ -1,12 +1,12 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import {
-	Icon,
-	privateApis,
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
-} from '@wordpress/components';
+import { privateApis } from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 
 /**
@@ -24,11 +24,11 @@ export type DataFormValidatedTextControlProps< Item > =
 		 */
 		type?: 'text' | 'email' | 'tel' | 'url' | 'password';
 		/**
-		 * Optional icon to display as prefix.
+		 * Optional prefix element to display before the input.
 		 */
-		icon?: React.ComponentType | React.ReactElement;
+		prefix?: React.ReactElement;
 		/**
-		 * Optional icon to display as suffix.
+		 * Optional suffix element to display after the input.
 		 */
 		suffix?: React.ReactElement;
 	};
@@ -39,11 +39,12 @@ export default function ValidatedText< Item >( {
 	onChange,
 	hideLabelFromVision,
 	type,
-	icon,
+	prefix,
 	suffix,
 }: DataFormValidatedTextControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
-	const value = field.getValue( { item: data } );
+	const { label, placeholder, description, getValue, setValue, isValid } =
+		field;
+	const value = getValue( { item: data } );
 	const [ customValidity, setCustomValidity ] =
 		useState<
 			React.ComponentProps<
@@ -53,34 +54,45 @@ export default function ValidatedText< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			onChange(
+				setValue( {
+					item: data,
+					value: newValue,
+				} )
+			),
+		[ data, setValue, onChange ]
 	);
 
-	return (
-		<ValidatedInputControl
-			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
 
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
+			setCustomValidity( undefined );
+		},
+		[ data, field, isValid, setValue ]
+	);
 
-				setCustomValidity( undefined );
-			} }
+	return (
+		<ValidatedInputControl
+			required={ !! isValid?.required }
+			onValidate={ onValidateControl }
 			customValidity={ customValidity }
 			label={ label }
 			placeholder={ placeholder }
@@ -89,20 +101,8 @@ export default function ValidatedText< Item >( {
 			onChange={ onChangeControl }
 			hideLabelFromVision={ hideLabelFromVision }
 			type={ type }
-			prefix={
-				icon ? (
-					<InputControlPrefixWrapper variant="icon">
-						<Icon icon={ icon } />
-					</InputControlPrefixWrapper>
-				) : undefined
-			}
-			suffix={
-				suffix ? (
-					<InputControlSuffixWrapper variant="control">
-						{ suffix }
-					</InputControlSuffixWrapper>
-				) : undefined
-			}
+			prefix={ prefix }
+			suffix={ suffix }
 			__next40pxDefaultSize
 		/>
 	);

package/src/dataforms-layouts/panel/dropdown.tsx

@@ -9,7 +9,7 @@ import {
 	Dropdown,
 	Button,
 } from '@wordpress/components';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
 
@@ -20,6 +20,7 @@ import type { Form, FormField, NormalizedField } from '../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
 import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+import SummaryButton from './summary-button';
 
 function DropdownHeader( {
 	title,
@@ -55,6 +56,7 @@ function DropdownHeader( {
 
 function PanelDropdown< Item >( {
 	fieldDefinition,
+	summaryFields,
 	popoverAnchor,
 	labelPosition = 'side',
 	data,
@@ -62,6 +64,7 @@ function PanelDropdown< Item >( {
 	field,
 }: {
 	fieldDefinition: NormalizedField< Item >;
+	summaryFields: NormalizedField< Item >[];
 	popoverAnchor: HTMLElement | null;
 	labelPosition: 'side' | 'top' | 'none';
 	data: Item;
@@ -107,29 +110,15 @@ function PanelDropdown< Item >( {
 				tooltipPosition: 'middle left',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					className="dataforms-layouts-panel__field-control"
-					size="compact"
-					variant={
-						[ 'none', 'top' ].includes( labelPosition )
-							? 'link'
-							: 'tertiary'
-					}
-					aria-expanded={ isOpen }
-					aria-label={ sprintf(
-						// translators: %s: Field name.
-						_x( 'Edit %s', 'field' ),
-						fieldLabel || ''
-					) }
-					onClick={ onToggle }
+				<SummaryButton
+					summaryFields={ summaryFields }
+					data={ data }
+					labelPosition={ labelPosition }
+					fieldLabel={ fieldLabel }
 					disabled={ fieldDefinition.readOnly === true }
-					accessibleWhenDisabled
-				>
-					<fieldDefinition.render
-						item={ data }
-						field={ fieldDefinition }
-					/>
-				</Button>
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+				/>
 			) }
 			renderContent={ ( { onClose } ) => (
 				<>

package/src/dataforms-layouts/panel/index.tsx

@@ -32,28 +32,49 @@ export default function FormPanelField< Item >( {
 	onChange,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
-	const fieldDefinition = fields.find( ( _field ) => {
-		// Default to the first simple child if it is a combined field.
-		if ( isCombinedField( field ) ) {
-			const simpleChildren = field.children.filter(
-				( child ): child is string | SimpleFormField =>
-					typeof child === 'string' || ! isCombinedField( child )
+	const getSummaryFields = () => {
+		if ( ! isCombinedField( field ) ) {
+			const fieldDef = fields.find(
+				( _field ) => _field.id === field.id
 			);
+			return fieldDef ? [ fieldDef ] : [];
+		}
 
-			if ( simpleChildren.length === 0 ) {
-				return false;
-			}
+		// Use summary field(s) if specified for combined fields
+		if ( field.summary ) {
+			const summaryIds = Array.isArray( field.summary )
+				? field.summary
+				: [ field.summary ];
+			return summaryIds
+				.map( ( summaryId ) =>
+					fields.find( ( _field ) => _field.id === summaryId )
+				)
+				.filter( ( _field ) => _field !== undefined );
+		}
 
-			const firstChildFieldId =
-				typeof simpleChildren[ 0 ] === 'string'
-					? simpleChildren[ 0 ]
-					: simpleChildren[ 0 ].id;
+		// Default to the first simple child
+		const simpleChildren = field.children.filter(
+			( child ): child is string | SimpleFormField =>
+				typeof child === 'string' || ! isCombinedField( child )
+		);
 
-			return _field.id === firstChildFieldId;
+		if ( simpleChildren.length === 0 ) {
+			return [];
 		}
 
-		return _field.id === field.id;
-	} );
+		const firstChildFieldId =
+			typeof simpleChildren[ 0 ] === 'string'
+				? simpleChildren[ 0 ]
+				: simpleChildren[ 0 ].id;
+
+		const fieldDef = fields.find(
+			( _field ) => _field.id === firstChildFieldId
+		);
+		return fieldDef ? [ fieldDef ] : [];
+	};
+
+	const summaryFields = getSummaryFields();
+	const fieldDefinition = summaryFields[ 0 ]; // For backward compatibility
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -84,6 +105,7 @@ export default function FormPanelField< Item >( {
 			<PanelModal
 				field={ field }
 				fieldDefinition={ fieldDefinition }
+				summaryFields={ summaryFields }
 				data={ data }
 				onChange={ onChange }
 				labelPosition={ labelPosition }
@@ -93,6 +115,7 @@ export default function FormPanelField< Item >( {
 				field={ field }
 				popoverAnchor={ popoverAnchor }
 				fieldDefinition={ fieldDefinition }
+				summaryFields={ summaryFields }
 				data={ data }
 				onChange={ onChange }
 				labelPosition={ labelPosition }

package/src/dataforms-layouts/panel/modal.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
@@ -7,7 +12,7 @@ import {
 	Button,
 	Modal,
 } from '@wordpress/components';
-import { __, sprintf, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
 
 /**
@@ -17,6 +22,7 @@ import type { Form, FormField, NormalizedField } from '../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
 import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+import SummaryButton from './summary-button';
 
 function ModalContent< Item >( {
 	data,
@@ -32,19 +38,19 @@ function ModalContent< Item >( {
 	onClose: () => void;
 } ) {
 	const [ changes, setChanges ] = useState< Partial< Item > >( {} );
+	const modalData = useMemo( () => {
+		return deepMerge( data, changes );
+	}, [ data, changes ] );
 
 	const onApply = () => {
 		onChange( changes );
 		onClose();
 	};
 
-	const handleOnChange = ( value: Partial< Item > ) => {
-		setChanges( ( prev ) => ( { ...prev, ...value } ) );
+	const handleOnChange = ( newValue: Partial< Item > ) => {
+		setChanges( ( prev ) => deepMerge( prev, newValue ) );
 	};
 
-	// Merge original data with local changes for display
-	const displayData = { ...data, ...changes };
-
 	return (
 		<Modal
 			className="dataforms-layouts-panel__modal"
@@ -54,14 +60,14 @@ function ModalContent< Item >( {
 			size="medium"
 		>
 			<DataFormLayout
-				data={ displayData }
+				data={ modalData }
 				form={ form }
 				onChange={ handleOnChange }
 			>
 				{ ( FieldLayout, nestedField ) => (
 					<FieldLayout
 						key={ nestedField.id }
-						data={ displayData }
+						data={ modalData }
 						field={ nestedField }
 						onChange={ handleOnChange }
 						hideLabelFromVision={
@@ -96,12 +102,14 @@ function ModalContent< Item >( {
 
 function PanelModal< Item >( {
 	fieldDefinition,
+	summaryFields,
 	labelPosition,
 	data,
 	onChange,
 	field,
 }: {
 	fieldDefinition: NormalizedField< Item >;
+	summaryFields: NormalizedField< Item >[];
 	labelPosition: 'side' | 'top' | 'none';
 	data: Item;
 	onChange: ( value: any ) => void;
@@ -126,29 +134,15 @@ function PanelModal< Item >( {
 
 	return (
 		<>
-			<Button
-				className="dataforms-layouts-modal__field-control"
-				size="compact"
-				variant={
-					[ 'none', 'top' ].includes( labelPosition )
-						? 'link'
-						: 'tertiary'
-				}
-				aria-expanded={ isOpen }
-				aria-label={ sprintf(
-					// translators: %s: Field name.
-					_x( 'Edit %s', 'field' ),
-					fieldLabel || ''
-				) }
-				onClick={ () => setIsOpen( true ) }
+			<SummaryButton
+				summaryFields={ summaryFields }
+				data={ data }
+				labelPosition={ labelPosition }
+				fieldLabel={ fieldLabel }
 				disabled={ fieldDefinition.readOnly === true }
-				accessibleWhenDisabled
-			>
-				<fieldDefinition.render
-					item={ data }
-					field={ fieldDefinition }
-				/>
-			</Button>
+				onClick={ () => setIsOpen( true ) }
+				aria-expanded={ isOpen }
+			/>
 			{ isOpen && (
 				<ModalContent
 					data={ data }

package/src/dataforms-layouts/panel/summary-button.tsx

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { sprintf, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+function SummaryButton< Item >( {
+	summaryFields,
+	data,
+	labelPosition,
+	fieldLabel,
+	disabled,
+	onClick,
+	'aria-expanded': ariaExpanded,
+}: {
+	summaryFields: NormalizedField< Item >[];
+	data: Item;
+	labelPosition: 'side' | 'top' | 'none';
+	fieldLabel?: string;
+	disabled?: boolean;
+	onClick: () => void;
+	'aria-expanded'?: boolean;
+} ) {
+	return (
+		<Button
+			className="dataforms-layouts-panel__summary-button"
+			size="compact"
+			variant={
+				[ 'none', 'top' ].includes( labelPosition )
+					? 'link'
+					: 'tertiary'
+			}
+			aria-expanded={ ariaExpanded }
+			aria-label={ sprintf(
+				// translators: %s: Field name.
+				_x( 'Edit %s', 'field' ),
+				fieldLabel || ''
+			) }
+			onClick={ onClick }
+			disabled={ disabled }
+			accessibleWhenDisabled
+			style={
+				summaryFields.length > 1
+					? {
+							minHeight: 'auto',
+							height: 'auto',
+							alignItems: 'flex-start',
+					  }
+					: undefined
+			}
+		>
+			{ summaryFields.length > 1 ? (
+				<div
+					style={ {
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'flex-start',
+						width: '100%',
+						gap: '2px',
+					} }
+				>
+					{ summaryFields.map( ( summaryField ) => (
+						<div
+							key={ summaryField.id }
+							style={ { width: '100%' } }
+						>
+							<summaryField.render
+								item={ data }
+								field={ summaryField }
+							/>
+						</div>
+					) ) }
+				</div>
+			) : (
+				summaryFields.map( ( summaryField ) => (
+					<summaryField.render
+						key={ summaryField.id }
+						item={ data }
+						field={ summaryField }
+					/>
+				) )
+			) }
+		</Button>
+	);
+}
+
+export default SummaryButton;

package/src/field-types/array.tsx

@@ -59,14 +59,6 @@ const arrayFieldType: FieldTypeDefinition< any > = {
 				return __( 'Every value must be a string.' );
 			}
 
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if (
-					! value.every( ( v: any ) => validValues.includes( v ) )
-				) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
 			return null;
 		},
 	},