@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.0

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

@@ -17,14 +17,85 @@ 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,
@@ -32,49 +103,11 @@ export default function FormPanelField< Item >( {
 	onChange,
 }: 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 +115,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',

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

@@ -21,7 +21,7 @@ import { useState, useMemo } from '@wordpress/element';
 import type { 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';
 
 function ModalContent< Item >( {

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 (

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 } ) {
@@ -75,6 +75,7 @@ export default function FormRowField< Item >( {
 							<div
 								key={ nestedField.id }
 								className="dataforms-layouts-row__field-control"
+								style={ layout.styles[ nestedField.id ] }
 							>
 								<FieldLayout
 									data={ data }

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';
@@ -89,6 +89,11 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
+			aria-label={
+				titleField
+					? titleField.getValue( { item } ) || __( '(no title)' )
+					: undefined
+			}
 			key={ id }
 			render={ ( { children, ...props } ) => (
 				<VStack spacing={ 0 } children={ children } { ...props } />
@@ -130,14 +135,16 @@ function GridItem< Item >( {
 					tabIndex={ -1 }
 				/>
 			) }
-			<HStack
-				justify="space-between"
-				className="dataviews-view-picker-grid__title-actions"
-			>
-				<div className="dataviews-view-picker-grid__title-field dataviews-title-field">
-					{ renderedTitleField }
-				</div>
-			</HStack>
+			{ showTitle && (
+				<HStack
+					justify="space-between"
+					className="dataviews-view-picker-grid__title-actions"
+				>
+					<div className="dataviews-view-picker-grid__title-field dataviews-title-field">
+						{ renderedTitleField }
+					</div>
+				</HStack>
+			) }
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
 					<descriptionField.render

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/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;

package/src/dataviews-layouts/utils/item-click-wrapper.tsx

@@ -3,6 +3,11 @@
  */
 import type { ReactNode, ReactElement, ComponentProps } from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
 function getClickableItemProps< Item >( {
 	item,
 	isItemClickable,
@@ -63,18 +68,51 @@ export function ItemClickWrapper< Item >( {
 	className?: string;
 	children: ReactNode;
 } ) {
+	// Always render a wrapper element so layout and styling relying on the wrapper
+	// still works even if the item is not clickable.
 	if ( ! isItemClickable( item ) ) {
-		return children;
+		return (
+			<div className={ className } { ...extraProps }>
+				{ children }
+			</div>
+		);
 	}
 
 	// If we have a renderItemLink, use it
 	if ( renderItemLink ) {
-		return renderItemLink( {
+		const renderedElement = renderItemLink( {
 			item,
 			className: `${ className } ${ className }--clickable`,
 			...extraProps,
 			children,
 		} );
+
+		// Clone the element and enhance onClick to stop propagation
+		return cloneElement( renderedElement, {
+			onClick: ( event: React.MouseEvent ) => {
+				// Always stop propagation to prevent selection
+				event.stopPropagation();
+
+				// If consumer provided an onClick, call it
+				if ( renderedElement.props.onClick ) {
+					renderedElement.props.onClick( event );
+				}
+			},
+			onKeyDown: ( event: React.KeyboardEvent ) => {
+				if (
+					event.key === 'Enter' ||
+					event.key === '' ||
+					event.key === ' '
+				) {
+					// Prevents onChangeSelection from triggering.
+					event.stopPropagation();
+					// If consumer provided an onKeyDown, call it
+					if ( renderedElement.props.onKeyDown ) {
+						renderedElement.props.onKeyDown( event );
+					}
+				}
+			},
+		} );
 	}
 
 	// Otherwise use the classic click handler approach

package/src/field-types/array.tsx

@@ -44,6 +44,7 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 const arrayFieldType: FieldTypeDefinition< any > = {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 

package/src/field-types/boolean.tsx

@@ -12,7 +12,7 @@ import type {
 	FieldTypeDefinition,
 	NormalizedField,
 } from '../types';
-import { renderFromElements } from '../utils';
+import renderFromElements from './utils/render-from-elements';
 import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
@@ -35,6 +35,7 @@ function sort( a: any, b: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 

package/src/field-types/color.tsx

@@ -17,7 +17,7 @@ import type {
 	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import renderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_ANY,
@@ -56,6 +56,7 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 
@@ -66,13 +67,6 @@ export default {
 				return __( 'Value must be a valid color.' );
 			}
 
-			if ( field.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
 			return null;
 		},
 	},

package/src/field-types/{date.ts → date.tsx}

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -10,10 +9,9 @@ import { __ } from '@wordpress/i18n';
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import renderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -40,17 +38,8 @@ export default {
 	sort,
 	Edit: 'date',
 	isValid: {
-		custom: ( item: any, field: NormalizedField< any > ) => {
-			const value = field.getValue( { item } );
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
-			return null;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
 		if ( field.elements ) {

package/src/field-types/datetime.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import renderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -34,17 +28,8 @@ function sort( a: any, b: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
-		custom: ( item: any, field: NormalizedField< any > ) => {
-			const value = field.getValue( { item } );
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
-			return null;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'datetime',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {

package/src/field-types/email.tsx

@@ -12,7 +12,7 @@ import type {
 	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import renderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_ALL,
@@ -39,6 +39,7 @@ const emailRegex =
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 
@@ -49,13 +50,6 @@ export default {
 				return __( 'Value must be a valid email address.' );
 			}
 
-			if ( field.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( value ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
 			return null;
 		},
 	},