@wordpress/dataviews 4.7.0 → 4.8.2-next.082ed6819.0

package/src/dataforms-layouts/index.tsx

@@ -1,20 +1,20 @@
 /**
  * Internal dependencies
  */
-import FormRegular from './regular';
-import FormPanel from './panel';
+import FormRegularField from './regular';
+import FormPanelField from './panel';
 
-const FORM_LAYOUTS = [
+const FORM_FIELD_LAYOUTS = [
 	{
 		type: 'regular',
-		component: FormRegular,
+		component: FormRegularField,
 	},
 	{
 		type: 'panel',
-		component: FormPanel,
+		component: FormPanelField,
 	},
 ];
 
-export function getFormLayout( type: string ) {
-	return FORM_LAYOUTS.find( ( layout ) => layout.type === type );
+export function getFormFieldLayout( type: string ) {
+	return FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );
 }

package/src/dataforms-layouts/is-combined-field.ts

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { FormField, CombinedFormField } from '../types';
+
+export function isCombinedField(
+	field: FormField
+): field is CombinedFormField {
+	return ( field as CombinedFormField ).children !== undefined;
+}

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

@@ -9,28 +9,29 @@ import {
 	Dropdown,
 	Button,
 } from '@wordpress/components';
-import { useState, useMemo } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
+import { useState, useMemo, useContext } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { normalizeFields } from '../../normalize-fields';
-import { getVisibleFields } from '../get-visible-fields';
-import type { DataFormProps, NormalizedField } from '../../types';
-
-interface FormFieldProps< Item > {
-	data: Item;
-	field: NormalizedField< Item >;
-	onChange: ( value: any ) => void;
-}
+import type {
+	Form,
+	FormField,
+	FieldLayoutProps,
+	NormalizedField,
+	SimpleFormField,
+} from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
 
 function DropdownHeader( {
 	title,
 	onClose,
 }: {
-	title: string;
+	title?: string;
 	onClose: () => void;
 } ) {
 	return (
@@ -39,9 +40,11 @@ function DropdownHeader( {
 			spacing={ 4 }
 		>
 			<HStack alignment="center">
-				<Heading level={ 2 } size={ 13 }>
-					{ title }
-				</Heading>
+				{ title && (
+					<Heading level={ 2 } size={ 13 }>
+						{ title }
+					</Heading>
+				) }
 				<Spacer />
 				{ onClose && (
 					<Button
@@ -56,16 +59,45 @@ function DropdownHeader( {
 	);
 }
 
-function FormField< Item >( {
+function PanelDropdown< Item >( {
+	fieldDefinition,
+	popoverAnchor,
+	labelPosition = 'side',
 	data,
-	field,
 	onChange,
-}: FormFieldProps< Item > ) {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
-		null
-	);
+	field,
+}: {
+	fieldDefinition: NormalizedField< Item >;
+	popoverAnchor: HTMLElement | null;
+	labelPosition: 'side' | 'top' | 'none';
+	data: Item;
+	onChange: ( value: any ) => void;
+	field: FormField;
+} ) {
+	const fieldLabel = isCombinedField( field )
+		? field.label
+		: fieldDefinition?.label;
+	const form = useMemo( () => {
+		if ( isCombinedField( field ) ) {
+			return {
+				type: 'regular' as const,
+				fields: field.children.map( ( child ) => {
+					if ( typeof child === 'string' ) {
+						return {
+							id: child,
+						};
+					}
+					return child;
+				} ),
+			};
+		}
+		// If not explicit children return the field id itself.
+		return {
+			type: 'regular' as const,
+			fields: [ { id: field.id } ],
+		};
+	}, [ field ] );
+
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
 		() => ( {
@@ -80,90 +112,155 @@ function FormField< Item >( {
 	);
 
 	return (
-		<HStack
-			ref={ setPopoverAnchor }
-			className="dataforms-layouts-panel__field"
-		>
-			<div className="dataforms-layouts-panel__field-label">
-				{ field.label }
-			</div>
-			<div>
-				<Dropdown
-					contentClassName="dataforms-layouts-panel__field-dropdown"
-					popoverProps={ popoverProps }
-					focusOnMount
-					toggleProps={ {
-						size: 'compact',
-						variant: 'tertiary',
-						tooltipPosition: 'middle left',
-					} }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							className="dataforms-layouts-panel__field-control"
-							size="compact"
-							variant="tertiary"
-							aria-expanded={ isOpen }
-							aria-label={ sprintf(
-								// translators: %s: Field name.
-								_x( 'Edit %s', 'field' ),
-								field.label
-							) }
-							onClick={ onToggle }
-						>
-							<field.render item={ data } />
-						</Button>
+		<Dropdown
+			contentClassName="dataforms-layouts-panel__field-dropdown"
+			popoverProps={ popoverProps }
+			focusOnMount
+			toggleProps={ {
+				size: 'compact',
+				variant: 'tertiary',
+				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
 					) }
-					renderContent={ ( { onClose } ) => (
-						<>
-							<DropdownHeader
-								title={ field.label }
-								onClose={ onClose }
-							/>
-							<field.Edit
-								key={ field.id }
+					onClick={ onToggle }
+				>
+					<fieldDefinition.render item={ data } />
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
+					<DataFormLayout
+						data={ data }
+						form={ form as Form }
+						onChange={ onChange }
+					>
+						{ ( FieldLayout, nestedField ) => (
+							<FieldLayout
+								key={ nestedField.id }
 								data={ data }
-								field={ field }
+								field={ nestedField }
 								onChange={ onChange }
-								hideLabelFromVision
+								hideLabelFromVision={
+									( form?.fields ?? [] ).length < 2
+								}
 							/>
-						</>
-					) }
-				/>
-			</div>
-		</HStack>
+						) }
+					</DataFormLayout>
+				</>
+			) }
+		/>
 	);
 }
 
-export default function FormPanel< Item >( {
+export default function FormPanelField< Item >( {
 	data,
-	fields,
-	form,
+	field,
 	onChange,
-}: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				getVisibleFields< Item >(
-					fields,
-					form.fields,
-					form.combinedFields
-				)
-			),
-		[ fields, form.fields, form.combinedFields ]
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+	const fieldDefinition = fields.find( ( fieldDef ) => {
+		// Default to the first child if it is a combined field.
+		if ( isCombinedField( field ) ) {
+			const children = field.children.filter(
+				( child ): child is string | SimpleFormField =>
+					typeof child === 'string' || ! isCombinedField( child )
+			);
+			const firstChildFieldId =
+				typeof children[ 0 ] === 'string'
+					? children[ 0 ]
+					: children[ 0 ].id;
+			return fieldDef.id === firstChildFieldId;
+		}
+		return fieldDef.id === field.id;
+	} );
+	const labelPosition = field.labelPosition ?? 'side';
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
+		null
 	);
 
-	return (
-		<VStack spacing={ 2 }>
-			{ visibleFields.map( ( field ) => {
-				return (
-					<FormField
-						key={ field.id }
-						data={ data }
+	if ( ! fieldDefinition ) {
+		return null;
+	}
+
+	const fieldLabel = isCombinedField( field )
+		? field.label
+		: fieldDefinition?.label;
+
+	if ( labelPosition === 'top' ) {
+		return (
+			<VStack className="dataforms-layouts-panel__field" spacing={ 0 }>
+				<div
+					className="dataforms-layouts-panel__field-label"
+					style={ { paddingBottom: 0 } }
+				>
+					{ fieldLabel }
+				</div>
+				<div className="dataforms-layouts-panel__field-control">
+					<PanelDropdown
 						field={ field }
+						popoverAnchor={ popoverAnchor }
+						fieldDefinition={ fieldDefinition }
+						data={ data }
 						onChange={ onChange }
+						labelPosition={ labelPosition }
 					/>
-				);
-			} ) }
-		</VStack>
+				</div>
+			</VStack>
+		);
+	}
+
+	if ( labelPosition === 'none' ) {
+		return (
+			<div className="dataforms-layouts-panel__field">
+				<PanelDropdown
+					field={ field }
+					popoverAnchor={ popoverAnchor }
+					fieldDefinition={ fieldDefinition }
+					data={ data }
+					onChange={ onChange }
+					labelPosition={ labelPosition }
+				/>
+			</div>
+		);
+	}
+
+	// Defaults to label position side.
+	return (
+		<HStack
+			ref={ setPopoverAnchor }
+			className="dataforms-layouts-panel__field"
+		>
+			<div className="dataforms-layouts-panel__field-label">
+				{ fieldLabel }
+			</div>
+			<div className="dataforms-layouts-panel__field-control">
+				<PanelDropdown
+					field={ field }
+					popoverAnchor={ popoverAnchor }
+					fieldDefinition={ fieldDefinition }
+					data={ data }
+					onChange={ onChange }
+					labelPosition={ labelPosition }
+				/>
+			</div>
+		</HStack>
 	);
 }

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

@@ -44,3 +44,7 @@
 .dataforms-layouts-panel__dropdown-header {
 	margin-bottom: $grid-unit-20;
 }
+
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
+}

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

@@ -1,46 +1,116 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { normalizeFields } from '../../normalize-fields';
-import { getVisibleFields } from '../get-visible-fields';
-import type { DataFormProps } from '../../types';
+import type { Form, FieldLayoutProps } from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
 
-export default function FormRegular< Item >( {
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts-regular__header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
+}
+
+export default function FormRegularField< Item >( {
 	data,
-	fields,
-	form,
+	field,
 	onChange,
-}: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				getVisibleFields< Item >(
-					fields,
-					form.fields,
-					form.combinedFields
-				)
-			),
-		[ fields, form.fields, form.combinedFields ]
+	hideLabelFromVision,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const form = useMemo( () => {
+		if ( isCombinedField( field ) ) {
+			return {
+				fields: field.children.map( ( child ) => {
+					if ( typeof child === 'string' ) {
+						return {
+							id: child,
+						};
+					}
+					return child;
+				} ),
+				type: 'regular' as const,
+			};
+		}
+
+		return {
+			type: 'regular' as const,
+			fields: [],
+		};
+	}, [ field ] );
+
+	if ( isCombinedField( field ) ) {
+		return (
+			<>
+				{ ! hideLabelFromVision && field.label && (
+					<Header title={ field.label } />
+				) }
+				<DataFormLayout
+					data={ data }
+					form={ form as Form }
+					onChange={ onChange }
+				/>
+			</>
+		);
+	}
+
+	const labelPosition = field.labelPosition ?? 'top';
+	const fieldDefinition = fields.find(
+		( fieldDef ) => fieldDef.id === field.id
 	);
 
-	return (
-		<VStack spacing={ 4 }>
-			{ visibleFields.map( ( field ) => {
-				return (
-					<field.Edit
-						key={ field.id }
+	if ( ! fieldDefinition ) {
+		return null;
+	}
+	if ( labelPosition === 'side' ) {
+		return (
+			<HStack className="dataforms-layouts-regular__field">
+				<div className="dataforms-layouts-regular__field-label">
+					{ fieldDefinition.label }
+				</div>
+				<div className="dataforms-layouts-regular__field-control">
+					<fieldDefinition.Edit
+						key={ fieldDefinition.id }
 						data={ data }
-						field={ field }
+						field={ fieldDefinition }
 						onChange={ onChange }
+						hideLabelFromVision
 					/>
-				);
-			} ) }
-		</VStack>
+				</div>
+			</HStack>
+		);
+	}
+
+	return (
+		<div className="dataforms-layouts-regular__field">
+			<fieldDefinition.Edit
+				data={ data }
+				field={ fieldDefinition }
+				onChange={ onChange }
+				hideLabelFromVision={
+					labelPosition === 'none' ? true : hideLabelFromVision
+				}
+			/>
+		</div>
 	);
 }

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

@@ -0,0 +1,30 @@
+.dataforms-layouts-regular__field {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	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;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.dataforms-layouts-regular__field-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+}

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

@@ -24,11 +24,15 @@ import SingleSelectionCheckbox from '../../components/dataviews-selection-checkb
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
+import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
+	onClickItem: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
 	mediaField?: NormalizedField< Item >;
@@ -41,6 +45,8 @@ interface GridItemProps< Item > {
 function GridItem< Item >( {
 	selection,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	getItemId,
 	item,
 	actions,
@@ -59,6 +65,21 @@ function GridItem< Item >( {
 	const renderedPrimaryField = primaryField?.render ? (
 		<primaryField.render item={ item } />
 	) : null;
+
+	const clickableMediaItemProps = getClickableItemProps(
+		item,
+		isItemClickable,
+		onClickItem,
+		'dataviews-view-grid__media'
+	);
+
+	const clickablePrimaryItemProps = getClickableItemProps(
+		item,
+		isItemClickable,
+		onClickItem,
+		'dataviews-view-grid__primary-field'
+	);
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -81,9 +102,7 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div className="dataviews-view-grid__media">
-				{ renderedMediaField }
-			</div>
+			<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
 			<SingleSelectionCheckbox
 				item={ item }
 				selection={ selection }
@@ -96,9 +115,9 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<HStack className="dataviews-view-grid__primary-field">
+				<div { ...clickablePrimaryItemProps }>
 					{ renderedPrimaryField }
-				</HStack>
+				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
 			{ !! badgeFields?.length && (
@@ -170,9 +189,10 @@ export default function ViewGrid< Item >( {
 	getItemId,
 	isLoading,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	selection,
 	view,
-	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -203,8 +223,12 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const gridStyle = density
-		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
+	const gridStyle = usedPreviewSize
+		? {
+				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
+		  }
 		: {};
 	return (
 		<>
@@ -223,6 +247,8 @@ export default function ViewGrid< Item >( {
 								key={ getItemId( item ) }
 								selection={ selection }
 								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }