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

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/stories/index.story.tsx

@@ -5,7 +5,11 @@ import { useState, useMemo } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
+import { starFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -56,10 +60,32 @@ const meta = {
 };
 export default meta;
 
+const DollarPrefix = () => (
+	<InputControlPrefixWrapper>
+		<span>$</span>
+	</InputControlPrefixWrapper>
+);
+const StarIconPrefix = () => (
+	<InputControlPrefixWrapper variant="icon">
+		<Icon icon={ starFilled } />
+	</InputControlPrefixWrapper>
+);
+const PercentSuffix = () => (
+	<InputControlSuffixWrapper>
+		<span>%</span>
+	</InputControlSuffixWrapper>
+);
+const USDSuffix = () => (
+	<InputControlSuffixWrapper>
+		<span>USD</span>
+	</InputControlSuffixWrapper>
+);
+
 type DataType = {
 	id: number;
 	text: string;
 	textWithElements: string;
+	textWithRadio: string;
 	textWithTextarea: string;
 	integer: number;
 	integerWithElements: number;
@@ -86,13 +112,18 @@ type DataType = {
 	arrayWithElements: string[];
 	notype: string;
 	notypeWithElements: string;
+	priceWithPrefix?: string;
+	ratingWithIcon?: string;
+	percentageWithSuffix?: string;
+	priceWithBoth?: string;
 };
 
 const data: DataType[] = [
 	{
 		id: 1,
 		text: 'Text',
-		textWithElements: 'Item 1',
+		textWithElements: 'item1',
+		textWithRadio: 'item2',
 		textWithTextarea: 'Textarea',
 		integer: 1,
 		integerWithElements: 1,
@@ -120,6 +151,10 @@ const data: DataType[] = [
 		arrayWithElements: [ 'item1', 'item2', 'item3' ],
 		notype: 'No type',
 		notypeWithElements: 'No type',
+		priceWithPrefix: '25.99',
+		ratingWithIcon: '4.5',
+		percentageWithSuffix: '85',
+		priceWithBoth: '199.99',
 	},
 ];
 
@@ -141,6 +176,18 @@ const fields: Field< DataType >[] = [
 			{ value: 'item3', label: 'Item 3' },
 		],
 	},
+	{
+		id: 'textWithRadio',
+		type: 'text',
+		label: 'Text (with radio)',
+		description: 'Help for text with radio.',
+		Edit: 'radio',
+		elements: [
+			{ value: 'item1', label: 'Item 1' },
+			{ value: 'item2', label: 'Item 2' },
+			{ value: 'item3', label: 'Item 3' },
+		],
+	},
 	{
 		id: 'textWithTextarea',
 		type: 'text',
@@ -395,6 +442,47 @@ const fields: Field< DataType >[] = [
 			{ value: 'item3', label: 'Item 3' },
 		],
 	},
+	{
+		id: 'priceWithPrefix',
+		label: 'Text with Prefix',
+		type: 'text',
+		description: 'Text field with dollar sign prefix.',
+		Edit: {
+			control: 'text',
+			prefix: DollarPrefix,
+		},
+	},
+	{
+		id: 'ratingWithIcon',
+		label: 'Text with Icon Prefix',
+		type: 'text',
+		description: 'Text field with star icon prefix.',
+		Edit: {
+			control: 'text',
+			prefix: StarIconPrefix,
+		},
+	},
+	{
+		id: 'percentageWithSuffix',
+		label: 'Text with Suffix',
+		type: 'text',
+		description: 'Text field with percent sign suffix.',
+		Edit: {
+			control: 'text',
+			suffix: PercentSuffix,
+		},
+	},
+	{
+		id: 'priceWithBoth',
+		label: 'Text with Prefix and Suffix',
+		type: 'text',
+		description: 'Text field with both dollar prefix and USD suffix.',
+		Edit: {
+			control: 'text',
+			prefix: DollarPrefix,
+			suffix: USDSuffix,
+		},
+	},
 ];
 
 type PanelTypes = 'regular' | 'panel';

package/src/normalize-fields.ts

@@ -37,6 +37,22 @@ const getValueFromId =
 		return value;
 	};
 
+export const setValueFromId =
+	( id: string ) =>
+	( { value }: { value: any } ) => {
+		const path = id.split( '.' );
+		const result: any = {};
+		let current = result;
+
+		for ( const segment of path.slice( 0, -1 ) ) {
+			current[ segment ] = {};
+			current = current[ segment ];
+		}
+
+		current[ path.at( -1 )! ] = value;
+		return result;
+	};
+
 function getFilterBy< Item >(
 	field: Field< Item >,
 	fieldTypeDefinition: FieldTypeDefinition< Item >
@@ -128,6 +144,7 @@ export function normalizeFields< Item >(
 			field.type
 		);
 		const getValue = field.getValue || getValueFromId( field.id );
+		const setValue = field.setValue || setValueFromId( field.id );
 
 		const sort =
 			field.sort ??
@@ -166,6 +183,7 @@ export function normalizeFields< Item >(
 			label: field.label || field.id,
 			header: field.header || field.label || field.id,
 			getValue,
+			setValue,
 			render,
 			sort,
 			isValid,