@wordpress/dataviews 4.9.0 → 4.9.1-next.a9f418477.0

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

@@ -27,7 +27,6 @@ import type {
 	ViewTable as ViewTableType,
 	Operator,
 } from '../../types';
-import { getVisibleFieldIds } from '../index';
 
 const { Menu } = unlock( componentsPrivateApis );
 
@@ -38,6 +37,7 @@ interface HeaderMenuProps< Item > {
 	onChangeView: ( view: ViewTableType ) => void;
 	onHide: ( field: NormalizedField< Item > ) => void;
 	setOpenedFilter: ( fieldId: string ) => void;
+	canMove?: boolean;
 }
 
 function WithMenuSeparators( { children }: { children: ReactNode } ) {
@@ -59,46 +59,38 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		onChangeView,
 		onHide,
 		setOpenedFilter,
+		canMove = true,
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
-	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const visibleFieldIds = view.fields ?? [];
 	const index = visibleFieldIds?.indexOf( fieldId ) as number;
 	const isSorted = view.sort?.field === fieldId;
 	let isHidable = false;
 	let isSortable = false;
 	let canAddFilter = false;
-	let header;
 	let operators: Operator[] = [];
-
-	const combinedField = view.layout?.combinedFields?.find(
-		( f ) => f.id === fieldId
-	);
 	const field = fields.find( ( f ) => f.id === fieldId );
 
-	if ( ! combinedField ) {
-		if ( ! field ) {
-			// No combined or regular field found.
-			return null;
-		}
+	if ( ! field ) {
+		// No combined or regular field found.
+		return null;
+	}
 
-		isHidable = field.enableHiding !== false;
-		isSortable = field.enableSorting !== false;
-		header = field.header;
+	isHidable = field.enableHiding !== false;
+	isSortable = field.enableSorting !== false;
+	const header = field.header;
 
-		operators = sanitizeOperators( field );
-		// Filter can be added:
-		// 1. If the field is not already part of a view's filters.
-		// 2. If the field meets the type and operator requirements.
-		// 3. If it's not primary. If it is, it should be already visible.
-		canAddFilter =
-			! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-			!! field.elements?.length &&
-			!! operators.length &&
-			! field.filterBy?.isPrimary;
-	} else {
-		header = combinedField.header || combinedField.label;
-	}
+	operators = sanitizeOperators( field );
+	// Filter can be added:
+	// 1. If the field is not already part of a view's filters.
+	// 2. If the field meets the type and operator requirements.
+	// 3. If it's not primary. If it is, it should be already visible.
+	canAddFilter =
+		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
+		!! field.elements?.length &&
+		!! operators.length &&
+		! field.filterBy?.isPrimary;
 
 	return (
 		<Menu
@@ -188,64 +180,80 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 						</Menu.Item>
 					</Menu.Group>
 				) }
