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

package/src/components/dataform-controls/utils/validated-number.tsx

@@ -88,6 +88,7 @@ export default function ValidatedNumber< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -149,6 +150,7 @@ export default function ValidatedNumber< Item >( {
 	return (
 		<ValidatedNumberControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			help={ description }

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

@@ -183,6 +183,7 @@ export default function FormCardField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
@@ -347,6 +348,7 @@ export default function FormCardField< Item >( {
 						hideLabelFromVision={
 							hideLabelFromVision || withHeader
 						}
+						markWhenOptional={ markWhenOptional }
 						validity={ validity }
 					/>
 				</CardBody>

package/src/components/dataform-layouts/data-form-layout.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -17,7 +17,7 @@ import { getFormFieldLayout } from './index';
 import DataFormContext from '../dataform-context';
 
 const DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (
-	<Stack direction="column" className="dataforms-layouts__wrapper" gap="md">
+	<Stack direction="column" className="dataforms-layouts__wrapper" gap="lg">
 		{ children }
 	</Stack>
 );
@@ -40,15 +40,27 @@ export function DataFormLayout< Item >( {
 			field: NormalizedFormField;
 			onChange: ( value: any ) => void;
 			hideLabelFromVision?: boolean;
+			markWhenOptional?: boolean;
 			validity?: FieldValidity;
 		} ) => React.JSX.Element | null,
 		childField: NormalizedFormField,
-		childFieldValidity?: FieldValidity
+		childFieldValidity?: FieldValidity,
+		markWhenOptional?: boolean
 	) => React.JSX.Element;
 	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
 	const { fields: fieldDefinitions } = useContext( DataFormContext );
 
+	// Auto-compute: mark the minority of fields
+	// When counts are equal, mark required fields
+	const markWhenOptional = useMemo( () => {
+		const requiredCount = fieldDefinitions.filter(
+			( f ) => !! f.isValid?.required
+		).length;
+		const optionalCount = fieldDefinitions.length - requiredCount;
+		return requiredCount > optionalCount;
+	}, [ fieldDefinitions ] );
+
 	function getFieldDefinition( field: NormalizedFormField ) {
 		return fieldDefinitions.find(
 			( fieldDefinition ) => fieldDefinition.id === field.id
@@ -86,7 +98,8 @@ export function DataFormLayout< Item >( {
 					return children(
 						FieldLayout,
 						formField,
-						validity?.[ formField.id ]
+						validity?.[ formField.id ],
+						markWhenOptional
 					);
 				}
 
@@ -96,6 +109,7 @@ export function DataFormLayout< Item >( {
 						data={ data }
 						field={ formField }
 						onChange={ onChange }
+						markWhenOptional={ markWhenOptional }
 						validity={ validity?.[ formField.id ] }
 					/>
 				);

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

@@ -109,7 +109,7 @@ export default function FormDetailsField< Item >( {
 				<Stack
 					direction="row"
 					align="center"
-					gap="sm"
+					gap="md"
 					className="dataforms-layouts-details__summary-content"
 				>
 					{ summaryContent }

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

@@ -21,7 +21,7 @@ const FORM_FIELD_LAYOUTS = [
 			<Stack
 				direction="column"
 				className="dataforms-layouts__wrapper"
-				gap="md"
+				gap="lg"
 			>
 				{ children }
 			</Stack>
@@ -34,7 +34,7 @@ const FORM_FIELD_LAYOUTS = [
 			<Stack
 				direction="column"
 				className="dataforms-layouts__wrapper"
-				gap="xs"
+				gap="md"
 			>
 				{ children }
 			</Stack>
@@ -47,7 +47,7 @@ const FORM_FIELD_LAYOUTS = [
 			<Stack
 				direction="column"
 				className="dataforms-layouts__wrapper"
-				gap="lg"
+				gap="xl"
 			>
 				{ children }
 			</Stack>
@@ -66,12 +66,12 @@ const FORM_FIELD_LAYOUTS = [
 			<Stack
 				direction="column"
 				className="dataforms-layouts__wrapper"
-				gap="md"
+				gap="lg"
 			>
 				<div className="dataforms-layouts-row__field">
 					<Stack
 						direction="row"
-						gap="md"
+						gap="lg"
 						align={ ( layout as NormalizedRowLayout ).alignment }
 					>
 						{ children }

package/src/components/dataform-layouts/normalize-form.ts

@@ -60,6 +60,7 @@ function normalizeLayout( layout?: Layout ): NormalizedLayout {
 			labelPosition: layout?.labelPosition ?? 'side',
 			openAs: layout?.openAs ?? 'dropdown',
 			summary: normalizedSummary,
+			editVisibility: layout?.editVisibility ?? 'on-hover',
 		} satisfies NormalizedPanelLayout;
 	} else if ( layout?.type === 'card' ) {
 		if ( layout.withHeader === false ) {

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

@@ -8,25 +8,24 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo, useRef } 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,
@@ -39,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 }
@@ -78,25 +77,29 @@ function PanelDropdown< Item >( {
 	field,
 	onChange,
 	validity,
-	labelPosition = 'side',
-	summaryFields,
-	fieldDefinition,
-	popoverAnchor,
-	onClose: onCloseCallback,
-	touched,
-}: {
-	data: Item;
-	field: NormalizedFormField;
-	onChange: ( value: any ) => void;
-	validity?: FieldValidity;
-	labelPosition: 'side' | 'top' | 'none';
-	summaryFields: NormalizedField< Item >[];
-	fieldDefinition: NormalizedField< Item >;
-	popoverAnchor: HTMLElement | null;
-	onClose?: () => void;
-	touched: boolean;
-} ) {
-	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(
 		() => ( {
@@ -120,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 }
-			onToggle={ ( willOpen ) => {
-				if ( ! willOpen ) {
-					onCloseCallback?.();
-				}
-			} }
-			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={ onToggle }
-					aria-expanded={ isOpen }
-				/>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<DropdownContentWithValidation touched={ touched }>
-					<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>
-				</DropdownContentWithValidation>
-			) }
-		/>
+		<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,133 +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 closed (touched) to only show errors after interaction.
-	const [ touched, setTouched ] = useState( false );
-	const handleClose = () => 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 }
-				onClose={ handleClose }
-				touched={ touched }
-			/>
-		) : (
-			<PanelDropdown
 				data={ data }
 				field={ field }
 				onChange={ onChange }
 				validity={ validity }
-				labelPosition={ labelPosition }
-				summaryFields={ summaryFields }
-				fieldDefinition={ fieldDefinition }
-				popoverAnchor={ popoverAnchor }
-				onClose={ handleClose }
-				touched={ touched }
 			/>
 		);
-
-	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 }
+		/>
 	);
 }