@wordpress/dataviews 4.11.0 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.11.0",
+	"version": "4.12.0",
 	"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",
@@ -46,15 +46,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/components": "^29.1.0",
-		"@wordpress/compose": "^7.15.0",
-		"@wordpress/data": "^10.15.0",
-		"@wordpress/element": "^6.15.0",
-		"@wordpress/i18n": "^5.15.0",
-		"@wordpress/icons": "^10.15.0",
-		"@wordpress/primitives": "^4.15.0",
-		"@wordpress/private-apis": "^1.15.0",
-		"@wordpress/warning": "^3.15.0",
+		"@wordpress/components": "^29.2.0",
+		"@wordpress/compose": "^7.16.0",
+		"@wordpress/data": "^10.16.0",
+		"@wordpress/element": "^6.16.0",
+		"@wordpress/i18n": "^5.16.0",
+		"@wordpress/icons": "^10.16.0",
+		"@wordpress/primitives": "^4.16.0",
+		"@wordpress/private-apis": "^1.16.0",
+		"@wordpress/warning": "^3.16.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -67,5 +67,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "75a65eb8ffc168a92042544052f46d080a71ea45"
+	"gitHead": "f48b9f56629e400891abb5ae491504de475237ff"
 }

package/src/components/dataviews/style.scss

@@ -18,8 +18,10 @@
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion( "transition" );
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
 }
 
 .dataviews-no-results,
@@ -29,8 +31,10 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion( "transition" );
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
 }
 
 @container (max-width: 430px) {

package/src/components/dataviews-footer/style.scss

@@ -6,8 +6,11 @@
 	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
+
 	z-index: z-index(".dataviews-footer");
 }
 

