@wordpress/dataviews 10.2.0 → 10.3.0

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

@@ -0,0 +1,487 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Spinner, Composite } from '@wordpress/components';
+import {
+	useContext,
+	useEffect,
+	useId,
+	useRef,
+	useState,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import { useIsMultiselectPicker } from '../../components/dataviews-picker/footer';
+import { BulkSelectionCheckbox } from '../../components/dataviews-bulk-actions';
+import { sortValues } from '../../constants';
+import type {
+	NormalizedField,
+	ViewPickerTable as ViewPickerTableType,
+	ViewPickerTableProps,
+} from '../../types';
+import type { SetSelection } from '../../types/private';
+import ColumnHeaderMenu from '../table/column-header-menu';
+import ColumnPrimary from '../table/column-primary';
+import getDataByGroup from '../utils/get-data-by-group';
+
+interface TableColumnFieldProps< Item > {
+	fields: NormalizedField< Item >[];
+	column: string;
+	item: Item;
+	align?: 'start' | 'center' | 'end';
+}
+
+interface TableRowProps< Item > {
+	item: Item;
+	fields: NormalizedField< Item >[];
+	id: string;
+	view: ViewPickerTableType;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	selection: string[];
+	getItemId: ( item: Item ) => string;
+	onChangeSelection: SetSelection;
+	multiselect: boolean;
+	posinset?: number;
+}
+
+function TableColumnField< Item >( {
+	item,
+	fields,
+	column,
+	align,
+}: TableColumnFieldProps< Item > ) {
+	const field = fields.find( ( f ) => f.id === column );
+
+	if ( ! field ) {
+		return null;
+	}
+
+	const className = clsx( 'dataviews-view-table__cell-content-wrapper', {
+		'dataviews-view-table__cell-align-end': align === 'end',
+		'dataviews-view-table__cell-align-center': align === 'center',
+	} );
+
+	return (
+		<div className={ className }>
+			<field.render item={ item } field={ field } />
+		</div>
+	);
+}
+
+function TableRow< Item >( {
+	item,
+	fields,
+	id,
+	view,
+	titleField,
+	mediaField,
+	descriptionField,
+	selection,
+	getItemId,
+	onChangeSelection,
+	multiselect,
+	posinset,
+}: TableRowProps< Item > ) {
+	const { paginationInfo } = useContext( DataViewsContext );
+	const isSelected = selection.includes( id );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const {
+		showTitle = true,
+		showMedia = true,
+		showDescription = true,
+		infiniteScrollEnabled,
+	} = view;
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	const columns = view.fields ?? [];
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
+
+	return (
+		<Composite.Item
+			key={ id }
+			render={ ( { children, ...props } ) => (
+				<tr
+					className={ clsx( 'dataviews-view-table__row', {
+						'is-selected': isSelected,
+						'is-hovered': isHovered,
+					} ) }
+					onMouseEnter={ handleMouseEnter }
+					onMouseLeave={ handleMouseLeave }
+					children={ children }
+					{ ...props }
+				/>
+			) }
+			aria-selected={ isSelected }
+			aria-setsize={ paginationInfo.totalItems || undefined }
+			aria-posinset={ posinset }
+			role={ infiniteScrollEnabled ? 'article' : 'option' }
+			onClick={ () => {
+				if ( isSelected ) {
+					onChangeSelection(
+						selection.filter( ( itemId ) => id !== itemId )
+					);
+				} else {
+					const newSelection = multiselect
+						? [ ...selection, id ]
+						: [ id ];
+					onChangeSelection( newSelection );
+				}
+			} }
+		>
+			<td
+				className="dataviews-view-table__checkbox-column"
+				role="presentation"
+			>
+				<div className="dataviews-view-table__cell-content-wrapper">
+					<DataViewsSelectionCheckbox
+						item={ item }
+						selection={ selection }
+						onChangeSelection={ onChangeSelection }
+						getItemId={ getItemId }
+						titleField={ titleField }
+						disabled={ false }
+						aria-hidden
+						tabIndex={ -1 }
+					/>
+				</div>
+			</td>
+
+			{ hasPrimaryColumn && (
+				<td role="presentation">
+					<ColumnPrimary
+						item={ item }
+						titleField={ showTitle ? titleField : undefined }
+						mediaField={ showMedia ? mediaField : undefined }
+						descriptionField={
+							showDescription ? descriptionField : undefined
+						}
+						isItemClickable={ () => false }
+					/>
+				</td>
+			) }
+			{ columns.map( ( column: string ) => {
+				// Explicit picks the supported styles.
+				const { width, maxWidth, minWidth, align } =
+					view.layout?.styles?.[ column ] ?? {};
+
+				return (
+					<td
+						key={ column }
+						style={ {
+							width,
+							maxWidth,
+							minWidth,
+						} }
+						role="presentation"
+					>
+						<TableColumnField
+							fields={ fields }
+							item={ item }
+							column={ column }
+							align={ align }
+						/>
+					</td>
+				);
+			} ) }
+		</Composite.Item>
+	);
+}
+
+function ViewPickerTable< Item >( {
+	actions,
+	data,
+	fields,
+	getItemId,
+	isLoading = false,
+	onChangeView,
+	onChangeSelection,
+	selection,
+	setOpenedFilter,
+	view,
+	className,
+	empty,
+}: ViewPickerTableProps< Item > ) {
+	const headerMenuRefs = useRef<
+		Map< string, { node: HTMLButtonElement; fallback: string } >
+	>( new Map() );
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
+		useState< HTMLButtonElement >();
+	const isMultiselect = useIsMultiselectPicker( actions ) ?? false;
+
+	useEffect( () => {
+		if ( headerMenuToFocusRef.current ) {
+			headerMenuToFocusRef.current.focus();
+			headerMenuToFocusRef.current = undefined;
+		}
+	} );
+
+	const tableNoticeId = useId();
+
+	if ( nextHeaderMenuToFocus ) {
+		// If we need to force focus, we short-circuit rendering here
+		// to prevent any additional work while we handle that.
+		// Clearing out the focus directive is necessary to make sure
+		// future renders don't cause unexpected focus jumps.
+		headerMenuToFocusRef.current = nextHeaderMenuToFocus;
+		setNextHeaderMenuToFocus( undefined );
+		return;
+	}
+
+	const onHide = ( field: NormalizedField< Item > ) => {
+		const hidden = headerMenuRefs.current.get( field.id );
+		const fallback = hidden
+			? headerMenuRefs.current.get( hidden.fallback )
+			: undefined;
+		setNextHeaderMenuToFocus( fallback?.node );
+	};
+
+	const hasData = !! data?.length;
+
+	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 groupField = view.groupByField
+		? fields.find( ( f ) => f.id === view.groupByField )
+		: null;
+	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
+	const columns = view.fields ?? [];
+	const headerMenuRef =
+		( column: string, index: number ) => ( node: HTMLButtonElement ) => {
+			if ( node ) {
+				headerMenuRefs.current.set( column, {
+					node,
+					fallback: columns[ index > 0 ? index - 1 : 1 ],
+				} );
+			} else {
+				headerMenuRefs.current.delete( column );
+			}
+		};
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+
+	return (
+		<>
+			<table
+				className={ clsx(
+					'dataviews-view-table',
+					'dataviews-view-picker-table',
+					className,
+					{
+						[ `has-${ view.layout?.density }-density` ]:
+							view.layout?.density &&
+							[ 'compact', 'comfortable' ].includes(
+								view.layout.density
+							),
+					}
+				) }
+				aria-busy={ isLoading }
+				aria-describedby={ tableNoticeId }
+				role={ isInfiniteScroll ? 'feed' : 'listbox' }
+			>
+				<thead role="presentation">
+					<tr
+						className="dataviews-view-table__row"
+						role="presentation"
+					>
+						<th className="dataviews-view-table__checkbox-column">
+							{ isMultiselect && (
+								<BulkSelectionCheckbox
+									selection={ selection }
+									onChangeSelection={ onChangeSelection }
+									data={ data }
+									actions={ actions }
+									getItemId={ getItemId }
+								/>
+							) }
+						</th>
+						{ hasPrimaryColumn && (
+							<th>
+								{ titleField && (
+									<ColumnHeaderMenu
+										ref={ headerMenuRef(
+											titleField.id,
+											0
+										) }
+										fieldId={ titleField.id }
+										view={ view }
+										fields={ fields }
+										onChangeView={ onChangeView }
+										onHide={ onHide }
+										setOpenedFilter={ setOpenedFilter }
+										canMove={ false }
+									/>
+								) }
+							</th>
+						) }
+						{ columns.map( ( column, index ) => {
+							// Explicit picks the supported styles.
+							const { width, maxWidth, minWidth, align } =
+								view.layout?.styles?.[ column ] ?? {};
+							return (
+								<th
+									key={ column }
+									style={ {
+										width,
+										maxWidth,
+										minWidth,
+										textAlign: align,
+									} }
+									aria-sort={
+										view.sort?.direction &&
+										view.sort?.field === column
+											? sortValues[ view.sort.direction ]
+											: undefined
+									}
+									scope="col"
+								>
+									<ColumnHeaderMenu
+										ref={ headerMenuRef( column, index ) }
+										fieldId={ column }
+										view={ view }
+										fields={ fields }
+										onChangeView={ onChangeView }
+										onHide={ onHide }
+										setOpenedFilter={ setOpenedFilter }
+										canMove={
+											view.layout?.enableMoving ?? true
+										}
+									/>
+								</th>
+							);
+						} ) }
+					</tr>
+				</thead>
+				{ /* Render grouped data if groupByField is specified */ }
+				{ hasData && groupField && dataByGroup ? (
+					Array.from( dataByGroup.entries() ).map(
+						( [ groupName, groupItems ] ) => (
+							<Composite
+								key={ `group-${ groupName }` }
+								virtualFocus
+								orientation="vertical"
+								render={ <tbody role="group" /> }
+							>
+								<tr
+									className="dataviews-view-table__group-header-row"
+									role="presentation"
+								>
+									<td
+										colSpan={
+											columns.length +
+											( hasPrimaryColumn ? 1 : 0 ) +
+											1
+										}
+										className="dataviews-view-table__group-header-cell"
+										role="presentation"
+									>
+										{ 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
+										) }
+									</td>
+								</tr>
+								{ groupItems.map( ( item, index ) => (
+									<TableRow
+										key={ getItemId( item ) }
+										item={ item }
+										fields={ fields }
+										id={
+											getItemId( item ) ||
+											index.toString()
+										}
+										view={ view }
+										titleField={ titleField }
+										mediaField={ mediaField }
+										descriptionField={ descriptionField }
+										selection={ selection }
+										getItemId={ getItemId }
+										onChangeSelection={ onChangeSelection }
+										multiselect={ isMultiselect }
+									/>
+								) ) }
+							</Composite>
+						)
+					)
+				) : (
+					<Composite
+						render={ <tbody role="presentation" /> }
+						virtualFocus
+						orientation="vertical"
+					>
+						{ hasData &&
+							data.map( ( item, index ) => (
+								<TableRow
+									key={ getItemId( item ) }
+									item={ item }
+									fields={ fields }
+									id={ getItemId( item ) || index.toString() }
+									view={ view }
+									titleField={ titleField }
+									mediaField={ mediaField }
+									descriptionField={ descriptionField }
+									selection={ selection }
+									getItemId={ getItemId }
+									onChangeSelection={ onChangeSelection }
+									multiselect={ isMultiselect }
+									posinset={ index + 1 }
+								/>
+							) ) }
+					</Composite>
+				) }
+			</table>
+			<div
+				className={ clsx( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! hasData && ! isLoading,
+				} ) }
+				id={ tableNoticeId }
+			>
+				{ ! hasData &&
+					( isLoading ? (
+						<p>
+							<Spinner />
+						</p>
+					) : (
+						empty
+					) ) }
+				{ hasData && isLoading && (
+					<p className="dataviews-loading-more">
+						<Spinner />
+					</p>
+				) }
+			</div>
+		</>
+	);
+}
+
+export default ViewPickerTable;

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

