@wordpress/dataviews 4.8.0 → 4.9.0

package/src/components/dataviews-view-config/index.tsx

@@ -35,7 +35,6 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import {
 	SORTING_DIRECTIONS,
-	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	sortIcons,
 	sortLabels,
@@ -49,7 +48,6 @@ import {
 import type { SupportedLayouts, View, Field } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
-import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
 const { Menu } = unlock( componentsPrivateApis );
 
@@ -512,19 +510,15 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigDropdown( {
-	density,
-	setDensity,
-}: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
-} ) {
+function DataviewsViewConfigDropdown() {
 	const { view } = useContext( DataViewsContext );
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
 		'dataviews-view-config-dropdown'
 	);
-
+	const activeLayout = VIEW_LAYOUTS.find(
+		( layout ) => layout.type === view.type
+	);
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -551,11 +545,8 @@ function DataviewsViewConfigDropdown( {
 								<SortFieldControl />
 								<SortDirectionControl />
 							</HStack>
-							{ view.type === LAYOUT_GRID && (
-								<DensityPicker
-									density={ density }
-									setDensity={ setDensity }
-								/>
+							{ !! activeLayout?.viewConfigOptions && (
+								<activeLayout.viewConfigOptions />
 							) }
 							<ItemsPerPageControl />
 						</SettingsSection>
@@ -570,21 +561,14 @@ function DataviewsViewConfigDropdown( {
 }
 
 function _DataViewsViewConfig( {
-	density,
-	setDensity,
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
 	defaultLayouts?: SupportedLayouts;
 } ) {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-			<DataviewsViewConfigDropdown
-				density={ density }
-				setDensity={ setDensity }
-			/>
+			<DataviewsViewConfigDropdown />
 		</>
 	);
 }

package/src/dataforms-layouts/data-form-layout.tsx

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { Form, FormField, 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';
+
+export function DataFormLayout< Item >( {
+	data,
+	form,
+	onChange,
+	children,
+}: {
+	data: Item;
+	form: Form;
+	onChange: ( value: any ) => void;
+	children?: (
+		FieldLayout: ( props: {
+			data: Item;
+			field: FormField;
+			onChange: ( value: any ) => void;
+			hideLabelFromVision?: boolean;
+		} ) => React.JSX.Element | null,
+		field: FormField
+	) => React.JSX.Element;
+} ) {
+	const { fields: fieldDefinitions } = useContext( DataFormContext );
+
+	function getFieldDefinition( field: SimpleFormField | string ) {
+		const fieldId = typeof field === 'string' ? field : field.id;
+
+		return fieldDefinitions.find(
+			( fieldDefinition ) => fieldDefinition.id === fieldId
+		);
+	}
+
+	const normalizedFormFields = useMemo(
+		() => normalizeFormFields( form ),
+		[ form ]
+	);
+
+	return (
+		<VStack spacing={ 2 }>
+			{ normalizedFormFields.map( ( formField ) => {
+				const FieldLayout = getFormFieldLayout( formField.layout )
+					?.component;
+
+				if ( ! FieldLayout ) {
+					return null;
+				}
+
+				const fieldDefinition = ! isCombinedField( formField )
+					? getFieldDefinition( formField )
+					: undefined;
+
+				if (
+					fieldDefinition &&
+					fieldDefinition.isVisible &&
+					! fieldDefinition.isVisible( data )
+				) {
+					return null;
+				}
+
+				if ( children ) {
+					return children( FieldLayout, formField );
+				}
+
+				return (
+					<FieldLayout
+						key={ formField.id }
+						data={ data }
+						field={ formField }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}

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,29 +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';
-import FormFieldVisibility from '../../components/form-field-visibility';
-
-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 (
@@ -40,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
@@ -57,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(
 		() => ( {
@@ -81,95 +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 (
-					<FormFieldVisibility
-						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 }
-					>
-						<FormField
-							data={ data }
-							field={ field }
-							onChange={ onChange }
-						/>
-					</FormFieldVisibility>
-				);
-			} ) }
-		</VStack>
+						popoverAnchor={ popoverAnchor }
+						fieldDefinition={ fieldDefinition }
+						data={ data }
+						onChange={ onChange }
+						labelPosition={ labelPosition }
+					/>
+				</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");
+}