@wordpress/dataviews 9.0.1-next.6870dfe5b.0 → 9.0.1-next.a730c9c8c.0

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

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+import { unlock } from '../../lock-unlock';
+
+const { ValidatedInputControl } = unlock( privateApis );
+
+export type DataFormValidatedTextControlProps< Item > =
+	DataFormControlProps< Item > & {
+		/**
+		 * The input type of the control.
+		 */
+		type?: 'text' | 'email' | 'tel' | 'url' | 'password';
+		/**
+		 * Optional prefix element to display before the input.
+		 */
+		prefix?: React.ReactElement;
+		/**
+		 * Optional suffix element to display after the input.
+		 */
+		suffix?: React.ReactElement;
+	};
+
+export default function ValidatedText< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+	type,
+	prefix,
+	suffix,
+}: DataFormValidatedTextControlProps< Item > ) {
+	const { label, placeholder, description, getValue, setValue, isValid } =
+		field;
+	const value = getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedInputControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange(
+				setValue( {
+					item: data,
+					value: newValue,
+				} )
+			),
+		[ data, setValue, onChange ]
+	);
+
+	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;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, isValid, setValue ]
+	);
+
+	return (
+		<ValidatedInputControl
+			required={ !! isValid?.required }
+			onValidate={ onValidateControl }
+			customValidity={ customValidity }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			hideLabelFromVision={ hideLabelFromVision }
+			type={ type }
+			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/dataforms-layouts/regular/index.tsx

@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
 	__experimentalSpacer as Spacer,
+	BaseControl,
 } from '@wordpress/components';
 
 /**
@@ -84,6 +85,7 @@ export default function FormRegularField< Item >( {
 	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
 		return null;
 	}
+
 	if ( labelPosition === 'side' ) {
 		return (
 			<HStack className="dataforms-layouts-regular__field">
@@ -119,17 +121,17 @@ export default function FormRegularField< Item >( {
 		<div className="dataforms-layouts-regular__field">
 			{ fieldDefinition.readOnly === true ? (
 				<>
-					{ ! hideLabelFromVision && labelPosition !== 'none' && (
-						<div className="dataforms-layouts-regular__field-label">
-							{ fieldDefinition.label }
-						</div>
-					) }
-					<div className="dataforms-layouts-regular__field-control">
+					<>
+						{ ! hideLabelFromVision && labelPosition !== 'none' && (
+							<BaseControl.VisualLabel>
+								{ fieldDefinition.label }
+							</BaseControl.VisualLabel>
+						) }
 						<fieldDefinition.render
 							item={ data }
 							field={ fieldDefinition }
 						/>
-					</div>
+					</>
 				</>
 			) : (
 				<fieldDefinition.Edit

package/src/dataforms-layouts/regular/style.scss

@@ -5,12 +5,6 @@
 	align-items: flex-start !important;
 }
 
-.dataforms-layouts-regular__field .components-base-control__label {
-	font-size: inherit;
-	font-weight: normal;
-	text-transform: none;
-}
-
 .dataforms-layouts-regular__field-label {
 	width: 38%;
 	flex-shrink: 0;

package/src/dataviews-layouts/grid/index.tsx

@@ -42,6 +42,7 @@ import type { SetSelection } from '../../private-types';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
 import { GridItems } from '../utils/grid-items';
 const { Badge } = unlock( componentsPrivateApis );
+import getDataByGroup from '../utils/get-data-by-group';
 
 interface GridItemProps< Item > {
 	view: ViewGridType;
@@ -338,19 +339,7 @@ function ViewGrid< Item >( {
 	const groupField = view.groupByField
 		? fields.find( ( f ) => f.id === view.groupByField )
 		: null;
-
-	// Group data by groupByField if specified
-	const dataByGroup = groupField
-		? data.reduce( ( groups: Map< string, typeof data >, item ) => {
-				const groupName = groupField.getValue( { item } );
-				if ( ! groups.has( groupName ) ) {
-					groups.set( groupName, [] );
-				}
-				groups.get( groupName )?.push( item );
-				return groups;
-		  }, new Map< string, typeof data >() )
-		: null;
-
+	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 
 	return (
@@ -474,7 +463,13 @@ function ViewGrid< Item >( {
 							'dataviews-no-results': ! isLoading,
 						} ) }
 					>
-						<p>{ isLoading ? <Spinner /> : empty }</p>
+						{ isLoading ? (
+							<p>
+								<Spinner />
+							</p>
+						) : (
+							empty
+						) }
 					</div>
 				)
 			}

package/src/dataviews-layouts/grid/style.scss

@@ -43,6 +43,7 @@
 		aspect-ratio: 1/1;
 		background-color: $white;
 		border-radius: $radius-medium;
+		overflow: hidden;
 		position: relative;
 
 		img {

package/src/dataviews-layouts/list/index.tsx

@@ -24,7 +24,7 @@ import {
 	useState,
 	useContext,
 } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
 import { useRegistry } from '@wordpress/data';
 
@@ -44,6 +44,7 @@ import type {
 	ViewListProps,
 	ActionModal as ActionModalType,
 } from '../../types';
+import getDataByGroup from '../utils/get-data-by-group';
 
 interface ListViewItemProps< Item > {
 	view: ViewListType;
@@ -512,11 +513,82 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }
 			>
-				{ ! hasData && <p>{ isLoading ? <Spinner /> : empty }</p> }
+				{ ! hasData &&
+					( isLoading ? (
+						<p>
+							<Spinner />
+						</p>
+					) : (
+						empty
+					) ) }
 			</div>
 		);
 	}
 
+	const groupField = view.groupByField
+		? fields.find( ( field ) => field.id === view.groupByField )
+		: null;
+	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
+
+	// Render data grouped by field
+	if ( hasData && groupField && dataByGroup ) {
+		return (
+			<Composite
+				id={ `${ baseId }` }
+				render={ <div /> }
+				className="dataviews-view-list__group"
+				role="grid"
+				activeId={ activeCompositeId }
+				setActiveId={ setActiveCompositeId }
+			>
+				<VStack
+					spacing={ 4 }
+					className={ clsx( 'dataviews-view-list', className ) }
+				>
+					{ Array.from( dataByGroup.entries() ).map(
+						( [ groupName, groupItems ] ) => (
+							<VStack key={ groupName } spacing={ 2 }>
+								<h3 className="dataviews-view-list__group-header">
+									{ sprintf(
+										// translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+										__( '%1$s: %2$s' ),
+										groupField.label,
+										groupName
+									) }
+								</h3>
+								{ groupItems.map( ( item ) => {
+									const id =
+										generateCompositeItemIdPrefix( item );
+									return (
+										<ListItem
+											key={ id }
+											view={ view }
+											idPrefix={ id }
+											actions={ actions }
+											item={ item }
+											isSelected={ item === selectedItem }
+											onSelect={ onSelect }
+											mediaField={ mediaField }
+											titleField={ titleField }
+											descriptionField={
+												descriptionField
+											}
+											otherFields={ otherFields }
+											onDropdownTriggerKeyDown={
+												onDropdownTriggerKeyDown
+											}
+										/>
+									);
+								} ) }
+							</VStack>
+						)
+					) }
+				</VStack>
+			</Composite>
+		);
+	}
+
+	// Render ungrouped data
 	return (
 		<>
 			<Composite

package/src/dataviews-layouts/list/style.scss

@@ -196,3 +196,11 @@ div.dataviews-view-list {
 		justify-content: space-between;
 	}
 }
+
+.dataviews-view-list__group-header {
+	font-size: $font-size-large;
+	font-weight: $font-weight-medium;
+	color: $gray-900;
+	margin: 0 0 $grid-unit-10 0;
+	padding: 0 $grid-unit-30;
+}