-				<Menu.Group>
-					<Menu.Item
-						prefix={ <Icon icon={ arrowLeft } /> }
-						disabled={ index < 1 }
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: [
-									...( visibleFieldIds.slice(
-										0,
-										index - 1
-									) ?? [] ),
-									fieldId,
-									visibleFieldIds[ index - 1 ],
-									...visibleFieldIds.slice( index + 1 ),
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ __( 'Move left' ) }</Menu.ItemLabel>
-					</Menu.Item>
-					<Menu.Item
-						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={ index >= visibleFieldIds.length - 1 }
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: [
-									...( visibleFieldIds.slice( 0, index ) ??
-										[] ),
-									visibleFieldIds[ index + 1 ],
-									fieldId,
-									...visibleFieldIds.slice( index + 2 ),
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ __( 'Move right' ) }</Menu.ItemLabel>
-					</Menu.Item>
-					{ isHidable && field && (
-						<Menu.Item
-							prefix={ <Icon icon={ unseen } /> }
-							onClick={ () => {
-								onHide( field );
-								onChangeView( {
-									...view,
-									fields: visibleFieldIds.filter(
-										( id ) => id !== fieldId
-									),
-								} );
-							} }
-						>
-							<Menu.ItemLabel>
-								{ __( 'Hide column' ) }
-							</Menu.ItemLabel>
-						</Menu.Item>
-					) }
-				</Menu.Group>
+				{ ( canMove || isHidable ) && field && (
+					<Menu.Group>
+						{ canMove && (
+							<Menu.Item
+								prefix={ <Icon icon={ arrowLeft } /> }
+								disabled={ index < 1 }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index - 1
+											) ?? [] ),
+											fieldId,
+											visibleFieldIds[ index - 1 ],
+											...visibleFieldIds.slice(
+												index + 1
+											),
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Move left' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+						{ canMove && (
+							<Menu.Item
+								prefix={ <Icon icon={ arrowRight } /> }
+								disabled={ index >= visibleFieldIds.length - 1 }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index
+											) ?? [] ),
+											visibleFieldIds[ index + 1 ],
+											fieldId,
+											...visibleFieldIds.slice(
+												index + 2
+											),
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Move right' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+						{ isHidable && field && (
+							<Menu.Item
+								prefix={ <Icon icon={ unseen } /> }
+								onClick={ () => {
+									onHide( field );
+									onChangeView( {
+										...view,
+										fields: visibleFieldIds.filter(
+											( id ) => id !== fieldId
+										),
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Hide column' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+					</Menu.Group>
+				) }
 			</WithMenuSeparators>
 		</Menu>
 	);

package/src/dataviews-layouts/table/column-primary.tsx

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
+
+function ColumnPrimary< Item >( {
+	item,
+	titleField,
+	mediaField,
+	descriptionField,
+	onClickItem,
+	isItemClickable,
+}: {
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+} ) {
+	const clickableProps = getClickableItemProps( {
+		item,
+		isItemClickable,
+		onClickItem,
+		className:
+			'dataviews-view-table__cell-content-wrapper dataviews-title-field',
+	} );
+	return (
+		<HStack spacing={ 3 } justify="flex-start">
+			{ mediaField && (
+				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
+					<mediaField.render item={ item } />
+				</div>
+			) }
+			<VStack spacing={ 0 }>
+				{ titleField && (
+					<div { ...clickableProps }>
+						<titleField.render item={ item } />
+					</div>
+				) }
+				{ descriptionField && (
+					<descriptionField.render item={ item } />
+				) }
+			</VStack>
+		</HStack>
+	);
+}
+
+export default ColumnPrimary;

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

@@ -7,17 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Spinner,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { useEffect, useId, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import ItemActions from '../../components/dataviews-item-actions';
 import { sortValues } from '../../constants';
 import {
@@ -30,39 +26,15 @@ import type {
 	NormalizedField,
 	ViewTable as ViewTableType,
 	ViewTableProps,
-	CombinedField,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
-import { getVisibleFieldIds } from '../index';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import ColumnPrimary from './column-primary';
 
 interface TableColumnFieldProps< Item > {
-	primaryField?: NormalizedField< Item >;
-	field: NormalizedField< Item >;
-	item: Item;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
-}
-
-interface TableColumnCombinedProps< Item > {
-	primaryField?: NormalizedField< Item >;
-	fields: NormalizedField< Item >[];
-	field: CombinedField;
-	item: Item;
-	view: ViewTableType;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
-}
-
-interface TableColumnProps< Item > {
-	primaryField?: NormalizedField< Item >;
 	fields: NormalizedField< Item >[];
-	item: Item;
 	column: string;
-	view: ViewTableType;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
+	item: Item;
 }
 
 interface TableRowProps< Item > {
@@ -72,90 +44,34 @@ interface TableRowProps< Item > {
 	fields: NormalizedField< Item >[];
 	id: string;
 	view: ViewTableType;
-	primaryField?: NormalizedField< Item >;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
 	selection: string[];
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
 	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
-}
-
-function TableColumn< Item >( {
-	column,
-	fields,
-	view,
-	...props
-}: TableColumnProps< Item > ) {
-	const field = fields.find( ( f ) => f.id === column );
-	if ( !! field ) {
-		return <TableColumnField { ...props } field={ field } />;
-	}
-	const combinedField = view.layout?.combinedFields?.find(
-		( f ) => f.id === column
-	);
-	if ( !! combinedField ) {
-		return (
-			<TableColumnCombined
-				{ ...props }
-				fields={ fields }
-				view={ view }
-				field={ combinedField }
-			/>
-		);
-	}
-
-	return null;
+	onClickItem?: ( item: Item ) => void;
 }
 
 function TableColumnField< Item >( {
-	primaryField,
 	item,
-	field,
-	isItemClickable,
-	onClickItem,
+	fields,
+	column,
 }: TableColumnFieldProps< Item > ) {
-	const isPrimaryField = primaryField?.id === field.id;
-	const isItemClickableField = ( i: Item ) =>
-		isItemClickable( i ) && isPrimaryField;
+	const field = fields.find( ( f ) => f.id === column );
 
-	const clickableProps = getClickableItemProps(
-		item,
-		isItemClickableField,
-		onClickItem,
-		'dataviews-view-table__cell-content'
-	);
+	if ( ! field ) {
+		return null;
+	}
 
 	return (
-		<div
-			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
-				'dataviews-view-table__primary-field': isPrimaryField,
-			} ) }
-		>
-			<div { ...clickableProps }>
-				<field.render { ...{ item } } />
-			</div>
+		<div className="dataviews-view-table__cell-content-wrapper">
+			<field.render { ...{ item } } />
 		</div>
 	);
 }
 
-function TableColumnCombined< Item >( {
-	field,
-	...props
-}: TableColumnCombinedProps< Item > ) {
-	const children = field.children.map( ( child ) => (
-		<TableColumn key={ child } { ...props } column={ child } />
-	) );
-
-	if ( field.direction === 'horizontal' ) {
-		return (
-			<HStack spacing={ 3 } justify="flex-start">
-				{ children }
-			</HStack>
-		);
-	}
-	return <VStack spacing={ 0 }>{ children }</VStack>;
-}
-
 function TableRow< Item >( {
 	hasBulkActions,
 	item,
@@ -163,7 +79,9 @@ function TableRow< Item >( {
 	fields,
 	id,
 	view,
-	primaryField,
+	titleField,
+	mediaField,
+	descriptionField,
 	selection,
 	getItemId,
 	isItemClickable,
@@ -173,7 +91,7 @@ function TableRow< Item >( {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
 	const isSelected = hasPossibleBulkAction && selection.includes( id );
 	const [ isHovered, setIsHovered ] = useState( false );
-
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const handleMouseEnter = () => {
 		setIsHovered( true );
 	};
@@ -185,7 +103,11 @@ function TableRow< Item >( {
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
 	const isTouchDeviceRef = useRef( false );
-	const columns = getVisibleFieldIds( view, fields );
+	const columns = view.fields ?? [];
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
 
 	return (
 		<tr
@@ -223,17 +145,31 @@ function TableRow< Item >( {
 					} }
 				>
 					<div className="dataviews-view-table__cell-content-wrapper">
-						<SingleSelectionCheckbox
+						<DataViewsSelectionCheckbox
 							item={ item }
 							selection={ selection }
 							onChangeSelection={ onChangeSelection }
 							getItemId={ getItemId }
-							primaryField={ primaryField }
+							titleField={ titleField }
 							disabled={ ! hasPossibleBulkAction }
 						/>
 					</div>
 				</td>
 			) }
+			{ hasPrimaryColumn && (
+				<td>
+					<ColumnPrimary
+						item={ item }
+						titleField={ showTitle ? titleField : undefined }
+						mediaField={ showMedia ? mediaField : undefined }
+						descriptionField={
+							showDescription ? descriptionField : undefined
+						}
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+					/>
+				</td>
+			) }
 			{ columns.map( ( column: string ) => {
 				// Explicits picks the supported styles.
 				const { width, maxWidth, minWidth } =
@@ -241,14 +177,10 @@ function TableRow< Item >( {
 
 				return (
 					<td key={ column } style={ { width, maxWidth, minWidth } }>
-						<TableColumn
-							primaryField={ primaryField }
-							isItemClickable={ isItemClickable }
-							onClickItem={ onClickItem }
+						<TableColumnField
 							fields={ fields }
 							item={ item }
 							column={ column }
-							view={ view }
 						/>
 					</td>
 				);
@@ -322,12 +254,30 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
-	const columns = getVisibleFieldIds( view, fields );
 	const hasData = !! data?.length;
 
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
 	);
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
+	const columns = view.fields ?? [];
+	const headerMenuRef =
+		( column: string, index: number ) => ( node: HTMLButtonElement ) => {
+			if ( node ) {
+				headerMenuRefs.current.set( column, {
+					node,
+					fallback: columns[ index > 0 ? index - 1 : 1 ],
+				} );
+			} else {
+				headerMenuRefs.current.delete( column );
+			}
+		};
 
 	return (
 		<>
@@ -361,6 +311,27 @@ function ViewTable< Item >( {
 								/>
 							</th>
 						) }
+						{ hasPrimaryColumn && (
+							<th scope="col">
+								<span className="dataviews-view-table-header">
+									{ titleField && (
+										<ColumnHeaderMenu
+											ref={ headerMenuRef(
+												titleField.id,
+												0
+											) }
+											fieldId={ titleField.id }
+											view={ view }
+											fields={ fields }
+											onChangeView={ onChangeView }
+											onHide={ onHide }
+											setOpenedFilter={ setOpenedFilter }
+											canMove={ false }
+										/>
+									) }
+								</span>
+							</th>
+						) }
 						{ columns.map( ( column, index ) => {
 							// Explicits picks the supported styles.
 							const { width, maxWidth, minWidth } =
@@ -370,6 +341,7 @@ function ViewTable< Item >( {
 									key={ column }
 									style={ { width, maxWidth, minWidth } }
 									aria-sort={
+										view.sort?.direction &&
 										view.sort?.field === column
 											? sortValues[ view.sort.direction ]
 											: undefined
@@ -377,26 +349,7 @@ function ViewTable< Item >( {
 									scope="col"
 								>
 									<ColumnHeaderMenu
-										ref={ ( node ) => {
-											if ( node ) {
-												headerMenuRefs.current.set(
-													column,
-													{
-														node,
-														fallback:
-															columns[
-																index > 0
-																	? index - 1
-																	: 1
-															],
-													}
-												);
-											} else {
-												headerMenuRefs.current.delete(
-													column
-												);
-											}
-										} }
+										ref={ headerMenuRef( column, index ) }
 										fieldId={ column }
 										view={ view }
 										fields={ fields }
@@ -427,7 +380,9 @@ function ViewTable< Item >( {
 								fields={ fields }
 								id={ getItemId( item ) || index.toString() }
 								view={ view }
-								primaryField={ primaryField }
+								titleField={ titleField }
+								mediaField={ mediaField }
+								descriptionField={ descriptionField }
 								selection={ selection }
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }

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

@@ -222,3 +222,7 @@
 		--checkbox-input-size: 16px;
 	}
 }
+
+.dataviews-column-primary__media {
+	max-width: 60px;
+}

package/src/dataviews-layouts/utils/get-clickable-item-props.ts

@@ -1,20 +1,33 @@
-export default function getClickableItemProps< Item >(
-	item: Item,
-	isItemClickable: ( item: Item ) => boolean,
-	onClickItem: ( item: Item ) => void,
-	className: string
-) {
-	if ( ! isItemClickable( item ) ) {
+export default function getClickableItemProps< Item >( {
+	item,
+	isItemClickable,
+	onClickItem,
+	className,
+}: {
+	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem?: ( item: Item ) => void;
+	className?: string;
+} ) {
+	if ( ! isItemClickable( item ) || ! onClickItem ) {
 		return { className };
 	}
 
 	return {
-		className: `${ className } ${ className }--clickable`,
+		className: className
+			? `${ className } ${ className }--clickable`
+			: undefined,
 		role: 'button',
 		tabIndex: 0,
-		onClick: () => onClickItem( item ),
+		onClick: ( event: React.MouseEvent ) => {
+			// Prevents onChangeSelection from triggering.
+			event.stopPropagation();
+			onClickItem( item );
+		},
 		onKeyDown: ( event: React.KeyboardEvent ) => {
 			if ( event.key === 'Enter' || event.key === '' ) {
+				// Prevents onChangeSelection from triggering.
+				event.stopPropagation();
 				onClickItem( item );
 			}
 		},