@wordpress/dataviews 16.0.0 → 17.0.1-next.v.202606191442.0

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>
+			) }
+		</>
+	);
+}

package/src/components/dataviews-layouts/picker-activity/style.scss

@@ -0,0 +1,227 @@
+.dataviews-view-picker-activity {
+	margin: 0;
+	padding: 0;
+	// Fill the wrapper height so the footer sits at the bottom.
+	flex-grow: 1;
+
+	&:focus-visible {
+		&[aria-activedescendant] {
+			outline: none;
+		}
+
+		.dataviews-view-picker-activity__item[data-active-item="true"] {
+			outline: 2px solid var(--wpds-color-stroke-focus);
+			outline-offset: -2px;
+		}
+	}
+
+	.dataviews-view-picker-activity__item {
+		cursor: var(--wpds-cursor-control);
+		border-radius: var(--wpds-border-radius-sm);
+		// Inset content to the toolbar/footer padding so the timeline aligns with the chrome.
+		padding-inline: var(--wpds-dimension-padding-2xl);
+		transition: background-color 0.1s ease;
+
+		// Selected and hovered rows share the same tint (like the table picker),
+		// keeping selection legible even for bullet-only items.
+		&.is-selected,
+		&:hover {
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
+		}
+
+		// Selection outline only renders in Windows High Contrast mode.
+		&.is-selected {
+			outline: 3px solid transparent;
+			outline-offset: -2px;
+		}
+
+		&.is-compact {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-padding-md);
+
+				&::before {
+					height: var(--wpds-dimension-size-3xs);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-base) * 3 - 1px);
+				height: calc(var(--wpds-dimension-base) * 3 - 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-md) 0;
+			}
+		}
+
+		&.is-balanced {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-size-sm);
+
+				&::before {
+					height: var(--wpds-dimension-size-3xs);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-base) * 6 + 1px);
+				height: calc(var(--wpds-dimension-base) * 6 + 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-md) 0;
+				padding-top: var(--wpds-dimension-padding-sm);
+			}
+		}
+
+		&.is-comfortable {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-size-md);
+
+				&::before {
+					height: var(--wpds-dimension-size-4xs);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-base) * 8 + 1px);
+				height: calc(var(--wpds-dimension-base) * 8 + 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-gap-lg);
+				padding-top: var(--wpds-dimension-padding-md);
+			}
+		}
+
+		&.is-comfortable,
+		&.is-balanced {
+			.dataviews-view-picker-activity__item-bullet {
+				width: calc(var(--wpds-dimension-base) * 2 + 1px);
+				height: calc(var(--wpds-dimension-base) * 2 + 1px);
+				position: relative;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity__item-content {
+		flex-grow: 1;
+
+		.dataviews-view-picker-activity__item-title,
+		.dataviews-view-picker-activity__item-description,
+		.dataviews-view-picker-activity__item-fields {
+			min-height: var(--wpds-dimension-size-2xs);
+		}
+
+		.dataviews-view-picker-activity__item-title {
+			position: relative;
+			display: flex;
+			align-items: center;
+			flex: 1;
+			overflow: hidden;
+		}
+
+		.dataviews-view-picker-activity__item-description {
+			&:empty {
+				display: none;
+			}
+		}
+
+		.dataviews-view-picker-activity__item-fields {
+			color: var(--wpds-color-foreground-content-neutral-weak);
+			display: flex;
+			gap: var(--wpds-dimension-gap-md);
+			row-gap: var(--wpds-dimension-gap-xs);
+			flex-wrap: wrap;
+
+			&:empty {
+				display: none;
+			}
+
+			.dataviews-view-picker-activity__item-field {
+				&:has(.dataviews-view-picker-activity__item-field-value:empty) {
+					display: none;
+				}
+			}
+
+			.dataviews-view-picker-activity__item-field-value {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	// Timeline connector line
+	.dataviews-view-picker-activity__item-type {
+		align-self: stretch;
+		flex-shrink: 0;
+
+		&::after {
+			content: "";
+			flex: 1 1 auto;
+			width: 1px;
+			margin: 0 auto;
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+
+		&::before {
+			content: "";
+			flex: 0 0 auto;
+			width: 1px;
+			margin: 0 auto;
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+
+	// First and last item timeline lines
+	.dataviews-view-picker-activity__item:first-child {
+		.dataviews-view-picker-activity__item-type {
+			&::before {
+				visibility: hidden;
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type,
+	& > .dataviews-view-picker-activity__item:last-child {
+		.dataviews-view-picker-activity__item-type {
+			&::after {
+				background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 20%, transparent) 60%, transparent 100%);
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity-group__header {
+		font-size: var(--wpds-typography-font-size-lg);
+		font-weight: var(--wpds-typography-font-weight-medium);
+		color: var(--wpds-color-foreground-content-neutral-weak);
+		margin: 0 0 var(--wpds-dimension-gap-sm) 0;
+		padding: 0;
+		padding-inline-start: var(--wpds-dimension-padding-2xl);
+	}
+
+	// Bullet/icon styling
+	.dataviews-view-picker-activity__item-type-icon {
+		overflow: hidden;
+		flex-shrink: 0;
+		// Transparent so the row tint shows through the corners around the round media.
+		background-color: transparent;
+
+		img,
+		svg,
+		.dataviews-view-picker-activity__item-bullet {
+			display: block;
+			width: 100%;
+			height: 100%;
+			margin: 0 auto;
+			object-fit: cover;
+			border-radius: 50%;
+			box-sizing: border-box;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-surface-neutral);
+		}
+
+		svg {
+			padding: var(--wpds-dimension-padding-xs);
+		}
+
+		.dataviews-view-picker-activity__item-bullet {
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+}

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

@@ -22,7 +22,7 @@
 		}
 
 		.dataviews-view-picker-grid__title-field {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available. Preserve layout when there is no ellipsis button
+			min-height: var(--wpds-dimension-size-sm); // TODO: Preserve layout when there is no ellipsis button
 			overflow: hidden;
 			align-content: center;
 			text-align: start;
@@ -35,16 +35,16 @@
 
 		&.is-selected {
 			.dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
-				color: var(--wpds-color-fg-content-neutral);
+				color: var(--wpds-color-foreground-content-neutral);
 			}
 		}
 		&.is-selected .dataviews-view-picker-grid__media::after {
 			box-shadow:
 				inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-interactive-brand),
-				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-bg-surface-neutral-strong);
+				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-background-surface-neutral-strong);
 		}
 		.dataviews-view-picker-grid__media:focus::after {
-			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);
 		}
 	}
 
@@ -56,7 +56,7 @@
 		}
 
 		[data-active-item="true"] {
-			outline: 2px solid var(--wpds-color-stroke-focus-brand);
+			outline: 2px solid var(--wpds-color-stroke-focus);
 		}
 	}
 
@@ -75,7 +75,7 @@
 		width: 100%;
 		aspect-ratio: 1/1;
 		min-height: 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);
 		position: relative;
 
@@ -108,18 +108,18 @@
 		}
 
 		.dataviews-view-picker-grid__field-value:not(:empty) {
-			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);
 			padding-top: calc(var(--wpds-dimension-base) / 2);
 		}
 
 		.dataviews-view-picker-grid__field {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			align-items: center;
 
 			.dataviews-view-picker-grid__field-name {
 				width: 35%;
-				color: var(--wpds-color-fg-content-neutral-weak);
+				color: var(--wpds-color-foreground-content-neutral-weak);
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -176,7 +176,7 @@
 .dataviews-view-picker-grid-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 calc(var(--wpds-dimension-base) * 12);
 }

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

@@ -18,7 +18,7 @@
 		}
 
 		[data-active-item="true"] {
-			outline: 2px solid var(--wpds-color-stroke-focus-brand);
+			outline: 2px solid var(--wpds-color-stroke-focus);
 		}
 	}
 
@@ -37,15 +37,15 @@
 		cursor: var(--wpds-cursor-control);
 
 		&.is-selected {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
 		}
 
 		&.is-hovered {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
 		}
 
 		&.is-selected.is-hovered {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
 		}
 	}
 }