@wordpress/dataviews 15.0.0 → 16.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "15.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,43 +48,46 @@
 		},
 		"./build-style/": "./build-style/"
 	},
-	"react-native": "src/index",
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^9.0.0",
-		"@wordpress/components": "^34.0.0",
-		"@wordpress/compose": "^8.0.0",
-		"@wordpress/data": "^10.47.0",
-		"@wordpress/date": "^5.47.0",
-		"@wordpress/deprecated": "^4.47.0",
-		"@wordpress/element": "^7.0.0",
-		"@wordpress/i18n": "^6.20.0",
-		"@wordpress/icons": "^13.2.0",
-		"@wordpress/keycodes": "^4.47.0",
-		"@wordpress/primitives": "^4.47.0",
-		"@wordpress/private-apis": "^1.47.0",
-		"@wordpress/ui": "^0.14.0",
-		"@wordpress/warning": "^3.47.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"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -92,5 +95,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/components/dataform-controls/datetime.tsx

@@ -54,7 +54,7 @@ function CalendarDateTimeControl< Item >( {
 	const inputControlRef = useRef< HTMLInputElement >( null );
 	const validationTimeoutRef =
 		useRef< ReturnType< typeof setTimeout > >( undefined );
-	const previousFocusRef = useRef< Element >( null );
+	const previousFocusRef = useRef< Element | null >( null );
 
 	const { minConstraint, maxConstraint, disabledMatchers } =
 		useDisabledDateMatchers( isValid, parseDateTime );

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

@@ -46,8 +46,10 @@ type DataViewsContextType< Item > = {
 	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	containerWidth: number;
-	containerRef: React.RefObject< HTMLDivElement | null >;
-	resizeObserverRef: React.Ref< HTMLDivElement | null >;
+	containerRef: React.MutableRefObject< HTMLDivElement | null >;
+	resizeObserverRef:
+		| ( ( element?: HTMLDivElement | null ) => void )
+		| React.RefObject< HTMLDivElement >;
 	defaultLayouts: NormalizedSupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;

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