@wordpress/dataviews 4.22.0 → 5.0.0

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ComponentProps, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
@@ -15,7 +16,7 @@ import {
 	FlexItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -35,7 +36,7 @@ import type {
 	ViewGridProps,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import { ItemClickWrapper } from '../utils/item-click-wrapper';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 const { Badge } = unlock( componentsPrivateApis );
 
@@ -45,6 +46,11 @@ interface GridItemProps< Item > {
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
@@ -62,6 +68,7 @@ function GridItem< Item >( {
 	onChangeSelection,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	getItemId,
 	item,
 	actions,
@@ -78,27 +85,13 @@ function GridItem< Item >( {
 	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
+		<mediaField.render item={ item } field={ mediaField } />
 	) : null;
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
-			<titleField.render item={ item } />
+			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
-	const clickableMediaItemProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className: 'dataviews-view-grid__media',
-	} );
-
-	const clickableTitleItemProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className: 'dataviews-view-grid__title-field dataviews-title-field',
-	} );
-
 	let mediaA11yProps;
 	let titleA11yProps;
 	if ( isItemClickable( item ) && onClickItem ) {
@@ -139,9 +132,16 @@ function GridItem< Item >( {
 			} }
 		>
 			{ showMedia && renderedMediaField && (
-				<div { ...clickableMediaItemProps } { ...mediaA11yProps }>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-grid__media"
+					{ ...mediaA11yProps }
+				>
 					{ renderedMediaField }
-				</div>
+				</ItemClickWrapper>
 			) }
 			{ hasBulkActions && showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
@@ -157,16 +157,26 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickableTitleItemProps } { ...titleA11yProps }>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-grid__title-field dataviews-title-field"
+					{ ...titleA11yProps }
+				>
 					{ renderedTitleField }
-				</div>
+				</ItemClickWrapper>
 				{ !! actions?.length && (
 					<ItemActions item={ item } actions={ actions } isCompact />
 				) }
 			</HStack>
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
-					<descriptionField.render item={ item } />
+					<descriptionField.render
+						item={ item }
+						field={ descriptionField }
+					/>
 				) }
 				{ !! badgeFields?.length && (
 					<HStack
@@ -182,7 +192,10 @@ function GridItem< Item >( {
 									key={ field.id }
 									className="dataviews-view-grid__field-value"
 								>
-									<field.render item={ item } />
+									<field.render
+										item={ item }
+										field={ field }
+									/>
 								</Badge>
 							);
 						} ) }
@@ -212,7 +225,10 @@ function GridItem< Item >( {
 											className="dataviews-view-grid__field-value"
 											style={ { maxHeight: 'none' } }
 										>
-											<field.render item={ item } />
+											<field.render
+												item={ item }
+												field={ field }
+											/>
 										</FlexItem>
 									</>
 								</Flex>
@@ -225,7 +241,7 @@ function GridItem< Item >( {
 	);
 }
 
-export default function ViewGrid< Item >( {
+function ViewGrid< Item >( {
 	actions,
 	data,
 	fields,
@@ -234,8 +250,10 @@ export default function ViewGrid< Item >( {
 	onChangeSelection,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	selection,
 	view,
+	className,
 }: ViewGridProps< Item > ) {
 	const titleField = fields.find(
 		( field ) => field.id === view?.titleField
@@ -275,50 +293,144 @@ export default function ViewGrid< Item >( {
 				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
 		  }
 		: {};
+
+	const groupField = view.groupByField
+		? fields.find( ( f ) => f.id === view.groupByField )
+		: null;
+
+	// Group data by groupByField if specified
+	const dataByGroup = groupField
+		? data.reduce( ( groups: Map< string, typeof data >, item ) => {
+				const groupName = groupField.getValue( { item } );
+				if ( ! groups.has( groupName ) ) {
+					groups.set( groupName, [] );
+				}
+				groups.get( groupName )?.push( item );
+				return groups;
+		  }, new Map< string, typeof data >() )
+		: null;
+
 	return (
 		<>
-			{ hasData && (
-				<Grid
-					gap={ 8 }
-					columns={ 2 }
-					alignment="top"
-					className="dataviews-view-grid"
-					style={ gridStyle }
-					aria-busy={ isLoading }
-				>
-					{ data.map( ( item ) => {
-						return (
-							<GridItem
-								key={ getItemId( item ) }
-								view={ view }
-								selection={ selection }
-								onChangeSelection={ onChangeSelection }
-								onClickItem={ onClickItem }
-								isItemClickable={ isItemClickable }
-								getItemId={ getItemId }
-								item={ item }
-								actions={ actions }
-								mediaField={ mediaField }
-								titleField={ titleField }
-								descriptionField={ descriptionField }
-								regularFields={ regularFields }
-								badgeFields={ badgeFields }
-								hasBulkActions={ hasBulkActions }
-							/>
-						);
-					} ) }
-				</Grid>
-			) }
-			{ ! hasData && (
-				<div
-					className={ clsx( {
-						'dataviews-loading': isLoading,
-						'dataviews-no-results': ! isLoading,
-					} ) }
-				>
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				</div>
-			) }
+			{
+				// Render multiple groups.
+				hasData && groupField && dataByGroup && (
+					<VStack spacing={ 4 }>
+						{ Array.from( dataByGroup.entries() ).map(
+							( [ groupName, groupItems ] ) => (
+								<VStack key={ groupName } spacing={ 2 }>
+									<h3 className="dataviews-view-grid__group-header">
+										{ sprintf(
+											// translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+											__( '%1$s: %2$s' ),
+											groupField.label,
+											groupName
+										) }
+									</h3>
+									<Grid
+										gap={ 8 }
+										columns={ 2 }
+										alignment="top"
+										className={ clsx(
+											'dataviews-view-grid',
+											className
+										) }
+										style={ gridStyle }
+										aria-busy={ isLoading }
+									>
+										{ groupItems.map( ( item ) => {
+											return (
+												<GridItem
+													key={ getItemId( item ) }
+													view={ view }
+													selection={ selection }
+													onChangeSelection={
+														onChangeSelection
+													}
+													onClickItem={ onClickItem }
+													isItemClickable={
+														isItemClickable
+													}
+													renderItemLink={
+														renderItemLink
+													}
+													getItemId={ getItemId }
+													item={ item }
+													actions={ actions }
+													mediaField={ mediaField }
+													titleField={ titleField }
+													descriptionField={
+														descriptionField
+													}
+													regularFields={
+														regularFields
+													}
+													badgeFields={ badgeFields }
+													hasBulkActions={
+														hasBulkActions
+													}
+												/>
+											);
+										} ) }
+									</Grid>
+								</VStack>
+							)
+						) }
+					</VStack>
+				)
+			}
+
+			{
+				// Render a single grid with all data.
+				hasData && ! dataByGroup && (
+					<Grid
+						gap={ 8 }
+						columns={ 2 }
+						alignment="top"
+						className={ clsx( 'dataviews-view-grid', className ) }
+						style={ gridStyle }
+						aria-busy={ isLoading }
+					>
+						{ data.map( ( item ) => {
+							return (
+								<GridItem
+									key={ getItemId( item ) }
+									view={ view }
+									selection={ selection }
+									onChangeSelection={ onChangeSelection }
+									onClickItem={ onClickItem }
+									isItemClickable={ isItemClickable }
+									renderItemLink={ renderItemLink }
+									getItemId={ getItemId }
+									item={ item }
+									actions={ actions }
+									mediaField={ mediaField }
+									titleField={ titleField }
+									descriptionField={ descriptionField }
+									regularFields={ regularFields }
+									badgeFields={ badgeFields }
+									hasBulkActions={ hasBulkActions }
+								/>
+							);
+						} ) }
+					</Grid>
+				)
+			}
+			{
+				// Render empty state.
+				! hasData && (
+					<div
+						className={ clsx( {
+							'dataviews-loading': isLoading,
+							'dataviews-no-results': ! isLoading,
+						} ) }
+					>
+						<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+					</div>
+				)
+			}
 		</>
 	);
 }
+
+export default ViewGrid;

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

@@ -166,3 +166,11 @@
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }
+
+.dataviews-view-grid__group-header {
+	font-size: 16px;
+	font-weight: 600;
+	color: $gray-900;
+	margin: 0 0 $grid-unit-10 0;
+	padding: 0 $grid-unit-60;
+}

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

@@ -199,13 +199,13 @@ function ListItem< Item >( {
 	const renderedMediaField =
 		showMedia && mediaField?.render ? (
 			<div className="dataviews-view-list__media-wrapper">
-				<mediaField.render item={ item } />
+				<mediaField.render item={ item } field={ mediaField } />
 			</div>
 		) : null;
 
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
-			<titleField.render item={ item } />
+			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
@@ -302,7 +302,10 @@ function ListItem< Item >( {
 						</HStack>
 						{ showDescription && descriptionField?.render && (
 							<div className="dataviews-view-list__field">
-								<descriptionField.render item={ item } />
+								<descriptionField.render
+									item={ item }
+									field={ descriptionField }
+								/>
 							</div>
 						) }
 						<div
@@ -321,7 +324,10 @@ function ListItem< Item >( {
 										{ field.label }
 									</VisuallyHidden>
 									<span className="dataviews-view-list__field-value">
-										<field.render item={ item } />
+										<field.render
+											item={ item }
+											field={ field }
+										/>
 									</span>
 								</div>
 							) ) }
@@ -347,6 +353,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		onChangeSelection,
 		selection,
 		view,
+		className,
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
 
@@ -491,7 +498,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		<Composite
 			id={ baseId }
 			render={ <div /> }
-			className="dataviews-view-list"
+			className={ clsx( 'dataviews-view-list', className ) }
 			role="grid"
 			activeId={ activeCompositeId }
 			setActiveId={ setActiveCompositeId }

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

@@ -19,7 +19,6 @@ import { forwardRef, Children, Fragment } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { sanitizeOperators } from '../../utils';
 import { SORTING_DIRECTIONS, sortArrows, sortLabels } from '../../constants';
 import type {
 	NormalizedField,
@@ -81,15 +80,18 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	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.
+	operators = ( !! field.filterBy && field.filterBy?.operators ) || [];
+
+	// Filter can be added if:
+	//
+	// 1. The field is not already part of a view's filters.
+	// 2. The field has elements or Edit property.
+	// 3. The field does not opt-out of filtering.
+	// 4. The filter is not primary (if it is, it is already visible).
 	canAddFilter =
 		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-		!! field.elements?.length &&
-		!! operators.length &&
+		!! ( field.elements?.length || field.Edit ) &&
+		field.filterBy !== false &&
 		! field.filterBy?.isPrimary;
 
 	return (

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps, ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -10,7 +15,7 @@ import {
  * Internal dependencies
  */
 import type { NormalizedField } from '../../types';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import { ItemClickWrapper } from '../utils/item-click-wrapper';
 
 function ColumnPrimary< Item >( {
 	item,
@@ -19,6 +24,7 @@ function ColumnPrimary< Item >( {
 	mediaField,
 	descriptionField,
 	onClickItem,
+	renderItemLink,
 	isItemClickable,
 }: {
 	item: Item;
@@ -27,35 +33,42 @@ function ColumnPrimary< Item >( {
 	mediaField?: NormalizedField< Item >;
 	descriptionField?: NormalizedField< Item >;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	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 } />
+					<mediaField.render item={ item } field={ mediaField } />
 				</div>
 			) }
 			<VStack spacing={ 0 }>
 				{ titleField && (
-					<div { ...clickableProps }>
+					<ItemClickWrapper
+						item={ item }
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+						renderItemLink={ renderItemLink }
+						className="dataviews-view-table__cell-content-wrapper dataviews-title-field"
+					>
 						{ level !== undefined && (
 							<span className="dataviews-view-table__level">
 								{ '—'.repeat( level ) }&nbsp;
 							</span>
 						) }
-						<titleField.render item={ item } />
-					</div>
+						<titleField.render item={ item } field={ titleField } />
+					</ItemClickWrapper>
 				) }
 				{ descriptionField && (
-					<descriptionField.render item={ item } />
+					<descriptionField.render
+						item={ item }
+						field={ descriptionField }
+					/>
 				) }
 			</VStack>
 		</HStack>