@wordpress/dataviews 5.0.0 → 6.0.0

package/src/dataviews-layouts/grid/preview-size-picker.tsx

@@ -3,7 +3,7 @@
  */
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo, useContext } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,100 +11,75 @@ import { useMemo, useContext } from '@wordpress/element';
 import DataViewsContext from '../../components/dataviews-context';
 import type { ViewGrid } from '../../types';
 
-const viewportBreaks: {
-	[ key: string ]: { min: number; max: number; default: number };
-} = {
-	xhuge: { min: 3, max: 6, default: 5 },
-	huge: { min: 2, max: 4, default: 4 },
-	xlarge: { min: 2, max: 3, default: 3 },
-	large: { min: 1, max: 2, default: 2 },
-	mobile: { min: 1, max: 2, default: 2 },
-};
-
-/**
- * Breakpoints were adjusted from media queries breakpoints to account for
- * the sidebar width. This was done to match the existing styles we had.
- */
-const BREAKPOINTS = {
-	xhuge: 1520,
-	huge: 1140,
-	xlarge: 780,
-	large: 480,
-	mobile: 0,
-};
-
-function useViewPortBreakpoint() {
-	const containerWidth = useContext( DataViewsContext ).containerWidth;
-	for ( const [ key, value ] of Object.entries( BREAKPOINTS ) ) {
-		if ( containerWidth >= value ) {
-			return key;
-		}
-	}
-	return 'mobile';
-}
-
-export function useUpdatedPreviewSizeOnViewportChange() {
-	const view = useContext( DataViewsContext ).view as ViewGrid;
-	const viewport = useViewPortBreakpoint();
-	return useMemo( () => {
-		const previewSize = view.layout?.previewSize;
-		let newPreviewSize;
-		if ( ! previewSize ) {
-			return;
-		}
-		const breakValues = viewportBreaks[ viewport ];
-		if ( previewSize < breakValues.min ) {
-			newPreviewSize = breakValues.min;
-		}
-		if ( previewSize > breakValues.max ) {
-			newPreviewSize = breakValues.max;
-		}
-		return newPreviewSize;
-	}, [ viewport, view ] );
-}
+const imageSizes = [
+	{
+		value: 230,
+		breakpoint: 1,
+	},
+	{
+		value: 290,
+		breakpoint: 1112, // at minimum image width, 4 images display at this container size
+	},
+	{
+		value: 350,
+		breakpoint: 1636, // at minimum image width, 6 images display at this container size
+	},
+	{
+		value: 430,
+		breakpoint: 588, // at minimum image width, 2 images display at this container size
+	},
+];
 
 export default function PreviewSizePicker() {
-	const viewport = useViewPortBreakpoint();
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
-	const breakValues = viewportBreaks[ viewport ];
-	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
-	const marks = useMemo(
-		() =>
-			Array.from(
-				{ length: breakValues.max - breakValues.min + 1 },
-				( _, i ) => {
-					return {
-						value: breakValues.min + i,
-					};
-				}
-			),
-		[ breakValues ]
-	);
-	if ( viewport === 'mobile' ) {
+
+	if ( context.containerWidth < 588 ) {
 		return null;
 	}
+
+	const breakValues = imageSizes.filter( ( size ) => {
+		return context.containerWidth >= size.breakpoint;
+	} );
+
+	// If the container has resized and the set preview size is no longer available,
+	// we reset it to the next smallest size.
+	const previewSizeToUse = view.layout?.previewSize
+		? breakValues
+				.map( ( size, index ) => ( { ...size, index } ) )
+				.filter(
+					( size ) => size.value <= ( view.layout?.previewSize ?? 0 ) // We know the view.layout?.previewSize exists at this point but the linter doesn't seem to.
+				)
+				.sort( ( a, b ) => b.value - a.value )[ 0 ].index
+		: 0;
+
+	const marks = breakValues.map( ( size, index ) => {
+		return {
+			value: index,
+		};
+	} );
+
 	return (
 		<RangeControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			showTooltip={ false }
 			label={ __( 'Preview size' ) }
-			value={ breakValues.max + breakValues.min - previewSizeToUse }
-			marks={ marks }
-			min={ breakValues.min }
-			max={ breakValues.max }
+			value={ previewSizeToUse }
+			min={ 0 }
+			max={ breakValues.length - 1 }
 			withInputField={ false }
 			onChange={ ( value = 0 ) => {
 				context.onChangeView( {
 					...view,
 					layout: {
 						...view.layout,
-						previewSize: breakValues.max + breakValues.min - value,
+						previewSize: breakValues[ value ].value,
 					},
 				} );
 			} }
 			step={ 1 }
+			marks={ marks }
 		/>
 	);
 }

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

@@ -1,8 +1,19 @@
 .dataviews-view-grid {
 	margin-bottom: auto;
+	display: grid;
+	gap: $grid-unit-40;
 	grid-template-rows: max-content;
+	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	container-type: inline-size;
+	/**
+	 * Breakpoints were adjusted from media queries breakpoints to account for
+	 * the sidebar width. This was done to match the existing styles we had.
+	 */
+	@container (max-width: 480px) {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
 
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;
@@ -49,8 +60,8 @@
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
+		background-color: $white;
+		border-radius: $radius-medium;
 		position: relative;
 
 		img {
@@ -116,30 +127,6 @@
 	}
 }
 
-.dataviews-view-grid.dataviews-view-grid {
-	/**
-	 * Breakpoints were adjusted from media queries breakpoints to account for
-	 * the sidebar width. This was done to match the existing styles we had.
-	 */
-	@container (max-width: 480px) {
-		grid-template-columns: repeat(1, minmax(0, 1fr));
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-	@container (min-width: 480px) {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-	@container (min-width: 780px) {
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-	}
-	@container (min-width: 1140px) {
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-	}
-	@container (min-width: 1520px) {
-		grid-template-columns: repeat(5, minmax(0, 1fr));
-	}
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
 	display: none;
@@ -168,8 +155,8 @@
 }
 
 .dataviews-view-grid__group-header {
-	font-size: 16px;
-	font-weight: 600;
+	font-size: $font-size-large;
+	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
 	padding: 0 $grid-unit-60;

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

@@ -199,7 +199,11 @@ function ListItem< Item >( {
 	const renderedMediaField =
 		showMedia && mediaField?.render ? (
 			<div className="dataviews-view-list__media-wrapper">
-				<mediaField.render item={ item } field={ mediaField } />
+				<mediaField.render
+					item={ item }
+					field={ mediaField }
+					config={ { sizes: '52px' } }
+				/>
 			</div>
 		) : null;
 
@@ -354,6 +358,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		selection,
 		view,
 		className,
+		empty,
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
 
@@ -487,9 +492,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }
 			>
-				{ ! hasData && (
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				) }
+				{ ! hasData && <p>{ isLoading ? <Spinner /> : empty }</p> }
 			</div>
 		);
 	}

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

@@ -136,8 +136,8 @@ div.dataviews-view-list {
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
+		background-color: $white;
+		border-radius: $radius-medium;
 
 		img {
 			width: 100%;
@@ -153,7 +153,7 @@ div.dataviews-view-list {
 			width: 100%;
 			height: 100%;
 			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
+			border-radius: $radius-medium;
 		}
 	}
 

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

@@ -16,6 +16,7 @@ import {
  */
 import type { NormalizedField } from '../../types';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
+import { sprintf, __ } from '@wordpress/i18n';
 
 function ColumnPrimary< Item >( {
 	item,
@@ -43,11 +44,34 @@ function ColumnPrimary< Item >( {
 	return (
 		<HStack spacing={ 3 } justify="flex-start">
 			{ mediaField && (
-				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
-					<mediaField.render item={ item } field={ mediaField } />
-				</div>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media"
+					aria-label={
+						titleField
+							? sprintf(
+									// translators: %s is the item title.
+									__( 'Click item: %s' ),
+									titleField.getValue?.( { item } )
+							  )
+							: undefined
+					}
+				>
+					<mediaField.render
+						item={ item }
+						field={ mediaField }
+						config={ { sizes: '32px' } }
+					/>
+				</ItemClickWrapper>
 			) }
-			<VStack spacing={ 0 }>
+			<VStack
+				spacing={ 0 }
+				alignment="flex-start"
+				className="dataviews-view-table__primary-column-content"
+			>
 				{ titleField && (
 					<ItemClickWrapper
 						item={ item }
@@ -56,7 +80,7 @@ function ColumnPrimary< Item >( {
 						renderItemLink={ renderItemLink }
 						className="dataviews-view-table__cell-content-wrapper dataviews-title-field"
 					>
-						{ level !== undefined && (
+						{ level !== undefined && level > 0 && (
 							<span className="dataviews-view-table__level">
 								{ '—'.repeat( level ) }&nbsp;
 							</span>

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

@@ -7,7 +7,7 @@ import type { ComponentProps, ReactElement } from 'react';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Spinner } from '@wordpress/components';
 import {
 	useContext,
@@ -16,6 +16,7 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
+import { isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -147,19 +148,34 @@ function TableRow< Item >( {
 			onTouchStart={ () => {
 				isTouchDeviceRef.current = true;
 			} }
-			onClick={ () => {
+			onClick={ ( event ) => {
 				if ( ! hasPossibleBulkAction ) {
 					return;
 				}
+
 				if (
 					! isTouchDeviceRef.current &&
 					document.getSelection()?.type !== 'Range'
 				) {
-					onChangeSelection(
-						selection.includes( id )
-							? selection.filter( ( itemId ) => id !== itemId )
-							: [ id ]
-					);
+					if ( isAppleOS() ? event.metaKey : event.ctrlKey ) {
+						// Handle non-consecutive selection.
+						onChangeSelection(
+							selection.includes( id )
+								? selection.filter(
+										( itemId ) => id !== itemId
+								  )
+								: [ ...selection, id ]
+						);
+					} else {
+						// Handle single selection
+						onChangeSelection(
+							selection.includes( id )
+								? selection.filter(
+										( itemId ) => id !== itemId
+								  )
+								: [ id ]
+						);
+					}
 				}
 			} }
 		>
@@ -256,6 +272,7 @@ function ViewTable< Item >( {
 	renderItemLink,
 	view,
 	className,
+	empty,
 }: ViewTableProps< Item > ) {
 	const { containerRef } = useContext( DataViewsContext );
 	const headerMenuRefs = useRef<
@@ -305,6 +322,23 @@ function ViewTable< Item >( {
 	const descriptionField = fields.find(
 		( field ) => field.id === view.descriptionField
 	);
+
+	// Get group field if groupByField is specified
+	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;
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasPrimaryColumn =
 		( titleField && showTitle ) ||
@@ -423,38 +457,98 @@ function ViewTable< Item >( {
 						) }
 					</tr>
 				</thead>
-				<tbody>
-					{ hasData &&
-						data.map( ( item, index ) => (
-							<TableRow
-								key={ getItemId( item ) }
-								item={ item }
-								level={
-									view.showLevels &&
-									typeof getItemLevel === 'function'
-										? getItemLevel( item )
-										: undefined
-								}
-								hasBulkActions={ hasBulkActions }
-								actions={ actions }
-								fields={ fields }
-								id={ getItemId( item ) || index.toString() }
-								view={ view }
-								titleField={ titleField }
-								mediaField={ mediaField }
-								descriptionField={ descriptionField }
-								selection={ selection }
-								getItemId={ getItemId }
-								onChangeSelection={ onChangeSelection }
-								onClickItem={ onClickItem }
-								renderItemLink={ renderItemLink }
-								isItemClickable={ isItemClickable }
-								isActionsColumnSticky={
-									! isHorizontalScrollEnd
-								}
-							/>
-						) ) }
-				</tbody>
+				{ /* Render grouped data if groupByField is specified */ }
+				{ hasData && groupField && dataByGroup ? (
+					Array.from( dataByGroup.entries() ).map(
+						( [ groupName, groupItems ] ) => (
+							<tbody key={ `group-${ groupName }` }>
+								<tr className="dataviews-view-table__group-header-row">
+									<td
+										colSpan={
+											columns.length +
+											( hasPrimaryColumn ? 1 : 0 ) +
+											( hasBulkActions ? 1 : 0 ) +
+											( actions?.length ? 1 : 0 )
+										}
+										className="dataviews-view-table__group-header-cell"
+									>
+										{ 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
+										) }
+									</td>
+								</tr>
+								{ groupItems.map( ( item, index ) => (
+									<TableRow
+										key={ getItemId( item ) }
+										item={ item }
+										level={
+											view.showLevels &&
+											typeof getItemLevel === 'function'
+												? getItemLevel( item )
+												: undefined
+										}
+										hasBulkActions={ hasBulkActions }
+										actions={ actions }
+										fields={ fields }
+										id={
+											getItemId( item ) ||
+											index.toString()
+										}
+										view={ view }
+										titleField={ titleField }
+										mediaField={ mediaField }
+										descriptionField={ descriptionField }
+										selection={ selection }
+										getItemId={ getItemId }
+										onChangeSelection={ onChangeSelection }
+										onClickItem={ onClickItem }
+										renderItemLink={ renderItemLink }
+										isItemClickable={ isItemClickable }
+										isActionsColumnSticky={
+											! isHorizontalScrollEnd
+										}
+									/>
+								) ) }
+							</tbody>
+						)
+					)
+				) : (
+					<tbody>
+						{ hasData &&
+							data.map( ( item, index ) => (
+								<TableRow
+									key={ getItemId( item ) }
+									item={ item }
+									level={
+										view.showLevels &&
+										typeof getItemLevel === 'function'
+											? getItemLevel( item )
+											: undefined
+									}
+									hasBulkActions={ hasBulkActions }
+									actions={ actions }
+									fields={ fields }
+									id={ getItemId( item ) || index.toString() }
+									view={ view }
+									titleField={ titleField }
+									mediaField={ mediaField }
+									descriptionField={ descriptionField }
+									selection={ selection }
+									getItemId={ getItemId }
+									onChangeSelection={ onChangeSelection }
+									onClickItem={ onClickItem }
+									renderItemLink={ renderItemLink }
+									isItemClickable={ isItemClickable }
+									isActionsColumnSticky={
+										! isHorizontalScrollEnd
+									}
+								/>
+							) ) }
+					</tbody>
+				) }
 			</table>
 			<div
 				className={ clsx( {
@@ -463,9 +557,7 @@ function ViewTable< Item >( {
 				} ) }
 				id={ tableNoticeId }
 			>
-				{ ! hasData && (
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				) }
+				{ ! hasData && <p>{ isLoading ? <Spinner /> : empty }</p> }
 			</div>
 		</>
 	);

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

@@ -16,7 +16,6 @@
 	td,
 	th {
 		padding: $grid-unit-15;
-		white-space: nowrap;
 
 		&.dataviews-view-table__actions-column {
 			text-align: right;
@@ -44,6 +43,11 @@
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 			width: 1%;
+
+			.dataviews-view-table__cell-content-wrapper {
+				max-width: auto;
+				min-width: auto;
+			}
 		}
 	}
 	tr {
@@ -198,6 +202,8 @@
 
 	.dataviews-view-table__actions-column {
 		width: 1%;
+		max-width: inherit;
+		min-width: inherit;
 	}
 
 	&:has(tr.is-selected) {
@@ -260,4 +266,42 @@
 
 .dataviews-column-primary__media {
 	max-width: 60px;
+	overflow: hidden;
+	position: relative;
+	flex-shrink: 0;
+	background-color: $white;
+	border-radius: $radius-medium;
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+		border-radius: $radius-medium;
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper,
+.dataviews-view-table__primary-column-content {
+	&:not(.dataviews-column-primary__media) {
+		min-width: 15ch;
+		max-width: 80ch;
+	}
+}
+
+.dataviews-view-table__group-header-row {
+	.dataviews-view-table__group-header-cell {
+		font-weight: $font-weight-medium;
+		padding: $grid-unit-15 $grid-unit-60;
+		color: $gray-900;
+	}
 }