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

package/src/components/dataform-controls/telephone.tsx

@@ -18,6 +18,7 @@ export default function Telephone< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Telephone< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'tel',
 				prefix: (

package/src/components/dataform-controls/text.tsx

@@ -14,6 +14,7 @@ export default function Text< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -26,6 +27,7 @@ export default function Text< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				prefix: prefix ? createElement( prefix ) : undefined,
 				suffix: suffix ? createElement( suffix ) : undefined,

package/src/components/dataform-controls/textarea.tsx

@@ -18,6 +18,7 @@ export default function Textarea< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -34,6 +35,7 @@ export default function Textarea< Item >( {
 	return (
 		<ValidatedTextareaControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }

package/src/components/dataform-controls/toggle-group.tsx

@@ -23,6 +23,7 @@ export default function ToggleGroup< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, isValid } = field;
@@ -51,6 +52,7 @@ export default function ToggleGroup< Item >( {
 	return (
 		<ValidatedToggleGroupControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			__next40pxDefaultSize
 			isBlock

package/src/components/dataform-controls/toggle.tsx

@@ -18,6 +18,7 @@ export default function Toggle< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
@@ -31,6 +32,7 @@ export default function Toggle< Item >( {
 	return (
 		<ValidatedToggleControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			label={ label }

package/src/components/dataform-controls/url.tsx

@@ -18,6 +18,7 @@ export default function Url< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Url< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'url',
 				prefix: (

package/src/components/dataform-controls/utils/relative-date-control.tsx

@@ -92,7 +92,7 @@ export default function RelativeDateControl< Item >( {
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 		>
-			<Stack direction="row" gap="xs">
+			<Stack direction="row" gap="sm">
 				<NumberControl
 					__next40pxDefaultSize
 					className="dataviews-controls__relative-date-number"

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

@@ -34,6 +34,7 @@ export default function ValidatedText< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	type,
 	prefix,
 	suffix,
@@ -57,6 +58,7 @@ export default function ValidatedText< Item >( {
 	return (
 		<ValidatedInputControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }

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

@@ -12,6 +12,7 @@ import {
 	useContext,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from '@wordpress/element';
 import { chevronDown, chevronUp } from '@wordpress/icons';
@@ -31,6 +32,8 @@ import type {
 import { DataFormLayout } from '../data-form-layout';
 import { DEFAULT_LAYOUT } from '../normalize-form';
 import { getSummaryFields } from '../get-summary-fields';
+import useReportValidity from '../../../hooks/use-report-validity';
+import ValidationBadge from '../validation-badge';
 
 const NonCollapsibleCardHeader = ( {
 	children,
@@ -56,6 +59,7 @@ const NonCollapsibleCardHeader = ( {
 export function useCardHeader( layout: NormalizedCardLayout ) {
 	const { isOpened, isCollapsible } = layout;
 	const [ isOpen, setIsOpen ] = useState( isOpened );
+	const [ touched, setTouched ] = useState( false );
 
 	// Sync internal state when the isOpened prop changes.
 	// This is unlikely to happen in production, but it helps with storybook controls.
@@ -64,8 +68,12 @@ export function useCardHeader( layout: NormalizedCardLayout ) {
 	}, [ isOpened ] );
 
 	const toggle = useCallback( () => {
+		// Mark as touched when collapsing (going from open to closed)
+		if ( isOpen ) {
+			setTouched( true );
+		}
 		setIsOpen( ( prev ) => ! prev );
-	}, [] );
+	}, [ isOpen ] );
 
 	const CollapsibleCardHeader = useCallback(
 		( {
@@ -111,7 +119,12 @@ export function useCardHeader( layout: NormalizedCardLayout ) {
 		? CollapsibleCardHeader
 		: NonCollapsibleCardHeader;
 
-	return { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };
+	return {
+		isOpen: effectiveIsOpen,
+		CardHeader: CardHeaderComponent,
+		touched,
+		setTouched,
+	};
 }
 
 function isSummaryFieldVisible< Item >(
@@ -170,10 +183,12 @@ export default function FormCardField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 	const layout = field.layout as NormalizedCardLayout;
+	const cardBodyRef = useRef< HTMLDivElement >( null );
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -183,7 +198,17 @@ export default function FormCardField< Item >( {
 		[ field ]
 	);
 
-	const { isOpen, CardHeader } = useCardHeader( layout );
+	const { isOpen, CardHeader, touched, setTouched } = useCardHeader( layout );
+
+	// Mark the card as touched when any field inside it is blurred.
+	// This aligns with how validated controls show errors on blur.
+	const handleBlur = useCallback( () => {
+		setTouched( true );
+	}, [ setTouched ] );
+
+	// When the card is expanded after being touched (collapsed with errors),
+	// trigger reportValidity to show field-level errors.
+	useReportValidity( cardBodyRef, isOpen && touched );
 
 	const summaryFields = getSummaryFields< Item >( layout.summary, fields );
 
@@ -191,6 +216,11 @@ export default function FormCardField< Item >( {
 		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
 	);
 
+	const validationBadge =
+		touched && layout.isCollapsible ? (
+			<ValidationBadge validity={ validity } />
+		) : null;
+
 	const sizeCard = {
 		blockStart: 'medium' as const,
 		blockEnd: 'medium' as const,
@@ -217,6 +247,7 @@ export default function FormCardField< Item >( {
 						<span className="dataforms-layouts-card__field-header-label">
 							{ field.label }
 						</span>
+						{ validationBadge }
 						{ visibleSummaryFields.length > 0 &&
 							layout.withHeader && (
 								<div className="dataforms-layouts-card__field-summary">
@@ -239,6 +270,8 @@ export default function FormCardField< Item >( {
 					<CardBody
 						size={ sizeCardBody }
 						className="dataforms-layouts-card__field-control"
+						ref={ cardBodyRef }
+						onBlur={ handleBlur }
 					>
 						{ field.description && (
 							<div className="dataforms-layouts-card__field-description">
@@ -285,6 +318,7 @@ export default function FormCardField< Item >( {
 					<span className="dataforms-layouts-card__field-header-label">
 						{ fieldDefinition.label }
 					</span>
+					{ validationBadge }
 					{ visibleSummaryFields.length > 0 && layout.withHeader && (
 						<div className="dataforms-layouts-card__field-summary">
 							{ visibleSummaryFields.map( ( summaryField ) => (
@@ -304,6 +338,8 @@ export default function FormCardField< Item >( {
 				<CardBody
 					size={ sizeCardBody }
 					className="dataforms-layouts-card__field-control"
+					ref={ cardBodyRef }
+					onBlur={ handleBlur }
 				>
 					<RegularLayout
 						data={ data }
@@ -312,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

@@ -1,8 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -15,13 +23,20 @@ import type {
 import DataFormContext from '../../dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { DEFAULT_LAYOUT } from '../normalize-form';
+import useReportValidity from '../../../hooks/use-report-validity';
+import ValidationBadge from '../validation-badge';
 
 export default function FormDetailsField< Item >( {
 	data,
 	field,
 	onChange,
+	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
+	const detailsRef = useRef< HTMLDetailsElement >( null );
+	const contentRef = useRef< HTMLDivElement >( null );
+	const [ touched, setTouched ] = useState( false );
+	const [ isOpen, setIsOpen ] = useState( false );
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -31,6 +46,37 @@ export default function FormDetailsField< Item >( {
 		[ field ]
 	);
 
+	// Track the open/close state of the native details element.
+	useEffect( () => {
+		const details = detailsRef.current;
+		if ( ! details ) {
+			return;
+		}
+
+		const handleToggle = () => {
+			const nowOpen = details.open;
+			// Mark as touched when collapsing (going from open to closed).
+			if ( ! nowOpen ) {
+				setTouched( true );
+			}
+			setIsOpen( nowOpen );
+		};
+
+		details.addEventListener( 'toggle', handleToggle );
+		return () => {
+			details.removeEventListener( 'toggle', handleToggle );
+		};
+	}, [] );
+
+	// When expanded after being touched, trigger reportValidity to show
+	// field-level errors.
+	useReportValidity( contentRef, isOpen && touched );
+
+	// Mark as touched when any field inside is blurred.
+	const handleBlur = useCallback( () => {
+		setTouched( true );
+	}, [] );
+
 	if ( ! field.children ) {
 		return null;
 	}
@@ -55,15 +101,31 @@ export default function FormDetailsField< Item >( {
 	}
 
 	return (
-		<details className="dataforms-layouts-details__details">
+		<details
+			ref={ detailsRef }
+			className="dataforms-layouts-details__details"
+		>
 			<summary className="dataforms-layouts-details__summary">
-				{ summaryContent }
+				<Stack
+					direction="row"
+					align="center"
+					gap="md"
+					className="dataforms-layouts-details__summary-content"
+				>
+					{ summaryContent }
+					{ touched && <ValidationBadge validity={ validity } /> }
+				</Stack>
 			</summary>
-			<div className="dataforms-layouts-details__content">
+			<div
+				ref={ contentRef }
+				className="dataforms-layouts-details__content"
+				onBlur={ handleBlur }
+			>
 				<DataFormLayout
 					data={ data }
 					form={ form }
 					onChange={ onChange }
+					validity={ validity?.children }
 				/>
 			</div>
 		</details>

package/src/components/dataform-layouts/details/style.scss

@@ -1,5 +1,10 @@
 @use "@wordpress/base-styles/variables" as *;
 
+.dataforms-layouts-details__summary-content {
+	display: inline-flex;
+	min-height: $grid-unit-30;
+}
+
 .dataforms-layouts-details__content {
 	padding-top: $grid-unit-15;
 }

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 ) {