@wordpress/dataviews 16.0.0 → 17.0.0

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

@@ -1,6 +1,14 @@
-@use "@wordpress/base-styles/variables" as vars;
 @use "../../../dataviews/style" as *;
 
+// Square media (thumbnail) size per density. The compact density uses the
+// `--wpds-dimension-size-md` token; these larger densities have no matching
+// token, so they're kept as local constants. The field wrapper reuses the
+// same value as its `min-height` to keep the title centered against the media.
+// TODO: Replace with `--wpds-dimension-size-*` tokens if 48px and 64px are
+// added to the WPDS element size scale.
+$media-size: 48px;
+$media-size-comfortable: 64px;
+
 div.dataviews-view-list {
 	list-style-type: none;
 }
@@ -32,7 +40,7 @@ div.dataviews-view-list {
 			}
 
 			> div {
-				height: vars.$button-size-small;
+				height: var(--wpds-dimension-size-sm);
 			}
 
 			> :not(:last-child) {
@@ -72,12 +80,12 @@ div.dataviews-view-list {
 			&:hover,
 			&.is-hovered,
 			&:focus-within {
-				color: var(--wpds-color-fg-interactive-brand);
-				background-color: var(--wpds-color-bg-interactive-brand-weak);
+				color: var(--wpds-color-foreground-interactive-brand);
+				background-color: var(--wpds-color-background-interactive-brand-weak);
 
 				.dataviews-title-field,
 				.dataviews-view-list__field {
-					color: var(--wpds-color-fg-interactive-brand);
+					color: var(--wpds-color-foreground-interactive-brand);
 				}
 			}
 		}
@@ -89,12 +97,12 @@ div.dataviews-view-list {
 	div[role="article"].is-selected,
 	div[role="article"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
-			color: var(--wpds-color-fg-interactive-neutral);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
+			color: var(--wpds-color-foreground-interactive-neutral);
 
 			.dataviews-title-field,
 			.dataviews-view-list__field {
-				color: var(--wpds-color-fg-interactive-neutral-active);
+				color: var(--wpds-color-foreground-interactive-neutral-active);
 			}
 		}
 	}
@@ -117,7 +125,7 @@ div.dataviews-view-list {
 				position: absolute;
 				content: "";
 				inset: var(--wp-admin-border-width-focus);
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus);
 				border-radius: var(--wpds-border-radius-sm);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
@@ -126,7 +134,7 @@ div.dataviews-view-list {
 	}
 	.dataviews-view-list__title-field {
 		flex: 1;
-		min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+		min-height: var(--wpds-dimension-size-sm);
 		line-height: var(--wpds-typography-line-height-md);
 		overflow: hidden;
 		// The field should be in front of the main button in case it has a link/button.
@@ -136,12 +144,12 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: calc(var(--wpds-dimension-base) * 13);
-		height: calc(var(--wpds-dimension-base) * 13);
+		width: $media-size;
+		height: $media-size;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 		border-radius: var(--wpds-border-radius-md);
 
 		img {
@@ -163,13 +171,13 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__field-wrapper {
-		min-height: calc(var(--wpds-dimension-base) * 13); // Ensures title is centrally aligned when all fields are hidden
+		min-height: $media-size; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
 		min-width: 0;
 	}
 
 	.dataviews-view-list__field {
-		color: var(--wpds-color-fg-interactive-neutral-weak);
+		color: var(--wpds-color-foreground-interactive-neutral-weak);
 	}
 
 	.dataviews-view-list__fields {
@@ -190,7 +198,7 @@ div.dataviews-view-list {
 		}
 
 		.dataviews-view-list__field-value {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			line-height: var(--wpds-typography-line-height-sm);
 			display: flex;
 			align-items: center;
@@ -209,17 +217,17 @@ div.dataviews-view-list {
 			}
 
 			.dataviews-view-list__title-field {
-				min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+				min-height: var(--wpds-dimension-size-2xs);
 				line-height: var(--wpds-typography-line-height-xs);
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
-				height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				width: var(--wpds-dimension-size-md);
+				height: var(--wpds-dimension-size-md);
 			}
 
 			.dataviews-view-list__field-wrapper {
-				min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				min-height: var(--wpds-dimension-size-md);
 			}
 
 			.dataviews-view-list__fields {
@@ -227,7 +235,7 @@ div.dataviews-view-list {
 				row-gap: var(--wpds-dimension-gap-xs);
 
 				.dataviews-view-list__field-value {
-					min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+					min-height: var(--wpds-dimension-size-2xs);
 					line-height: var(--wpds-typography-line-height-xs);
 				}
 			}
@@ -241,17 +249,17 @@ div.dataviews-view-list {
 			}
 
 			.dataviews-view-list__title-field {
-				min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				min-height: var(--wpds-dimension-size-md);
 				line-height: var(--wpds-typography-line-height-xl);
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: calc(var(--wpds-dimension-base) * 16);
-				height: calc(var(--wpds-dimension-base) * 16);
+				width: $media-size-comfortable;
+				height: $media-size-comfortable;
 			}
 
 			.dataviews-view-list__field-wrapper {
-				min-height: calc(var(--wpds-dimension-base) * 16);
+				min-height: $media-size-comfortable;
 			}
 
 			.dataviews-view-list__fields {
@@ -259,7 +267,7 @@ div.dataviews-view-list {
 				row-gap: var(--wpds-dimension-gap-sm);
 
 				.dataviews-view-list__field-value {
-					min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+					min-height: var(--wpds-dimension-size-md);
 					line-height: var(--wpds-typography-line-height-md);
 				}
 			}
@@ -274,7 +282,7 @@ div.dataviews-view-list {
 .dataviews-view-list__group-header {
 	font-size: var(--wpds-typography-font-size-lg);
 	font-weight: var(--wpds-typography-font-weight-medium);
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
 	padding: 0 var(--wpds-dimension-padding-2xl);
 }

package/src/components/dataviews-layouts/picker-activity/index.tsx

@@ -0,0 +1,359 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Spinner, Composite } from '@wordpress/components';
+import { useContext, useMemo, useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../dataviews-context';
+import { useIsMultiselectPicker } from '../../dataviews-picker-footer';
+import getDataByGroup from '../utils/get-data-by-group';
+import { useIntersectionObserver } from '../utils/use-infinite-scroll';
+import type {
+	NormalizedField,
+	ViewPickerActivity as ViewPickerActivityType,
+	ViewPickerActivityProps,
+} from '../../../types';
+import type { SetSelection } from '../../../types/private';
+
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
+interface PickerActivityItemProps< Item > {
+	view: ViewPickerActivityType;
+	multiselect?: boolean;
+	selection: string[];
+	onChangeSelection: SetSelection;
+	getItemId: ( item: Item ) => string;
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	otherFields: NormalizedField< Item >[];
+	posinset?: number;
+	setsize?: number;
+}
+
+function PickerActivityItem< Item >( {
+	view,
+	multiselect,
+	selection,
+	onChangeSelection,
+	getItemId,
+	item,
+	titleField,
+	mediaField,
+	descriptionField,
+	otherFields,
+	posinset,
+	setsize,
+}: PickerActivityItemProps< Item > ) {
+	const elementRef = useRef< HTMLButtonElement >( null );
+	useIntersectionObserver( elementRef, posinset );
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	const density = view.layout?.density ?? 'balanced';
+
+	const mediaContent =
+		showMedia && density !== 'compact' && mediaField?.render ? (
+			<mediaField.render
+				item={ item }
+				field={ mediaField }
+				config={ {
+					sizes: density === 'comfortable' ? '32px' : '24px',
+				} }
+			/>
+		) : null;
+
+	const renderedMediaField = (
+		<div className="dataviews-view-picker-activity__item-type-icon">
+			{ mediaContent || (
+				<span
+					className="dataviews-view-picker-activity__item-bullet"
+					aria-hidden="true"
+				/>
+			) }
+		</div>
+	);
+
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } field={ titleField } />
+		) : null;
+
+	const renderedDescriptionField =
+		showDescription && descriptionField?.render ? (
+			<descriptionField.render item={ item } field={ descriptionField } />
+		) : null;
+
+	const verticalGap = useMemo( () => {
+		switch ( density ) {
+			case 'comfortable':
+				return 'md';
+			default:
+				return 'sm';
+		}
+	}, [ density ] );
+
+	return (
+		<Composite.Item
+			ref={ elementRef }
+			role="option"
+			aria-label={
+				titleField
+					? titleField.getValue( { item } ) || undefined
+					: undefined
+			}
+			aria-posinset={ posinset }
+			aria-setsize={ setsize }
+			aria-selected={ isSelected }
+			className={ clsx(
+				'dataviews-view-picker-activity__item',
+				density === 'compact' && 'is-compact',
+				density === 'balanced' && 'is-balanced',
+				density === 'comfortable' && 'is-comfortable',
+				isSelected && 'is-selected'
+			) }
+			onClick={ () => {
+				if ( isSelected ) {
+					onChangeSelection(
+						selection.filter( ( itemId ) => id !== itemId )
+					);
+				} else {
+					const newSelection = multiselect
+						? [ ...selection, id ]
+						: [ id ];
+					onChangeSelection( newSelection );
+				}
+			} }
+			render={ <div /> }
+		>
+			<Stack direction="row" gap="lg" justify="start" align="flex-start">
+				<Stack
+					direction="column"
+					gap="xs"
+					align="center"
+					className="dataviews-view-picker-activity__item-type"
+				>
+					{ renderedMediaField }
+				</Stack>
+				<Stack
+					direction="column"
+					gap={ verticalGap }
+					align="flex-start"
+					className="dataviews-view-picker-activity__item-content"
+				>
+					{ renderedTitleField && (
+						<div className="dataviews-view-picker-activity__item-title">
+							{ renderedTitleField }
+						</div>
+					) }
+					{ renderedDescriptionField && (
+						<div className="dataviews-view-picker-activity__item-description">
+							{ renderedDescriptionField }
+						</div>
+					) }
+					<div className="dataviews-view-picker-activity__item-fields">
+						{ otherFields.map( ( field ) => (
+							<div
+								key={ field.id }
+								className="dataviews-view-picker-activity__item-field"
+							>
+								<VisuallyHidden
+									render={ <span /> }
+									className="dataviews-view-picker-activity__item-field-label"
+								>
+									{ field.label }
+								</VisuallyHidden>
+								<span className="dataviews-view-picker-activity__item-field-value">
+									<field.render
+										item={ item }
+										field={ field }
+									/>
+								</span>
+							</div>
+						) ) }
+					</div>
+				</Stack>
+			</Stack>
+		</Composite.Item>
+	);
+}
+
+function PickerActivityGroup< Item >( {
+	groupName,
+	groupField,
+	showLabel = true,
+	children,
+}: {
+	groupName: string;
+	groupField: NormalizedField< Item >;
+	showLabel?: boolean;
+	children: ReactNode;
+} ) {
+	const headerId = useInstanceId(
+		PickerActivityGroup,
+		'dataviews-view-picker-activity-group__header'
+	);
+	return (
+		<Stack
+			direction="column"
+			role="group"
+			aria-labelledby={ headerId }
+			className="dataviews-view-picker-activity-group"
+		>
+			<h3
+				className="dataviews-view-picker-activity-group__header"
+				id={ headerId }
+			>
+				{ showLabel
+					? 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
+					  )
+					: groupName }
+			</h3>
+			{ children }
+		</Stack>
+	);
+}
+
+export default function ViewPickerActivity< Item >( {
+	data,
+	fields,
+	getItemId,
+	isLoading,
+	onChangeSelection,
+	selection,
+	view,
+	actions,
+	className,
+	empty,
+}: ViewPickerActivityProps< Item > ) {
+	const { itemListLabel, paginationInfo } = useContext( DataViewsContext );
+	const isMultiselect = useIsMultiselectPicker( actions );
+
+	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 otherFields = ( view?.fields ?? [] )
+		.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )
+		.filter( isDefined );
+
+	const groupField = view.groupBy?.field
+		? fields.find( ( f ) => f.id === view.groupBy?.field )
+		: null;
+	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
+
+	const isInfiniteScroll =
+		( view.infiniteScrollEnabled && ! dataByGroup ) ?? false;
+	const setsize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;
+
+	const hasData = !! data?.length;
+	const isGrouped = !! ( groupField && dataByGroup );
+
+	const renderItem = ( item: Item ) => (
+		<PickerActivityItem
+			key={ getItemId( item ) }
+			view={ view }
+			multiselect={ isMultiselect }
+			selection={ selection }
+			onChangeSelection={ onChangeSelection }
+			getItemId={ getItemId }
+			item={ item }
+			titleField={ titleField }
+			mediaField={ mediaField }
+			descriptionField={ descriptionField }
+			otherFields={ otherFields }
+			posinset={ ( item as { position?: number } ).position }
+			setsize={ setsize }
+		/>
+	);
+
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! isLoading,
+				} ) }
+			>
+				{ isLoading ? (
+					<p>
+						<Spinner />
+					</p>
+				) : (
+					empty
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<Composite
+				virtualFocus
+				orientation="vertical"
+				role="listbox"
+				aria-multiselectable={ isMultiselect }
+				aria-label={ itemListLabel }
+				aria-busy={ isLoading }
+				render={
+					isGrouped ? (
+						<Stack direction="column" gap="sm" />
+					) : undefined
+				}
+				className={ clsx(
+					'dataviews-view-picker-activity',
+					className
+				) }
+			>
+				{ isGrouped && dataByGroup
+					? Array.from( dataByGroup.entries() ).map(
+							( [ groupName, groupItems ]: [
+								string,
+								Item[],
+							] ) => (
+								<PickerActivityGroup< Item >
+									key={ groupName }
+									groupName={ groupName }
+									groupField={ groupField }
+									showLabel={
+										view.groupBy?.showLabel !== false
+									}
+								>
+									{ groupItems.map( renderItem ) }
+								</PickerActivityGroup>
+							)
+					  )
+					: data.map( renderItem ) }
+			</Composite>
+			{ isLoading && (
+				<p className="dataviews-loading-more">
+					<Spinner />
+				</p>
+			) }
+		</>
+	);
+}