@wordpress/dataviews 11.3.1-next.v.0 → 12.0.0

package/src/components/dataform-layouts/panel/dropdown.tsx

@@ -8,24 +8,24 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useRef, useState } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
-import { useFocusOnMount } from '@wordpress/compose';
+import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
 import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import type {
-	FieldValidity,
+	FieldLayoutProps,
 	NormalizedForm,
-	NormalizedFormField,
 	FormValidity,
-	NormalizedField,
 } from '../../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { DEFAULT_LAYOUT } from '../normalize-form';
 import SummaryButton from './summary-button';
+import useReportValidity from '../../../hooks/use-report-validity';
+import useFieldFromFormField from './utils/use-field-from-form-field';
 
 function DropdownHeader( {
 	title,
@@ -38,9 +38,9 @@ function DropdownHeader( {
 		<Stack
 			direction="column"
 			className="dataforms-layouts-panel__dropdown-header"
-			gap="md"
+			gap="lg"
 		>
-			<Stack direction="row" gap="xs" align="center">
+			<Stack direction="row" gap="sm" align="center">
 				{ title && (
 					<Heading level={ 2 } size={ 13 }>
 						{ title }
@@ -60,28 +60,46 @@ function DropdownHeader( {
 	);
 }
 
+function DropdownContentWithValidation( {
+	touched,
+	children,
+}: {
+	touched: boolean;
+	children: React.ReactNode;
+} ) {
+	const ref = useRef< HTMLDivElement >( null );
+	useReportValidity( ref, touched );
+	return <div ref={ ref }>{ children }</div>;
+}
+
 function PanelDropdown< Item >( {
 	data,
 	field,
 	onChange,
 	validity,
-	labelPosition = 'side',
-	summaryFields,
-	fieldDefinition,
-	popoverAnchor,
-	onOpen,
-}: {
-	data: Item;
-	field: NormalizedFormField;
-	onChange: ( value: any ) => void;
-	validity?: FieldValidity;
-	labelPosition: 'side' | 'top' | 'none';
-	summaryFields: NormalizedField< Item >[];
-	fieldDefinition: NormalizedField< Item >;
-	popoverAnchor: HTMLElement | null;
-	onOpen?: () => void;
-} ) {
-	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
+}: FieldLayoutProps< Item > ) {
+	const [ touched, setTouched ] = useState( false );
+
+	// 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
+	);
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	const [ dialogRef, dialogProps ] = useDialog( {
+		focusOnMount: 'firstInputElement',
+	} );
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -105,78 +123,76 @@ function PanelDropdown< Item >( {
 		return { [ field.id ]: validity };
 	}, [ validity, field ] );
 
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Anchor the popover to the middle of the entire row so that it doesn't
-			// move around when the label changes.
-			anchor: popoverAnchor,
-			placement: 'left-start',
-			offset: 36,
-			shift: true,
-		} ),
-		[ popoverAnchor ]
-	);
-
-	const focusOnMountRef = useFocusOnMount( 'firstInputElement' );
+	const { fieldDefinition, fieldLabel, summaryFields } =
+		useFieldFromFormField( field );
+	if ( ! fieldDefinition ) {
+		return null;
+	}
 
 	return (
-		<Dropdown
-			contentClassName="dataforms-layouts-panel__field-dropdown"
-			popoverProps={ popoverProps }
-			focusOnMount={ false }
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				tooltipPosition: 'middle left',
-			} }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<SummaryButton
-					summaryFields={ summaryFields }
-					data={ data }
-					labelPosition={ labelPosition }
-					fieldLabel={ fieldLabel }
-					disabled={ fieldDefinition.readOnly === true }
-					onClick={ () => {
-						if ( ! isOpen && onOpen ) {
-							onOpen();
-						}
-						onToggle();
-					} }
-					aria-expanded={ isOpen }
-				/>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
-					<div ref={ focusOnMountRef }>
-						<DataFormLayout
-							data={ data }
-							form={ form }
-							onChange={ onChange }
-							validity={ formValidity }
-						>
-							{ (
-								FieldLayout,
-								childField,
-								childFieldValidity
-							) => (
-								<FieldLayout
-									key={ childField.id }
-									data={ data }
-									field={ childField }
-									onChange={ onChange }
-									hideLabelFromVision={
-										( form?.fields ?? [] ).length < 2
-									}
-									validity={ childFieldValidity }
-								/>
-							) }
-						</DataFormLayout>
-					</div>
-				</>
-			) }
-		/>
+		<div
+			ref={ setPopoverAnchor }
+			className="dataforms-layouts-panel__field-dropdown-anchor"
+		>
+			<Dropdown
+				contentClassName="dataforms-layouts-panel__field-dropdown"
+				popoverProps={ popoverProps }
+				focusOnMount={ false }
+				onToggle={ ( willOpen ) => {
+					if ( ! willOpen ) {
+						setTouched( true );
+					}
+				} }
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<SummaryButton
+						data={ data }
+						field={ field }
+						fieldLabel={ fieldLabel }
+						summaryFields={ summaryFields }
+						validity={ validity }
+						touched={ touched }
+						disabled={ fieldDefinition.readOnly === true }
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<DropdownContentWithValidation touched={ touched }>
+						<div ref={ dialogRef } { ...dialogProps }>
+							<DropdownHeader
+								title={ fieldLabel }
+								onClose={ onClose }
+							/>
+							<DataFormLayout
+								data={ data }
+								form={ form }
+								onChange={ onChange }
+								validity={ formValidity }
+							>
+								{ (
+									FieldLayout,
+									childField,
+									childFieldValidity,
+									markWhenOptional
+								) => (
+									<FieldLayout
+										key={ childField.id }
+										data={ data }
+										field={ childField }
+										onChange={ onChange }
+										hideLabelFromVision={
+											( form?.fields ?? [] ).length < 2
+										}
+										markWhenOptional={ markWhenOptional }
+										validity={ childFieldValidity }
+									/>
+								) }
+							</DataFormLayout>
+						</div>
+					</DropdownContentWithValidation>
+				) }
+			/>
+		</div>
 	);
 }
 

