@wordpress/dataviews 11.2.1-next.v.0 → 11.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "11.2.1-next.v.0+500f87dd8",
+	"version": "11.3.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -53,23 +53,23 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.13.2-next.v.0+500f87dd8",
-		"@wordpress/components": "^32.0.1-next.v.0+500f87dd8",
-		"@wordpress/compose": "^7.37.1-next.v.0+500f87dd8",
-		"@wordpress/data": "^10.37.1-next.v.0+500f87dd8",
-		"@wordpress/date": "^5.37.2-next.v.0+500f87dd8",
-		"@wordpress/deprecated": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/dom": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/element": "^6.37.1-next.v.0+500f87dd8",
-		"@wordpress/i18n": "^6.10.1-next.v.0+500f87dd8",
-		"@wordpress/icons": "^11.4.1-next.v.0+500f87dd8",
-		"@wordpress/keycodes": "^4.38.1-next.v.0+500f87dd8",
-		"@wordpress/primitives": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/private-apis": "^1.37.1-next.v.0+500f87dd8",
-		"@wordpress/theme": "^0.5.1-next.v.0+500f87dd8",
-		"@wordpress/ui": "^0.5.1-next.v.0+500f87dd8",
-		"@wordpress/url": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/warning": "^3.37.1-next.v.0+500f87dd8",
+		"@wordpress/base-styles": "^6.15.0",
+		"@wordpress/components": "^32.1.0",
+		"@wordpress/compose": "^7.39.0",
+		"@wordpress/data": "^10.39.0",
+		"@wordpress/date": "^5.39.0",
+		"@wordpress/deprecated": "^4.39.0",
+		"@wordpress/dom": "^4.39.0",
+		"@wordpress/element": "^6.39.0",
+		"@wordpress/i18n": "^6.12.0",
+		"@wordpress/icons": "^11.6.0",
+		"@wordpress/keycodes": "^4.39.0",
+		"@wordpress/primitives": "^4.39.0",
+		"@wordpress/private-apis": "^1.39.0",
+		"@wordpress/theme": "^0.6.0",
+		"@wordpress/ui": "^0.6.0",
+		"@wordpress/url": "^4.39.0",
+		"@wordpress/warning": "^3.39.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -78,10 +78,12 @@
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
+		"@storybook/addon-docs": "^10.1.11",
+		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
-		"storybook": "^9.1.17"
+		"storybook": "^10.1.11"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -93,5 +95,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
+	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
 }

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

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis, Spinner } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+import useElements from '../../hooks/use-elements';
+import { unlock } from '../../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
+
+const { ValidatedComboboxControl } = unlock( privateApis );
+
+export default function Combobox< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+	validity,
+}: DataFormControlProps< Item > ) {
+	const { label, description, placeholder, getValue, setValue, isValid } =
+		field;
+	const value = getValue( { item: data } ) ?? '';
+
+	const onChangeControl = useCallback(
+		( newValue: string | null ) =>
+			onChange( setValue( { item: data, value: newValue ?? '' } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	return (
+		<ValidatedComboboxControl
+			required={ !! field.isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
+			label={ label }
+			value={ value }
+			help={ description }
+			placeholder={ placeholder }
+			options={ elements }
+			onChange={ onChangeControl }
+			hideLabelFromVision={ hideLabelFromVision }
+			allowReset
+			expandOnFocus
+		/>
+	);
+}

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

@@ -191,18 +191,53 @@ function ValidatedDateControl< Item >( {
 		setCustomValidity( undefined );
 	}, [ inputRefs ] );
 
+	// Sync React-level validation to native inputs.
 	useEffect( () => {
-		if ( isTouched ) {
-			const timeoutId = setTimeout( () => {
-				if ( validity ) {
-					setCustomValidity( getCustomValidity( isValid, validity ) );
-				} else {
-					validateRefs();
-				}
-			}, 0 );
-			return () => clearTimeout( timeoutId );
+		const refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];
+		const result = validity
+			? getCustomValidity( isValid, validity )
+			: undefined;
+		for ( const ref of refs ) {
+			const input = ref.current;
+			if ( input ) {
+				input.setCustomValidity(
+					result?.type === 'invalid' && result.message
+						? result.message
+						: ''
+				);
+			}
+		}
+	}, [ inputRefs, isValid, validity ] );
+
+	// Listen for 'invalid' events (e.g., from reportValidity() on card re-expand).
+	useEffect( () => {
+		const refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];
+		const handleInvalid = ( event: Event ) => {
+			event.preventDefault();
+			setIsTouched( true );
+		};
+		for ( const ref of refs ) {
+			ref.current?.addEventListener( 'invalid', handleInvalid );
+		}
+		return () => {
+			for ( const ref of refs ) {
+				ref.current?.removeEventListener( 'invalid', handleInvalid );
+			}
+		};
+	}, [ inputRefs, setIsTouched ] );
+
+	useEffect( () => {
+		if ( ! isTouched ) {
+			return;
+		}
+		const result = validity
+			? getCustomValidity( isValid, validity )
+			: undefined;
+		if ( result ) {
+			setCustomValidity( result );
+		} else {
+			validateRefs();
 		}
-		return undefined;
 	}, [ isTouched, isValid, validity, validateRefs ] );
 
 	const onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {

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

@@ -8,6 +8,7 @@ import type { ComponentType } from 'react';
  */
 import type { DataFormControlProps, Field, EditConfig } from '../../types';
 import checkbox from './checkbox';
+import combobox from './combobox';
 import datetime from './datetime';
 import date from './date';
 import email from './email';
@@ -34,6 +35,7 @@ const FORM_CONTROLS: FormControls = {
 	array,
 	checkbox,
 	color,
+	combobox,
 	datetime,
 	date,
 	email,

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

@@ -7,14 +7,17 @@ import {
 	CardBody,
 	CardHeader as OriginalCardHeader,
 } from '@wordpress/components';
+import { Badge } from '@wordpress/ui';
 import {
 	useCallback,
 	useContext,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from '@wordpress/element';
 import { chevronDown, chevronUp } from '@wordpress/icons';
+import { sprintf, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,6 +26,7 @@ import { getFormFieldLayout } from '..';
 import DataFormContext from '../../dataform-context';
 import type {
 	FieldLayoutProps,
+	FieldValidity,
 	NormalizedCardLayout,
 	NormalizedField,
 	NormalizedForm,
@@ -31,6 +35,34 @@ 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';
+
+function countInvalidFields( validity: FieldValidity | undefined ): number {
+	if ( ! validity ) {
+		return 0;
+	}
+
+	let count = 0;
+	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?.type === 'invalid' ) {
+			count++;
+		}
+	}
+
+	// Count children recursively
+	if ( validity.children ) {
+		for ( const childValidity of Object.values( validity.children ) ) {
+			count += countInvalidFields( childValidity );
+		}
+	}
+
+	return count;
+}
 
 const NonCollapsibleCardHeader = ( {
 	children,
@@ -56,6 +88,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 +97,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 +148,12 @@ export function useCardHeader( layout: NormalizedCardLayout ) {
 		? CollapsibleCardHeader
 		: NonCollapsibleCardHeader;
 
-	return { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };
+	return {
+		isOpen: effectiveIsOpen,
+		CardHeader: CardHeaderComponent,
+		touched,
+		setTouched,
+	};
 }
 
 function isSummaryFieldVisible< Item >(
@@ -174,6 +216,7 @@ export default function FormCardField< Item >( {
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 	const layout = field.layout as NormalizedCardLayout;
+	const cardBodyRef = useRef< HTMLDivElement >( null );
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -183,7 +226,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 +244,25 @@ export default function FormCardField< Item >( {
 		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
 	);
 
+	// Count invalid fields for validation badge
+	const invalidCount = countInvalidFields( validity );
+	const showValidationBadge =
+		touched && invalidCount > 0 && layout.isCollapsible;
+
+	const validationBadge = showValidationBadge ? (
+		<Badge intent="high">
+			{ sprintf(
+				/* translators: %d: Number of fields that need attention */
+				_n(
+					'%d field needs attention',
+					'%d fields need attention',
+					invalidCount
+				),
+				invalidCount
+			) }
+		</Badge>
+	) : null;
+
 	const sizeCard = {
 		blockStart: 'medium' as const,
 		blockEnd: 'medium' as const,
@@ -217,6 +289,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 +312,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 +360,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 +380,8 @@ export default function FormCardField< Item >( {
 				<CardBody
 					size={ sizeCardBody }
 					className="dataforms-layouts-card__field-control"
+					ref={ cardBodyRef }
+					onBlur={ handleBlur }
 				>
 					<RegularLayout
 						data={ data }

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

@@ -8,7 +8,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useRef } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount } from '@wordpress/compose';
 import { Stack } from '@wordpress/ui';
@@ -26,6 +26,7 @@ import type {
 import { DataFormLayout } from '../data-form-layout';
 import { DEFAULT_LAYOUT } from '../normalize-form';
 import SummaryButton from './summary-button';
+import useReportValidity from '../../../hooks/use-report-validity';
 
 function DropdownHeader( {
 	title,
@@ -60,6 +61,18 @@ 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,
@@ -69,7 +82,8 @@ function PanelDropdown< Item >( {
 	summaryFields,
 	fieldDefinition,
 	popoverAnchor,
-	onOpen,
+	onClose: onCloseCallback,
+	touched,
 }: {
 	data: Item;
 	field: NormalizedFormField;
@@ -79,7 +93,8 @@ function PanelDropdown< Item >( {
 	summaryFields: NormalizedField< Item >[];
 	fieldDefinition: NormalizedField< Item >;
 	popoverAnchor: HTMLElement | null;
-	onOpen?: () => void;
+	onClose?: () => void;
+	touched: boolean;
 } ) {
 	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
@@ -125,6 +140,11 @@ function PanelDropdown< Item >( {
 			contentClassName="dataforms-layouts-panel__field-dropdown"
 			popoverProps={ popoverProps }
 			focusOnMount={ false }
+			onToggle={ ( willOpen ) => {
+				if ( ! willOpen ) {
+					onCloseCallback?.();
+				}
+			} }
 			toggleProps={ {
 				size: 'compact',
 				variant: 'tertiary',
@@ -137,17 +157,12 @@ function PanelDropdown< Item >( {
 					labelPosition={ labelPosition }
 					fieldLabel={ fieldLabel }
 					disabled={ fieldDefinition.readOnly === true }
-					onClick={ () => {
-						if ( ! isOpen && onOpen ) {
-							onOpen();
-						}
-						onToggle();
-					} }
+					onClick={ onToggle }
 					aria-expanded={ isOpen }
 				/>
 			) }
 			renderContent={ ( { onClose } ) => (
-				<>
+				<DropdownContentWithValidation touched={ touched }>
 					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
 					<div ref={ focusOnMountRef }>
 						<DataFormLayout
@@ -174,7 +189,7 @@ function PanelDropdown< Item >( {
 							) }
 						</DataFormLayout>
 					</div>
-				</>
+				</DropdownContentWithValidation>
 			) }
 		/>
 	);

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

@@ -147,9 +147,9 @@ export default function FormPanelField< Item >( {
 		null
 	);
 
-	// Track if the panel has been opened (touched) to only show errors after interaction.
+	// Track if the panel has been closed (touched) to only show errors after interaction.
 	const [ touched, setTouched ] = useState( false );
-	const handleOpen = () => setTouched( true );
+	const handleClose = () => setTouched( true );
 
 	const { fieldDefinition, summaryFields } =
 		getFieldDefinitionAndSummaryFields( layout, field, fields );
@@ -193,7 +193,8 @@ export default function FormPanelField< Item >( {
 				labelPosition={ labelPosition }
 				summaryFields={ summaryFields }
 				fieldDefinition={ fieldDefinition }
-				onOpen={ handleOpen }
+				onClose={ handleClose }
+				touched={ touched }
 			/>
 		) : (
 			<PanelDropdown
@@ -205,7 +206,8 @@ export default function FormPanelField< Item >( {
 				summaryFields={ summaryFields }
 				fieldDefinition={ fieldDefinition }
 				popoverAnchor={ popoverAnchor }
-				onOpen={ handleOpen }
+				onClose={ handleClose }
+				touched={ touched }
 			/>
 		);
 

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';
 
 /**
@@ -29,6 +29,7 @@ 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';
 
 function ModalContent< Item >( {
@@ -37,12 +38,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 +95,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,7 +110,7 @@ function ModalContent< Item >( {
 			title={ fieldLabel }
 			size="medium"
 		>
-			<div ref={ focusOnMountRef }>
+			<div ref={ mergedRef }>
 				<DataFormLayout
 					data={ modalData }
 					form={ form }
@@ -152,7 +161,8 @@ function PanelModal< Item >( {
 	labelPosition,
 	summaryFields,
 	fieldDefinition,
-	onOpen,
+	onClose: onCloseCallback,
+	touched,
 }: {
 	data: Item;
 	field: NormalizedFormField;
@@ -160,12 +170,18 @@ function PanelModal< Item >( {
 	labelPosition: 'side' | 'top' | 'none';
 	summaryFields: NormalizedField< Item >[];
 	fieldDefinition: NormalizedField< Item >;
-	onOpen?: () => void;
+	onClose?: () => void;
+	touched: boolean;
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
 	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
+	const handleClose = () => {
+		setIsOpen( false );
+		onCloseCallback?.();
+	};
+
 	return (
 		<>
 			<SummaryButton
@@ -174,12 +190,7 @@ function PanelModal< Item >( {
 				labelPosition={ labelPosition }
 				fieldLabel={ fieldLabel }
 				disabled={ fieldDefinition.readOnly === true }
-				onClick={ () => {
-					if ( onOpen ) {
-						onOpen();
-					}
-					setIsOpen( true );
-				} }
+				onClick={ () => setIsOpen( true ) }
 				aria-expanded={ isOpen }
 			/>
 			{ isOpen && (
@@ -188,7 +199,8 @@ function PanelModal< Item >( {
 					field={ field }
 					onChange={ onChange }
 					fieldLabel={ fieldLabel ?? '' }
-					onClose={ () => setIsOpen( false ) }
+					onClose={ handleClose }
+					touched={ touched }
 				/>
 			) }
 		</>