@@ -0,0 +1,45 @@
+// Picker-specific table styles
+// The table picker mainly reuses the regular table styles from ../table/style.scss
+// Add any picker-specific overrides here if needed in the future.
+
+.dataviews-view-picker-table {
+	tbody:focus-visible {
+		// Only show one focus outline at a time. When focus is on a child element,
+		// hide the table's own focus outline.
+		&[aria-activedescendant] {
+			outline: none;
+		}
+
+		[data-active-item="true"] {
+			outline: 2px solid var(--wp-admin-theme-color);
+		}
+	}
+
+	.dataviews-selection-checkbox {
+		// Added specificity to override table styles.
+		.components-checkbox-control__input.components-checkbox-control__input {
+			// When the dataview is used as a picker, ensure the checkbox can't be clicked on.
+			// Only the row itself is clickable.
+			pointer-events: none;
+			opacity: 1;
+		}
+	}
+
+	// When used in picker context, ensure row selection works as expected
+	.dataviews-view-table__row {
+		cursor: pointer;
+
+		&.is-selected {
+			// Ensure selected rows are visually distinct
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		}
+
+		&.is-hovered {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+		}
+
+		&.is-selected.is-hovered {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+		}
+	}
+}

package/src/dataviews-layouts/table/column-header-menu.tsx

