@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

package/src/{dataforms-layouts → dataform-layouts}/panel/dropdown.tsx

@@ -16,10 +16,16 @@ import { closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import type { Form, FormField, NormalizedField } from '../../types';
+import type {
+	FieldValidity,
+	Form,
+	FormField,
+	FormValidity,
+	NormalizedField,
+} from '../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form-fields';
 import SummaryButton from './summary-button';
 
 function DropdownHeader( {
@@ -55,21 +61,23 @@ function DropdownHeader( {
 }
 
 function PanelDropdown< Item >( {
-	fieldDefinition,
-	summaryFields,
-	popoverAnchor,
-	labelPosition = 'side',
 	data,
-	onChange,
 	field,
+	onChange,
+	validity,
+	labelPosition = 'side',
+	summaryFields,
+	fieldDefinition,
+	popoverAnchor,
 }: {
-	fieldDefinition: NormalizedField< Item >;
-	summaryFields: NormalizedField< Item >[];
-	popoverAnchor: HTMLElement | null;
-	labelPosition: 'side' | 'top' | 'none';
 	data: Item;
-	onChange: ( value: any ) => void;
 	field: FormField;
+	onChange: ( value: any ) => void;
+	validity?: FieldValidity;
+	labelPosition: 'side' | 'top' | 'none';
+	summaryFields: NormalizedField< Item >[];
+	fieldDefinition: NormalizedField< Item >;
+	popoverAnchor: HTMLElement | null;
 } ) {
 	const fieldLabel = isCombinedField( field )
 		? field.label
@@ -85,6 +93,17 @@ function PanelDropdown< Item >( {
 		} ),
 		[ field ]
 	);
+	const formValidity = useMemo( (): FormValidity => {
+		if ( validity === undefined ) {
+			return undefined;
+		}
+
+		if ( isCombinedField( field ) ) {
+			return validity?.children;
+		}
+
+		return { [ field.id ]: validity };
+	}, [ validity, field ] );
 
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
@@ -127,16 +146,18 @@ function PanelDropdown< Item >( {
 						data={ data }
 						form={ form }
 						onChange={ onChange }
+						validity={ formValidity }
 					>
-						{ ( FieldLayout, nestedField ) => (
+						{ ( FieldLayout, childField, childFieldValidity ) => (
 							<FieldLayout
-								key={ nestedField.id }
+								key={ childField.id }
 								data={ data }
-								field={ nestedField }
+								field={ childField }
 								onChange={ onChange }
 								hideLabelFromVision={
 									( form?.fields ?? [] ).length < 2
 								}
+								validity={ childFieldValidity }
 							/>
 						) }
 					</DataFormLayout>

package/src/{dataforms-layouts → dataform-layouts}/panel/index.tsx

@@ -17,64 +17,98 @@ import { useState, useContext } from '@wordpress/element';
  */
 import type {
 	FieldLayoutProps,
+	FormField,
+	NormalizedField,
 	NormalizedPanelLayout,
+	PanelLayout,
 	SimpleFormField,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
 import { isCombinedField } from '../is-combined-field';
-import { normalizeLayout } from '../../normalize-form-fields';
+import { normalizeLayout } from '../normalize-form-fields';
 import PanelDropdown from './dropdown';
 import PanelModal from './modal';
+import { getSummaryFields } from '../get-summary-fields';
+
+const getFieldDefinition = < Item, >(
+	field: FormField,
+	fields: NormalizedField< Item >[]
+) => {
+	const fieldDefinition = fields.find( ( _field ) => _field.id === field.id );
+
+	if ( ! fieldDefinition ) {
+		return fields.find( ( _field ) => {
+			if ( isCombinedField( field ) ) {
+				const simpleChildren = field.children.filter(
+					( child ): child is string | SimpleFormField =>
+						typeof child === 'string' || ! isCombinedField( child )
+				);
+
+				if ( simpleChildren.length === 0 ) {
+					return false;
+				}
+
+				const firstChildFieldId =
+					typeof simpleChildren[ 0 ] === 'string'
+						? simpleChildren[ 0 ]
+						: simpleChildren[ 0 ].id;
+
+				return _field.id === firstChildFieldId;
+			}
+
+			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: FormField,
+	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,
+	};
+};
 
 export default function FormPanelField< Item >( {
 	data,
 	field,
 	onChange,
+	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
-	const getSummaryFields = () => {
-		if ( ! isCombinedField( field ) ) {
-			const fieldDef = fields.find(
-				( _field ) => _field.id === field.id
-			);
-			return fieldDef ? [ fieldDef ] : [];
-		}
-
-		// Use summary field(s) if specified for combined fields
-		if ( field.summary ) {
-			const summaryIds = Array.isArray( field.summary )
-				? field.summary
-				: [ field.summary ];
-			return summaryIds
-				.map( ( summaryId ) =>
-					fields.find( ( _field ) => _field.id === summaryId )
-				)
-				.filter( ( _field ) => _field !== undefined );
-		}
-
-		// Default to the first simple child
-		const simpleChildren = field.children.filter(
-			( child ): child is string | SimpleFormField =>
-				typeof child === 'string' || ! isCombinedField( child )
-		);
-
-		if ( simpleChildren.length === 0 ) {
-			return [];
-		}
-
-		const firstChildFieldId =
-			typeof simpleChildren[ 0 ] === 'string'
-				? simpleChildren[ 0 ]
-				: simpleChildren[ 0 ].id;
 
-		const fieldDef = fields.find(
-			( _field ) => _field.id === firstChildFieldId
-		);
-		return fieldDef ? [ fieldDef ] : [];
-	};
-
-	const summaryFields = getSummaryFields();
-	const fieldDefinition = summaryFields[ 0 ]; // For backward compatibility
+	const layout: NormalizedPanelLayout = normalizeLayout( {
+		...field.layout,
+		type: 'panel',
+	} as PanelLayout ) as NormalizedPanelLayout;
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -82,15 +116,13 @@ export default function FormPanelField< Item >( {
 		null
 	);
 
+	const { fieldDefinition, summaryFields } =
+		getFieldDefinitionAndSummaryFields( layout, field, fields );
+
 	if ( ! fieldDefinition ) {
 		return null;
 	}
 
-	const layout: NormalizedPanelLayout = normalizeLayout( {
-		...field.layout,
-		type: 'panel',
-	} ) as NormalizedPanelLayout;
-
 	const labelPosition = layout.labelPosition;
 	const labelClassName = clsx(
 		'dataforms-layouts-panel__field-label',
@@ -103,22 +135,23 @@ export default function FormPanelField< Item >( {
 	const renderedControl =
 		layout.openAs === 'modal' ? (
 			<PanelModal
-				field={ field }
-				fieldDefinition={ fieldDefinition }
-				summaryFields={ summaryFields }
 				data={ data }
+				field={ field }
 				onChange={ onChange }
 				labelPosition={ labelPosition }
+				summaryFields={ summaryFields }
+				fieldDefinition={ fieldDefinition }
 			/>
 		) : (
 			<PanelDropdown
-				field={ field }
-				popoverAnchor={ popoverAnchor }
-				fieldDefinition={ fieldDefinition }
-				summaryFields={ summaryFields }
 				data={ data }
+				field={ field }
 				onChange={ onChange }
+				validity={ validity }
 				labelPosition={ labelPosition }
+				summaryFields={ summaryFields }
+				fieldDefinition={ fieldDefinition }
+				popoverAnchor={ popoverAnchor }
 			/>
 		);
 

package/src/{dataforms-layouts → dataform-layouts}/panel/modal.tsx

@@ -13,35 +13,55 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+import { useContext, useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { Form, FormField, NormalizedField } from '../../types';
+import type { Field, Form, FormField, NormalizedField } from '../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form-fields';
 import SummaryButton from './summary-button';
+import useFormValidity from '../../hooks/use-form-validity';
+import DataFormContext from '../../components/dataform-context';
 
 function ModalContent< Item >( {
 	data,
-	form,
-	fieldLabel,
+	field,
 	onChange,
+	fieldLabel,
 	onClose,
 }: {
 	data: Item;
-	form: Form;
-	fieldLabel: string;
+	field: FormField;
 	onChange: ( data: Partial< Item > ) => void;
 	onClose: () => void;
+	fieldLabel: string;
 } ) {
+	const { fields } = useContext( DataFormContext );
 	const [ changes, setChanges ] = useState< Partial< Item > >( {} );
 	const modalData = useMemo( () => {
 		return deepMerge( data, changes );
 	}, [ data, changes ] );
 
+	const form: Form = useMemo(
+		(): Form => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: isCombinedField( field )
+				? field.children
+				: // If not explicit children return the field id itself.
+				  [ { id: field.id } ],
+		} ),
+		[ field ]
+	);
+
+	const { validity } = useFormValidity(
+		modalData,
+		fields as Field< any >[],
+		form
+	);
+
 	const onApply = () => {
 		onChange( changes );
 		onClose();
@@ -63,16 +83,18 @@ function ModalContent< Item >( {
 				data={ modalData }
 				form={ form }
 				onChange={ handleOnChange }
+				validity={ validity }
 			>
-				{ ( FieldLayout, nestedField ) => (
+				{ ( FieldLayout, childField, childFieldValidity ) => (
 					<FieldLayout
-						key={ nestedField.id }
+						key={ childField.id }
 						data={ modalData }
-						field={ nestedField }
+						field={ childField }
 						onChange={ handleOnChange }
 						hideLabelFromVision={
 							( form?.fields ?? [] ).length < 2
 						}
+						validity={ childFieldValidity }
 					/>
 				) }
 			</DataFormLayout>
@@ -101,19 +123,19 @@ function ModalContent< Item >( {
 }
 
 function PanelModal< Item >( {
-	fieldDefinition,
-	summaryFields,
-	labelPosition,
 	data,
-	onChange,
 	field,
+	onChange,
+	labelPosition,
+	summaryFields,
+	fieldDefinition,
 }: {
-	fieldDefinition: NormalizedField< Item >;
-	summaryFields: NormalizedField< Item >[];
-	labelPosition: 'side' | 'top' | 'none';
 	data: Item;
-	onChange: ( value: any ) => void;
 	field: FormField;
+	onChange: ( value: any ) => void;
+	labelPosition: 'side' | 'top' | 'none';
+	summaryFields: NormalizedField< Item >[];
+	fieldDefinition: NormalizedField< Item >;
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
@@ -121,17 +143,6 @@ function PanelModal< Item >( {
 		? field.label
 		: fieldDefinition?.label;
 
-	const form: Form = useMemo(
-		(): Form => ( {
-			layout: DEFAULT_LAYOUT,
-			fields: isCombinedField( field )
-				? field.children
-				: // If not explicit children return the field id itself.
-				  [ { id: field.id } ],
-		} ),
-		[ field ]
-	);
-
 	return (
 		<>
 			<SummaryButton
@@ -146,9 +157,9 @@ function PanelModal< Item >( {
 			{ isOpen && (
 				<ModalContent
 					data={ data }
-					form={ form as Form }
-					fieldLabel={ fieldLabel ?? '' }
+					field={ field }
 					onChange={ onChange }
+					fieldLabel={ fieldLabel ?? '' }
 					onClose={ () => setIsOpen( false ) }
 				/>
 			) }

package/src/{dataforms-layouts → dataform-layouts}/panel/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .dataforms-layouts-panel__field {
 	width: 100%;
 	min-height: $grid-unit-40;

package/src/{dataforms-layouts → dataform-layouts}/regular/index.tsx

@@ -26,7 +26,7 @@ import type {
 import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT, normalizeLayout } from '../../normalize-form-fields';
+import { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -46,6 +46,7 @@ export default function FormRegularField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
@@ -67,6 +68,7 @@ export default function FormRegularField< Item >( {
 					data={ data }
 					form={ form }
 					onChange={ onChange }
+					validity={ validity?.children }
 				/>
 			</>
 		);
@@ -110,6 +112,7 @@ export default function FormRegularField< Item >( {
 							field={ fieldDefinition }
 							onChange={ onChange }
 							hideLabelFromVision
+							validity={ validity }
 						/>
 					) }
 				</div>
@@ -141,6 +144,7 @@ export default function FormRegularField< Item >( {
 					hideLabelFromVision={
 						labelPosition === 'none' ? true : hideLabelFromVision
 					}
+					validity={ validity }
 				/>
 			) }
 		</div>

package/src/{dataforms-layouts → dataform-layouts}/regular/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .dataforms-layouts-regular__field {
 	width: 100%;
 	min-height: $grid-unit-40;

package/src/{dataforms-layouts → dataform-layouts}/row/index.tsx

@@ -16,7 +16,7 @@ import type { FieldLayoutProps, Form, NormalizedRowLayout } from '../../types';
 import DataFormContext from '../../components/dataform-context';
 import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { normalizeLayout } from '../../normalize-form-fields';
+import { normalizeLayout } from '../normalize-form-fields';
 import { getFormFieldLayout } from '..';
 
 function Header( { title }: { title: string } ) {
@@ -41,6 +41,7 @@ export default function FormRowField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
@@ -69,18 +70,21 @@ export default function FormRowField< Item >( {
 						data={ data }
 						form={ form }
 						onChange={ onChange }
+						validity={ validity?.children }
 						as={ EMPTY_WRAPPER }
 					>
-						{ ( FieldLayout, nestedField ) => (
+						{ ( FieldLayout, childField, childFieldValidity ) => (
 							<div
-								key={ nestedField.id }
+								key={ childField.id }
 								className="dataforms-layouts-row__field-control"
+								style={ layout.styles[ childField.id ] }
 							>
 								<FieldLayout
 									data={ data }
-									field={ nestedField }
+									field={ childField }
 									onChange={ onChange }
 									hideLabelFromVision={ hideLabelFromVision }
+									validity={ childFieldValidity }
 								/>
 							</div>
 						) }
@@ -108,6 +112,7 @@ export default function FormRowField< Item >( {
 					data={ data }
 					field={ fieldDefinition }
 					onChange={ onChange }
+					validity={ validity }
 				/>
 			</div>
 		</>

package/src/dataform-layouts/style.scss

@@ -0,0 +1,5 @@
+@use "@wordpress/base-styles/mixins" as *;
+
+.dataforms-layouts__wrapper {
+	@include body-medium();
+}

package/src/dataviews-layouts/grid/index.tsx

@@ -38,7 +38,7 @@ import type {
 	ViewGrid as ViewGridType,
 	ViewGridProps,
 } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
 import { GridItems } from '../utils/grid-items';
 const { Badge } = unlock( componentsPrivateApis );

package/src/dataviews-layouts/grid/style.scss

@@ -1,4 +1,8 @@
-@import "../utils/grid-items.scss";
+@use "sass:math";
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+@use "../utils/grid-items.scss" as *;
 
 .dataviews-view-grid {
 	.dataviews-view-grid__card {
@@ -12,8 +16,9 @@
 
 		.dataviews-view-grid__title-field {
 			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
-			display: flex;
-			align-items: center;
+			overflow: hidden;
+			align-content: center;
+			text-align: start;
 
 			&--clickable {
 				width: fit-content;

package/src/dataviews-layouts/list/index.tsx

@@ -108,7 +108,6 @@ function PrimaryActionGridCell< Item >( {
 						disabled={ !! primaryAction.disabled }
 						accessibleWhenDisabled
 						icon={ primaryAction.icon }
-						isDestructive={ primaryAction.isDestructive }
 						size="small"
 						onClick={ () => setIsModalOpen( true ) }
 					/>
@@ -133,7 +132,6 @@ function PrimaryActionGridCell< Item >( {
 						disabled={ !! primaryAction.disabled }
 						accessibleWhenDisabled
 						icon={ primaryAction.icon }
-						isDestructive={ primaryAction.isDestructive }
 						size="small"
 						onClick={ () => {
 							primaryAction.callback( [ item ], { registry } );

package/src/dataviews-layouts/list/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 div.dataviews-view-list {
 	list-style-type: none;
 }

package/src/dataviews-layouts/picker-grid/index.tsx

@@ -32,7 +32,7 @@ import type {
 	ViewPickerGrid as ViewPickerGridType,
 	ViewPickerGridProps,
 } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import { GridItems } from '../utils/grid-items';
 const { Badge } = unlock( componentsPrivateApis );
 import getDataByGroup from '../utils/get-data-by-group';

package/src/dataviews-layouts/picker-grid/style.scss

@@ -1,5 +1,8 @@
-
-@import "../utils/grid-items.scss";
+@use "sass:math";
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+@use "../utils/grid-items.scss" as *;
 
 .dataviews-view-picker-grid {
 	.dataviews-view-picker-grid__card {
@@ -13,8 +16,9 @@
 
 		.dataviews-view-picker-grid__title-field {
 			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
-			display: flex;
-			align-items: center;
+			overflow: hidden;
+			align-content: center;
+			text-align: start;
 
 			&--clickable {
 				width: fit-content;

package/src/dataviews-layouts/table/column-header-menu.tsx

@@ -90,7 +90,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	// 4. The filter is not primary (if it is, it is already visible).
 	canAddFilter =
 		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-		!! ( field.elements?.length || field.Edit ) &&
+		!! ( field.hasElements || field.Edit ) &&
 		field.filterBy !== false &&
 		! field.filterBy?.isPrimary;
 

package/src/dataviews-layouts/table/index.tsx

@@ -36,7 +36,7 @@ import type {
 	ViewTable as ViewTableType,
 	ViewTableProps,
 } from '../../types';
-import type { SetSelection } from '../../private-types';
+import type { SetSelection } from '../../types/private';
 import ColumnHeaderMenu from './column-header-menu';
 import ColumnPrimary from './column-primary';
 import { useIsHorizontalScrollEnd } from './use-is-horizontal-scroll-end';

package/src/dataviews-layouts/table/style.scss

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .dataviews-view-table {
 	width: 100%;
 	text-indent: 0;
@@ -140,6 +145,10 @@
 
 		tr {
 			border: 0;
+			// Header select all checkbox should always be visible.
+			.components-checkbox-control__input.components-checkbox-control__input {
+				opacity: 1;
+			}
 		}
 		th {
 			background-color: $white;

package/src/dataviews-layouts/utils/grid-items.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .dataviews-view-grid-items {
 	margin-bottom: auto;
 	display: grid;