package/src/components/dataform-layouts/panel/index.tsx

@@ -1,136 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Icon, Tooltip } from '@wordpress/components';
-import { useState, useContext } from '@wordpress/element';
-import { error as errorIcon } from '@wordpress/icons';
-import { Stack } from '@wordpress/ui';
-
 /**
  * Internal dependencies
  */
-import type {
-	FieldLayoutProps,
-	FieldValidity,
-	NormalizedField,
-	NormalizedFormField,
-	NormalizedPanelLayout,
-} from '../../../types';
-import DataFormContext from '../../dataform-context';
-import PanelDropdown from './dropdown';
+import type { FieldLayoutProps, NormalizedPanelLayout } from '../../../types';
 import PanelModal from './modal';
-import { getSummaryFields } from '../get-summary-fields';
-
-function getFirstValidationError(
-	validity: FieldValidity | undefined
-): string | undefined {
-	if ( ! validity ) {
-		return undefined;
-	}
-
-	const validityRules = Object.keys( validity ).filter(
-		( key ) => key !== 'children'
-	);
-
-	for ( const key of validityRules ) {
-		const rule = validity[ key as keyof Omit< FieldValidity, 'children' > ];
-		if ( rule === undefined ) {
-			continue;
-		}
-
-		if ( rule.type === 'invalid' ) {
-			if ( rule.message ) {
-				return rule.message;
-			}
-
-			// Provide default message for required validation (message is optional)
-			if ( key === 'required' ) {
-				return 'A required field is empty';
-			}
-
-			return 'Unidentified validation error';
-		}
-	}
-
-	// Check children recursively
-	if ( validity.children ) {
-		for ( const childValidity of Object.values( validity.children ) ) {
-			const childError = getFirstValidationError( childValidity );
-			if ( childError ) {
-				return childError;
-			}
-		}
-	}
-
-	return undefined;
-}
-
-const getFieldDefinition = < Item, >(
-	field: NormalizedFormField,
-	fields: NormalizedField< Item >[]
-) => {
-	const fieldDefinition = fields.find( ( _field ) => _field.id === field.id );
-
-	if ( ! fieldDefinition ) {
-		return fields.find( ( _field ) => {
-			if ( !! field.children ) {
-				const simpleChildren = field.children.filter(
-					( child ) => ! child.children
-				);
-
-				if ( simpleChildren.length === 0 ) {
-					return false;
-				}
-
-				return _field.id === simpleChildren[ 0 ].id;
-			}
-
-			return _field.id === field.id;
-		} );
-	}
-
-	return fieldDefinition;
-};
-
-/**
- * Determines the field definition and summary fields for a panel layout.
- *
- * Summary fields are determined with the following priority:
- * 1. Use layout.summary fields if they exist
- * 2. Fall back to the field definition that matches the form field's id
- * 3. If the form field id doesn't exist, pick the first child field
- * 4. If no field definition is found, return empty summary fields
- *
- * @param layout - The normalized panel layout configuration
- * @param field  - The form field to get definition for
- * @param fields - Array of normalized field definitions
- * @return Object containing fieldDefinition and summaryFields
- */
-const getFieldDefinitionAndSummaryFields = < Item, >(
-	layout: NormalizedPanelLayout,
-	field: NormalizedFormField,
-	fields: NormalizedField< Item >[]
-) => {
-	const summaryFields = getSummaryFields( layout.summary, fields );
-	const fieldDefinition = getFieldDefinition( field, fields );
-
-	if ( summaryFields.length === 0 ) {
-		return {
-			summaryFields: fieldDefinition ? [ fieldDefinition ] : [],
-			fieldDefinition,
-		};
-	}
-
-	return {
-		summaryFields,
-		fieldDefinition,
-	};
-};
+import PanelDropdown from './dropdown';
 
 export default function FormPanelField< Item >( {
 	data,
@@ -138,131 +11,25 @@ export default function FormPanelField< Item >( {
 	onChange,
 	validity,
 }: FieldLayoutProps< Item > ) {
-	const { fields } = useContext( DataFormContext );
 	const layout = field.layout as NormalizedPanelLayout;
 
-	// 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
-	);
-
-	// Track if the panel has been opened (touched) to only show errors after interaction.
-	const [ touched, setTouched ] = useState( false );
-	const handleOpen = () => setTouched( true );
-
-	const { fieldDefinition, summaryFields } =
-		getFieldDefinitionAndSummaryFields( layout, field, fields );
-
-	if ( ! fieldDefinition ) {
-		return null;
-	}
-
-	const labelPosition = layout.labelPosition;
-	const errorMessage = getFirstValidationError( validity );
-	const showError = touched && !! errorMessage;
-	const labelClassName = clsx(
-		'dataforms-layouts-panel__field-label',
-		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`,
-		{ 'has-error': showError }
-	);
-	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
-
-	const labelContent = showError ? (
-		<Tooltip text={ errorMessage } placement="top">
-			<Stack
-				direction="row"
-				gap="xs"
-				className="dataforms-layouts-panel__field-label-error-content"
-				justify="flex-start"
-			>
-				<Icon icon={ errorIcon } size={ 16 } />
-				<>{ fieldLabel }</>
-			</Stack>
-		</Tooltip>
-	) : (
-		fieldLabel
-	);
-
-	const renderedControl =
-		layout.openAs === 'modal' ? (
+	if ( layout.openAs === 'modal' ) {
+		return (
 			<PanelModal
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-				labelPosition={ labelPosition }
-				summaryFields={ summaryFields }
-				fieldDefinition={ fieldDefinition }
-				onOpen={ handleOpen }
-			/>
-		) : (
-			<PanelDropdown
 				data={ data }
 				field={ field }
 				onChange={ onChange }
 				validity={ validity }
-				labelPosition={ labelPosition }
-				summaryFields={ summaryFields }
-				fieldDefinition={ fieldDefinition }
-				popoverAnchor={ popoverAnchor }
-				onOpen={ handleOpen }
 			/>
 		);
-
-	if ( labelPosition === 'top' ) {
-		return (
-			<Stack
-				direction="column"
-				className="dataforms-layouts-panel__field"
-			>
-				<div
-					className={ labelClassName }
-					style={ { paddingBottom: 0 } }
-				>
-					{ labelContent }
-				</div>
-				<div className="dataforms-layouts-panel__field-control">
-					{ renderedControl }
-				</div>
-			</Stack>
-		);
-	}
-
-	if ( labelPosition === 'none' ) {
-		return (
-			<Stack
-				direction="row"
-				gap="xs"
-				className="dataforms-layouts-panel__field dataforms-layouts-panel__field--label-position-none"
-			>
-				{ showError && (
-					<Tooltip text={ errorMessage } placement="top">
-						<Icon
-							className="dataforms-layouts-panel__field-label-error-content"
-							icon={ errorIcon }
-							size={ 16 }
-						/>
-					</Tooltip>
-				) }
-				<div className="dataforms-layouts-panel__field-control">
-					{ renderedControl }
-				</div>
-			</Stack>
-		);
 	}
 
-	// Defaults to label position side.
 	return (
-		<Stack
-			direction="row"
-			gap="xs"
-			ref={ setPopoverAnchor }
-			className="dataforms-layouts-panel__field"
-		>
-			<div className={ labelClassName }>{ labelContent }</div>
-			<div className="dataforms-layouts-panel__field-control">
-				{ renderedControl }
-			</div>
-		</Stack>
+		<PanelDropdown
+			data={ data }
+			field={ field }
+			onChange={ onChange }
+			validity={ validity }
+		/>
 	);
 }

package/src/components/dataform-layouts/panel/modal.tsx

@@ -12,8 +12,8 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useContext, useState, useMemo } from '@wordpress/element';
-import { useFocusOnMount } from '@wordpress/compose';
+import { useContext, useMemo, useRef, useState } from '@wordpress/element';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -23,13 +23,15 @@ import type {
 	Field,
 	NormalizedForm,
 	NormalizedFormField,
-	NormalizedField,
+	FieldLayoutProps,
 } from '../../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { DEFAULT_LAYOUT } from '../normalize-form';
 import SummaryButton from './summary-button';
 import useFormValidity from '../../../hooks/use-form-validity';
+import useReportValidity from '../../../hooks/use-report-validity';
 import DataFormContext from '../../dataform-context';
+import useFieldFromFormField from './utils/use-field-from-form-field';
 
 function ModalContent< Item >( {
 	data,
@@ -37,12 +39,14 @@ function ModalContent< Item >( {
 	onChange,
 	fieldLabel,
 	onClose,
+	touched,
 }: {
 	data: Item;
 	field: NormalizedFormField;
 	onChange: ( data: Partial< Item > ) => void;
 	onClose: () => void;
 	fieldLabel: string;
+	touched: boolean;
 } ) {
 	const { fields } = useContext( DataFormContext );
 	const [ changes, setChanges ] = useState< Partial< Item > >( {} );
@@ -92,6 +96,12 @@ function ModalContent< Item >( {
 	};
 
 	const focusOnMountRef = useFocusOnMount( 'firstInputElement' );
+	const contentRef = useRef< HTMLDivElement >( null );
+	const mergedRef = useMergeRefs( [ focusOnMountRef, contentRef ] );
+
+	// When the modal is opened after being previously closed (touched),
+	// trigger reportValidity to show field-level errors.
+	useReportValidity( contentRef, touched );
 
 	return (
 		<Modal
@@ -101,20 +111,26 @@ function ModalContent< Item >( {
 			title={ fieldLabel }
 			size="medium"
 		>
-			<div ref={ focusOnMountRef }>
+			<div ref={ mergedRef }>
 				<DataFormLayout
 					data={ modalData }
 					form={ form }
 					onChange={ handleOnChange }
 					validity={ validity }
 				>
-					{ ( FieldLayout, childField, childFieldValidity ) => (
+					{ (
+						FieldLayout,
+						childField,
+						childFieldValidity,
+						markWhenOptional
+					) => (
 						<FieldLayout
 							key={ childField.id }
 							data={ modalData }
 							field={ childField }
 							onChange={ handleOnChange }
 							hideLabelFromVision={ form.fields.length < 2 }
+							markWhenOptional={ markWhenOptional }
 							validity={ childFieldValidity }
 						/>
 					) }
@@ -123,7 +139,7 @@ function ModalContent< Item >( {
 			<Stack
 				direction="row"
 				className="dataforms-layouts-panel__modal-footer"
-				gap="sm"
+				gap="md"
 			>
 				<Spacer style={ { flex: 1 } } />
 				<Button
@@ -149,37 +165,34 @@ function PanelModal< Item >( {
 	data,
 	field,
 	onChange,
-	labelPosition,
-	summaryFields,
-	fieldDefinition,
-	onOpen,
-}: {
-	data: Item;
-	field: NormalizedFormField;
-	onChange: ( value: any ) => void;
-	labelPosition: 'side' | 'top' | 'none';
-	summaryFields: NormalizedField< Item >[];
-	fieldDefinition: NormalizedField< Item >;
-	onOpen?: () => void;
-} ) {
+	validity,
+}: FieldLayoutProps< Item > ) {
+	const [ touched, setTouched ] = useState( false );
+
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
+	const { fieldDefinition, fieldLabel, summaryFields } =
+		useFieldFromFormField( field );
+	if ( ! fieldDefinition ) {
+		return null;
+	}
+
+	const handleClose = () => {
+		setIsOpen( false );
+		setTouched( true );
+	};
 
 	return (
 		<>
 			<SummaryButton
-				summaryFields={ summaryFields }
 				data={ data }
-				labelPosition={ labelPosition }
+				field={ field }
 				fieldLabel={ fieldLabel }
+				summaryFields={ summaryFields }
+				validity={ validity }
+				touched={ touched }
 				disabled={ fieldDefinition.readOnly === true }
-				onClick={ () => {
-					if ( onOpen ) {
-						onOpen();
-					}
-					setIsOpen( true );
-				} }
+				onClick={ () => setIsOpen( true ) }
 				aria-expanded={ isOpen }
 			/>
 			{ isOpen && (
@@ -188,7 +201,8 @@ function PanelModal< Item >( {
 					field={ field }
 					onChange={ onChange }
 					fieldLabel={ fieldLabel ?? '' }
-					onClose={ () => setIsOpen( false ) }
+					onClose={ handleClose }
+					touched={ touched }
 				/>
 			) }
 		</>