@@ -24,6 +24,7 @@ import type {
 	NormalizedField,
 	SortDirection,
 	ViewTable as ViewTableType,
+	ViewPickerTable as ViewPickerTableType,
 	Operator,
 } from '../../types';
 
@@ -31,9 +32,9 @@ const { Menu } = unlock( componentsPrivateApis );
 
 interface HeaderMenuProps< Item > {
 	fieldId: string;
-	view: ViewTableType;
+	view: ViewTableType | ViewPickerTableType;
 	fields: NormalizedField< Item >[];
-	onChangeView: ( view: ViewTableType ) => void;
+	onChangeView: ( view: ViewTableType | ViewPickerTableType ) => void;
 	onHide: ( field: NormalizedField< Item > ) => void;
 	setOpenedFilter: ( fieldId: string ) => void;
 	canMove?: boolean;

package/src/dataviews-layouts/table/column-primary.tsx

@@ -16,7 +16,6 @@ import {
  */
 import type { NormalizedField } from '../../types';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
-import { sprintf, __ } from '@wordpress/i18n';
 
 function ColumnPrimary< Item >( {
 	item,
@@ -51,12 +50,10 @@ function ColumnPrimary< Item >( {
 					renderItemLink={ renderItemLink }
 					className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media"
 					aria-label={
-						titleField
-							? sprintf(
-									// translators: %s is the item title.
-									__( 'Click item: %s' ),
-									titleField.getValue?.( { item } )
-							  )
+						isItemClickable( item ) &&
+						( !! onClickItem || !! renderItemLink ) &&
+						!! titleField
+							? titleField.getValue?.( { item } )
 							: undefined
 					}
 				>

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

@@ -8,7 +8,7 @@ import type { ComponentProps, ReactElement } from 'react';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Spinner } from '@wordpress/components';
+import { Spinner, Popover } from '@wordpress/components';
 import {
 	useContext,
 	useEffect,
@@ -41,6 +41,7 @@ import ColumnHeaderMenu from './column-header-menu';
 import ColumnPrimary from './column-primary';
 import { useIsHorizontalScrollEnd } from './use-is-horizontal-scroll-end';
 import getDataByGroup from '../utils/get-data-by-group';
+import { PropertiesSection } from '../../components/dataviews-view-config/properties-section';
 
 interface TableColumnFieldProps< Item > {
 	fields: NormalizedField< Item >[];
@@ -296,6 +297,9 @@ function ViewTable< Item >( {
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
 		useState< HTMLButtonElement >();
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
+	const [ contextMenuAnchor, setContextMenuAnchor ] = useState< {
+		getBoundingClientRect: () => DOMRect;
+	} | null >( null );
 
 	useEffect( () => {
 		if ( headerMenuToFocusRef.current ) {
@@ -329,6 +333,27 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
+	const handleHeaderContextMenu = ( event: React.MouseEvent ) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const virtualAnchor = {
+			getBoundingClientRect: () => ( {
+				x: event.clientX,
+				y: event.clientY,
+				top: event.clientY,
+				left: event.clientX,
+				right: event.clientX,
+				bottom: event.clientY,
+				width: 0,
+				height: 0,
+				toJSON: () => ( {} ),
+			} ),
+		};
+		window.requestAnimationFrame( () => {
+			setContextMenuAnchor( virtualAnchor );
+		} );
+	};
+
 	const hasData = !! data?.length;
 
 	const titleField = fields.find( ( field ) => field.id === view.titleField );
@@ -374,12 +399,39 @@ function ViewTable< Item >( {
 				aria-describedby={ tableNoticeId }
 				role={ isInfiniteScroll ? 'feed' : undefined }
 			>
-				<thead>
+				<colgroup>
+					{ hasBulkActions && (
+						<col className="dataviews-view-table__col-checkbox" />
+					) }
+					{ hasPrimaryColumn && (
+						<col className="dataviews-view-table__col-primary" />
+					) }
+					{ columns.map( ( column ) => (
+						<col
+							key={ `col-${ column }` }
+							className={ `dataviews-view-table__col-${ column }` }
+						/>
+					) ) }
+					{ !! actions?.length && (
+						<col className="dataviews-view-table__col-actions" />
+					) }
+				</colgroup>
+				{ contextMenuAnchor && (
+					<Popover
+						anchor={ contextMenuAnchor }
+						onClose={ () => setContextMenuAnchor( null ) }
+						placement="bottom-start"
+					>
+						<PropertiesSection showLabel={ false } />
+					</Popover>
+				) }
+				<thead onContextMenu={ handleHeaderContextMenu }>
 					<tr className="dataviews-view-table__row">
 						{ hasBulkActions && (
 							<th
 								className="dataviews-view-table__checkbox-column"
 								scope="col"
+								onContextMenu={ handleHeaderContextMenu }
 							>
 								<BulkSelectionCheckbox
 									selection={ selection }

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

@@ -47,7 +47,6 @@
 
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
-			width: 1%;
 
 			.dataviews-view-table__cell-content-wrapper {
 				max-width: auto;
@@ -172,6 +171,7 @@
 			min-height: $grid-unit-40;
 			display: flex;
 			align-items: center;
+			white-space: nowrap;
 
 			&.dataviews-view-table__cell-align-end {
 				justify-content: flex-end;
@@ -313,3 +313,8 @@
 		color: $gray-900;
 	}
 }
+
+/* Column width intents via colgroup: make non-primary columns shrink-to-fit */
+.dataviews-view-table col[class^="dataviews-view-table__col-"]:not(.dataviews-view-table__col-primary) {
+	width: 1%;
+}