@wordpress/dataviews 16.0.0 → 16.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "16.0.0",
+	"version": "16.0.1",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,36 +48,39 @@
 		},
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/date": "^5.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/primitives": "^4.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/ui": "^0.15.0",
-		"@wordpress/warning": "^3.48.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/base-styles": "^10.0.1",
+		"@wordpress/components": "^35.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/data": "^10.48.1",
+		"@wordpress/date": "^5.48.1",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/icons": "^14.0.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/primitives": "^4.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/ui": "^0.15.1",
+		"@wordpress/warning": "^3.48.1",
 		"clsx": "^2.1.1",
-		"colord": "^2.7.0",
+		"colord": "^2.9.3",
 		"date-fns": "^4.1.0",
-		"deepmerge": "4.3.1",
+		"deepmerge": "^4.3.1",
 		"fast-deep-equal": "^3.1.3",
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
 		"@storybook/addon-docs": "^10.2.8",
 		"@storybook/react-vite": "^10.2.8",
+		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
 		"storybook": "^10.2.8"
@@ -92,5 +95,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/components/dataviews-layouts/index.ts

@@ -19,6 +19,7 @@ import ViewList from './list';
 import ViewActivity from './activity';
 import ViewPickerGrid from './picker-grid';
 import ViewPickerTable from './picker-table';
+import ViewPickerActivity from './picker-activity';
 import {
 	LAYOUT_GRID,
 	LAYOUT_LIST,
@@ -26,6 +27,7 @@ import {
 	LAYOUT_ACTIVITY,
 	LAYOUT_PICKER_GRID,
 	LAYOUT_PICKER_TABLE,
+	LAYOUT_PICKER_ACTIVITY,
 } from '../../constants';
 import DensityPicker from './utils/density-picker';
 import GridConfigOptions from './utils/grid-config-options';
@@ -75,4 +77,12 @@ export const VIEW_LAYOUTS = [
 		viewConfigOptions: DensityPicker,
 		isPicker: true,
 	},
+	{
+		type: LAYOUT_PICKER_ACTIVITY,
+		label: __( 'Activity' ),
+		component: ViewPickerActivity,
+		icon: scheduled,
+		viewConfigOptions: DensityPicker,
+		isPicker: true,
+	},
 ];

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-brand);
+			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-bg-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: calc(var(--wpds-dimension-base) * 3);
+				}
+			}
+			.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: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+
+				&::before {
+					height: calc(var(--wpds-dimension-base) * 3);
+				}
+			}
+			.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: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+
+				&::before {
+					height: calc(var(--wpds-dimension-base) * 2);
+				}
+			}
+			.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: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+		}
+
+		.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-fg-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-fg-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-view-config/index.tsx

@@ -85,6 +85,7 @@ export function ViewTypeMenu() {
 									case 'table':
 									case 'pickerGrid':
 									case 'pickerTable':
+									case 'pickerActivity':
 									case 'activity':
 										const viewWithoutLayout = { ...view };
 										if ( 'layout' in viewWithoutLayout ) {

package/src/constants.ts

@@ -54,5 +54,6 @@ export const LAYOUT_ACTIVITY = 'activity';
 // Picker view layouts.
 export const LAYOUT_PICKER_GRID = 'pickerGrid';
 export const LAYOUT_PICKER_TABLE = 'pickerTable';
+export const LAYOUT_PICKER_ACTIVITY = 'pickerActivity';
 
 export const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];