package/src/components/dataviews-selection-checkbox/index.tsx

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -29,20 +29,11 @@ export default function DataViewsSelectionCheckbox< Item >( {
 }: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const checked = ! disabled && selection.includes( id );
-	let selectionLabel;
-	if ( titleField?.getValue && item ) {
-		// eslint-disable-next-line @wordpress/valid-sprintf
-		selectionLabel = sprintf(
-			checked
-				? /* translators: %s: item title. */ __( 'Deselect item: %s' )
-				: /* translators: %s: item title. */ __( 'Select item: %s' ),
-			titleField.getValue( { item } )
-		);
-	} else {
-		selectionLabel = checked
-			? __( 'Select a new item' )
-			: __( 'Deselect item' );
-	}
+
+	// Fallback label to ensure accessibility
+	const selectionLabel =
+		titleField?.getValue?.( { item } ) || __( '(no title)' );
+
 	return (
 		<CheckboxControl
 			className="dataviews-selection-checkbox"

package/src/components/dataviews-view-config/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,7 +27,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { memo, useContext, useMemo } from '@wordpress/element';
+import { memo, useContext, useMemo, useState } from '@wordpress/element';
 import {
 	chevronDown,
 	chevronUp,
@@ -34,6 +35,7 @@ import {
 	seen,
 	unseen,
 	lock,
+	moreVertical,
 } from '@wordpress/icons';
 import warning from '@wordpress/warning';
 import { useInstanceId } from '@wordpress/compose';
@@ -253,8 +255,66 @@ function ItemsPerPageControl() {
 	);
 }
 
+function PreviewOptions( {
+	previewOptions,
+	onChangePreviewOption,
+	onMenuOpenChange,
+	activeOption,
+}: {
+	previewOptions?: Array< { label: string; id: string } >;
+	onChangePreviewOption?: ( newPreviewOption: string ) => void;
+	onMenuOpenChange: ( isOpen: boolean ) => void;
+	activeOption?: string;
+} ) {
+	const focusPreviewOptionsField = ( id: string ) => {
+		// Focus the visibility button to avoid focus loss.
+		// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
+		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+		setTimeout( () => {
+			const element = document.querySelector(
+				`.dataviews-field-control__field-${ id } .dataviews-field-control__field-preview-options-button`
+			);
+			if ( element instanceof HTMLElement ) {
+				element.focus();
+			}
+		}, 50 );
+	};
+	return (
+		<Menu onOpenChange={ onMenuOpenChange }>
+			<Menu.TriggerButton
+				render={
+					<Button
+						className="dataviews-field-control__field-preview-options-button"
+						size="compact"
+						icon={ moreVertical }
+						label={ __( 'Preview' ) }
+					/>
+				}
+			/>
+			<Menu.Popover>
+				{ previewOptions?.map( ( { id, label } ) => {
+					return (
+						<Menu.RadioItem
+							key={ id }
+							value={ id }
+							checked={ id === activeOption }
+							onChange={ () => {
+								onChangePreviewOption?.( id );
+								focusPreviewOptionsField( id );
+							} }
+						>
+							<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+						</Menu.RadioItem>
+					);
+				} ) }
+			</Menu.Popover>
+		</Menu>
+	);
+}
 function FieldItem( {
 	field,
+	label,
+	description,
 	isVisible,
 	isFirst,
 	isLast,
@@ -262,8 +322,12 @@ function FieldItem( {
 	onToggleVisibility,
 	onMoveUp,
 	onMoveDown,
+	previewOptions,
+	onChangePreviewOption,
 }: {
 	field: NormalizedField< any >;
+	label?: string;
+	description?: string;
 	isVisible: boolean;
 	isFirst?: boolean;
 	isLast?: boolean;
@@ -271,7 +335,12 @@ function FieldItem( {
 	onToggleVisibility?: () => void;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
+	previewOptions?: Array< { label: string; id: string } >;
+	onChangePreviewOption?: ( newPreviewOption: string ) => void;
 } ) {
+	const [ isChangingPreviewOption, setIsChangingPreviewOption ] =
+		useState< boolean >( false );
+
 	const focusVisibilityField = () => {
 		// Focus the visibility button to avoid focus loss.
 		// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
@@ -290,7 +359,17 @@ function FieldItem( {
 		<Item>
 			<HStack
 				expanded
-				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
+				className={ clsx(
+					'dataviews-field-control__field',
+					`dataviews-field-control__field-${ field.id }`,
+					// The actions are hidden when the mouse is not hovering the item, or focus
+					// is outside the item.
+					// For actions that require a popover, a menu etc, that would mean that when the interactive element
+					// opens and the focus goes there the actions would be hidden.
+					// To avoid that we add a class to the item, that makes sure actions are visible while there is some
+					// interaction with the item.
+					{ 'is-interacting': isChangingPreviewOption }
+				) }
 				justify="flex-start"
 			>
 				<span className="dataviews-field-control__icon">
@@ -298,8 +377,15 @@ function FieldItem( {
 						<Icon icon={ lock } />
 					) }
 				</span>
-				<span className="dataviews-field-control__label">
-					{ field.label }
+				<span className="dataviews-field-control__label-sub-label-container">
+					<span className="dataviews-field-control__label">
+						{ label || field.label }
+					</span>
+					{ description && (
+						<span className="dataviews-field-control__sub-label">
+							{ description }
+						</span>
+					) }
 				</span>
 				<HStack
 					justify="flex-end"
@@ -368,6 +454,14 @@ function FieldItem( {
 							}
 						/>
 					) }
+					{ previewOptions && (
+						<PreviewOptions
+							previewOptions={ previewOptions }
+							onChangePreviewOption={ onChangePreviewOption }
+							onMenuOpenChange={ setIsChangingPreviewOption }
+							activeOption={ field.id }
+						/>
+					) }
 				</HStack>
 			</HStack>
 		</Item>
@@ -461,7 +555,8 @@ function FieldControl() {
 	const hiddenFields = fields.filter(
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
-			! togglableFields.includes( f.id )
+			! togglableFields.includes( f.id ) &&
+			f.type !== 'media'
 	);
 	const visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
@@ -471,18 +566,50 @@ function FieldControl() {
 		return null;
 	}
 	const titleField = fields.find( ( f ) => f.id === view.titleField );
-	const mediaField = fields.find( ( f ) => f.id === view.mediaField );
+	const previewField = fields.find( ( f ) => f.id === view.mediaField );
 	const descriptionField = fields.find(
 		( f ) => f.id === view.descriptionField
 	);
+
+	const previewFields = fields.filter( ( f ) => f.type === 'media' );
+
+	let previewFieldUI;
+	if ( previewFields.length > 1 ) {
+		const isPreviewFieldVisible =
+			isDefined( previewField ) && ( view.showMedia ?? true );
+		previewFieldUI = isDefined( previewField ) && (
+			<FieldItem
+				key={ previewField.id }
+				field={ previewField }
+				label={ __( 'Preview' ) }
+				description={ previewField.label }
+				isVisible={ isPreviewFieldVisible }
+				onToggleVisibility={ () => {
+					onChangeView( {
+						...view,
+						showMedia: ! isPreviewFieldVisible,
+					} );
+				} }
+				canMove={ false }
+				previewOptions={ previewFields.map( ( field ) => ( {
+					label: field.label,
+					id: field.id,
+				} ) ) }
+				onChangePreviewOption={ ( newPreviewId ) =>
+					onChangeView( { ...view, mediaField: newPreviewId } )
+				}
+			/>
+		);
+	}
 	const lockedFields = [
 		{
 			field: titleField,
 			isVisibleFlag: 'showTitle',
 		},
 		{
-			field: mediaField,
+			field: previewField,
 			isVisibleFlag: 'showMedia',
+			ui: previewFieldUI,
 		},
 		{
 			field: descriptionField,
@@ -493,12 +620,20 @@ function FieldControl() {
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
-	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+		ui?: ReactNode;
+	} >;
 	const hiddenLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
-	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+		ui?: ReactNode;
+	} >;
 
 	return (
 		<VStack className="dataviews-field-control" spacing={ 6 }>
@@ -507,20 +642,22 @@ function FieldControl() {
 					!! visibleFields?.length ) && (
 					<ItemGroup isBordered isSeparated>
 						{ visibleLockedFields.map(
-							( { field, isVisibleFlag } ) => {
+							( { field, isVisibleFlag, ui } ) => {
 								return (
-									<FieldItem
-										key={ field.id }
-										field={ field }
-										isVisible
-										onToggleVisibility={ () => {
-											onChangeView( {
-												...view,
-												[ isVisibleFlag ]: false,
-											} );
-										} }
-										canMove={ false }
-									/>
+									ui ?? (
+										<FieldItem
+											key={ field.id }
+											field={ field }
+											isVisible
+											onToggleVisibility={ () => {
+												onChangeView( {
+													...view,
+													[ isVisibleFlag ]: false,
+												} );
+											} }
+											canMove={ false }
+										/>
+									)
 								);
 							}
 						) }
@@ -550,20 +687,23 @@ function FieldControl() {
 						<ItemGroup isBordered isSeparated>
 							{ hiddenLockedFields.length > 0 &&
 								hiddenLockedFields.map(
-									( { field, isVisibleFlag } ) => {
+									( { field, isVisibleFlag, ui } ) => {
 										return (
-											<FieldItem
-												key={ field.id }
-												field={ field }
-												isVisible={ false }
-												onToggleVisibility={ () => {
-													onChangeView( {
-														...view,
-														[ isVisibleFlag ]: true,
-													} );
-												} }
-												canMove={ false }
-											/>
+											ui ?? (
+												<FieldItem
+													key={ field.id }
+													field={ field }
+													isVisible={ false }
+													onToggleVisibility={ () => {
+														onChangeView( {
+															...view,
+															[ isVisibleFlag ]:
+																true,
+														} );
+													} }
+													canMove={ false }
+												/>
+											)
 										);
 									}
 								) }

package/src/components/dataviews-view-config/style.scss

@@ -68,7 +68,8 @@
 }
 
 .dataviews-field-control__field:hover,
-.dataviews-field-control__field:focus-within {
+.dataviews-field-control__field:focus-within,
+.dataviews-field-control__field.is-interacting {
 	.dataviews-field-control__actions {
 		position: unset;
 		top: unset;
@@ -80,6 +81,18 @@
 	width: $icon-size;
 }
 
-.dataviews-field-control__label {
+.dataviews-field-control__label-sub-label-container {
 	flex-grow: 1;
 }
+
+.dataviews-field-control__label {
+	display: block;
+}
+
+.dataviews-field-control__sub-label {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+	font-size: 11px;
+	font-style: normal;
+	color: $gray-700;
+}

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

@@ -2,10 +2,11 @@
 	margin-bottom: auto;
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
-	transition: padding ease-out 0.1s;
 	container-type: inline-size;
-	@include reduce-motion("transition");
 
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
 
 	.dataviews-view-grid__card {
 		height: 100%;

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

@@ -174,7 +174,7 @@ function TableRow< Item >( {
 				</td>
 			) }
 			{ columns.map( ( column: string ) => {
-				// Explicits picks the supported styles.
+				// Explicit picks the supported styles.
 				const { width, maxWidth, minWidth } =
 					view.layout?.styles?.[ column ] ?? {};
 
@@ -337,7 +337,7 @@ function ViewTable< Item >( {
 							</th>
 						) }
 						{ columns.map( ( column, index ) => {
-							// Explicits picks the supported styles.
+							// Explicit picks the supported styles.
 							const { width, maxWidth, minWidth } =
 								view.layout?.styles?.[ column ] ?? {};
 							return (

package/src/field-types/integer.tsx

@@ -8,7 +8,7 @@ function sort( a: any, b: any, direction: SortDirection ) {
 }
 
 function isValid( value: any, context?: ValidationContext ) {
-	// TODO: this implicitely means the value is required.
+	// TODO: this implicitly means the value is required.
 	if ( value === '' ) {
 		return false;
 	}

package/src/types.ts

@@ -42,7 +42,7 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type FieldType = 'text' | 'integer' | 'datetime';
+export type FieldType = 'text' | 'integer' | 'datetime' | 'media';
 
 export type ValidationContext = {
 	elements?: Option[];