@wordpress/dataviews 0.7.0 → 0.9.0

package/src/view-list.js

@@ -6,17 +6,135 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useAsyncList } from '@wordpress/compose';
+import { useAsyncList, useInstanceId } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 	Button,
 	Spinner,
+	VisuallyHidden,
 } from '@wordpress/components';
-import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { info } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const {
+	useCompositeStoreV2: useCompositeStore,
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	CompositeRowV2: CompositeRow,
+} = unlock( componentsPrivateApis );
+
+function ListItem( {
+	id,
+	item,
+	isSelected,
+	onSelect,
+	onDetailsChange,
+	mediaField,
+	primaryField,
+	visibleFields,
+} ) {
+	const itemRef = useRef( null );
+	const labelId = `${ id }-label`;
+	const descriptionId = `${ id }-description`;
+
+	useEffect( () => {
+		if ( isSelected ) {
+			itemRef.current?.scrollIntoView( {
+				behavior: 'auto',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
+		}
+	}, [ isSelected ] );
+
+	return (
+		<CompositeRow
+			ref={ itemRef }
+			render={ <li /> }
+			role="row"
+			className={ classNames( {
+				'is-selected': isSelected,
+			} ) }
+		>
+			<HStack className="dataviews-view-list__item-wrapper">
+				<div role="gridcell">
+					<CompositeItem
+						render={ <div /> }
+						role="button"
+						id={ id }
+						aria-pressed={ isSelected }
+						aria-labelledby={ labelId }
+						aria-describedby={ descriptionId }
+						className="dataviews-view-list__item"
+						onClick={ () => onSelect( item ) }
+					>
+						<HStack
+							spacing={ 3 }
+							justify="start"
+							alignment="flex-start"
+						>
+							<div className="dataviews-view-list__media-wrapper">
+								{ mediaField?.render( { item } ) || (
+									<div className="dataviews-view-list__media-placeholder"></div>
+								) }
+							</div>
+							<VStack spacing={ 1 }>
+								<span
+									className="dataviews-view-list__primary-field"
+									id={ labelId }
+								>
+									{ primaryField?.render( { item } ) }
+								</span>
+								<div
+									className="dataviews-view-list__fields"
+									id={ descriptionId }
+								>
+									{ visibleFields.map( ( field ) => (
+										<div
+											key={ field.id }
+											className="dataviews-view-list__field"
+										>
+											<VisuallyHidden
+												as="span"
+												className="dataviews-view-list__field-label"
+											>
+												{ field.header }
+											</VisuallyHidden>
+											<span className="dataviews-view-list__field-value">
+												{ field.render( { item } ) }
+											</span>
+										</div>
+									) ) }
+								</div>
+							</VStack>
+						</HStack>
+					</CompositeItem>
+				</div>
+				{ onDetailsChange && (
+					<div role="gridcell">
+						<CompositeItem
+							render={ <Button /> }
+							className="dataviews-view-list__details-button"
+							onClick={ () => onDetailsChange( [ item ] ) }
+							icon={ info }
+							label={ __( 'View details' ) }
+							size="compact"
+						/>
+					</div>
+				) }
+			</HStack>
+		</CompositeRow>
+	);
+}
+
 export default function ViewList( {
 	view,
 	fields,
@@ -27,9 +145,15 @@ export default function ViewList( {
 	onDetailsChange,
 	selection,
 	deferredRendering,
+	id: preferredId,
 } ) {
+	const baseId = useInstanceId( ViewList, 'view-list', preferredId );
 	const shownData = useAsyncList( data, { step: 3 } );
 	const usedData = deferredRendering ? shownData : data;
+	const selectedItem = usedData?.findLast( ( item ) =>
+		selection.includes( item.id )
+	);
+
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -44,12 +168,19 @@ export default function ViewList( {
 			)
 	);
 
-	const onEnter = ( item ) => ( event ) => {
-		const { keyCode } = event;
-		if ( [ ENTER, SPACE ].includes( keyCode ) ) {
-			onSelectionChange( [ item ] );
-		}
-	};
+	const onSelect = useCallback(
+		( item ) => onSelectionChange( [ item ] ),
+		[ onSelectionChange ]
+	);
+
+	const getItemDomId = useCallback(
+		( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),
+		[ baseId, getItemId ]
+	);
+
+	const store = useCompositeStore( {
+		defaultActiveId: getItemDomId( selectedItem ),
+	} );
 
 	const hasData = usedData?.length;
 	if ( ! hasData ) {
@@ -68,70 +199,29 @@ export default function ViewList( {
 	}
 
 	return (
-		<ul className="dataviews-view-list">
+		<Composite
+			id={ baseId }
+			render={ <ul /> }
+			className="dataviews-view-list"
+			role="grid"
+			store={ store }
+		>
 			{ usedData.map( ( item ) => {
+				const id = getItemDomId( item );
 				return (
-					<li
-						key={ getItemId( item ) }
-						className={ classNames( {
-							'is-selected': selection.includes( item.id ),
-						} ) }
-					>
-						<HStack className="dataviews-view-list__item-wrapper">
-							<div
-								role="button"
-								tabIndex={ 0 }
-								aria-pressed={ selection.includes( item.id ) }
-								onKeyDown={ onEnter( item ) }
-								className="dataviews-view-list__item"
-								onClick={ () => onSelectionChange( [ item ] ) }
-							>
-								<HStack
-									spacing={ 3 }
-									justify="start"
-									alignment="flex-start"
-								>
-									<div className="dataviews-view-list__media-wrapper">
-										{ mediaField?.render( { item } ) || (
-											<div className="dataviews-view-list__media-placeholder"></div>
-										) }
-									</div>
-									<VStack spacing={ 1 }>
-										<span className="dataviews-view-list__primary-field">
-											{ primaryField?.render( { item } ) }
-										</span>
-										<div className="dataviews-view-list__fields">
-											{ visibleFields.map( ( field ) => {
-												return (
-													<span
-														key={ field.id }
-														className="dataviews-view-list__field"
-													>
-														{ field.render( {
-															item,
-														} ) }
-													</span>
-												);
-											} ) }
-										</div>
-									</VStack>
-								</HStack>
-							</div>
-							{ onDetailsChange && (
-								<Button
-									className="dataviews-view-list__details-button"
-									onClick={ () =>
-										onDetailsChange( [ item ] )
-									}
-									icon={ info }
-									label={ __( 'View details' ) }
-									size="compact"
-								/>
-							) }
-						</HStack>
-					</li>
+					<ListItem
+						key={ id }
+						id={ id }
+						item={ item }
+						isSelected={ item === selectedItem }
+						onSelect={ onSelect }
+						onDetailsChange={ onDetailsChange }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						visibleFields={ visibleFields }
+					/>
 				);
 			} ) }
-		</ul>
+		</Composite>
 	);
 }

package/src/view-table.js

@@ -22,9 +22,9 @@ import {
 	useId,
 	useRef,
 	useState,
+	useMemo,
 	Children,
 	Fragment,
-	useMemo,
 } from '@wordpress/element';
 
 /**
@@ -34,7 +34,7 @@ import SingleSelectionCheckbox from './single-selection-checkbox';
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
 import { sanitizeOperators } from './utils';
-import { ENUMERATION_TYPE, SORTING_DIRECTIONS } from './constants';
+import { SORTING_DIRECTIONS } from './constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
@@ -49,7 +49,7 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-function WithSeparators( { children } ) {
+function WithDropDownMenuSeparators( { children } ) {
 	return Children.toArray( children )
 		.filter( Boolean )
 		.map( ( child, i ) => (
@@ -76,7 +76,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 	// 3. If it's not primary. If it is, it should be already visible.
 	const canAddFilter =
 		! view.filters?.some( ( _filter ) => field.id === _filter.field ) &&
-		field.type === ENUMERATION_TYPE &&
+		!! field.elements?.length &&
 		!! operators.length &&
 		! field.filterBy?.isPrimary;
 	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
@@ -102,7 +102,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 			}
 			style={ { minWidth: '240px' } }
 		>
-			<WithSeparators>
+			<WithDropDownMenuSeparators>
 				{ isSortable && (
 					<DropdownMenuGroup>
 						{ Object.entries( SORTING_DIRECTIONS ).map(
@@ -187,7 +187,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 						</DropdownMenuItemLabel>
 					</DropdownMenuItem>
 				) }
-			</WithSeparators>
+			</WithDropDownMenuSeparators>
 		</DropdownMenu>
 	);
 } );
@@ -237,12 +237,63 @@ function TableRow( {
 	data,
 } ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
+	const isSelected = selection.includes( id );
+
+	const [ isHovered, setIsHovered ] = useState( false );
+
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	// Will be set to true if `onTouchStart` fires. This happens before
+	// `onClick` and can be used to exclude touchscreen devices from certain
+	// behaviours.
+	const isTouchDevice = useRef( false );
+
 	return (
 		<tr
 			className={ classnames( 'dataviews-view-table__row', {
-				'is-selected':
-					hasPossibleBulkAction && selection.includes( id ),
+				'is-selected': hasPossibleBulkAction && isSelected,
+				'is-hovered': isHovered,
+				'has-bulk-actions': hasPossibleBulkAction,
 			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+			onTouchStart={ () => {
+				isTouchDevice.current = true;
+			} }
+			onClick={ () => {
+				if (
+					! isTouchDevice.current &&
+					document.getSelection().type !== 'Range'
+				) {
+					if ( ! isSelected ) {
+						onSelectionChange(
+							data.filter( ( _item ) => {
+								const itemId = getItemId?.( _item );
+								return (
+									itemId === id ||
+									selection.includes( itemId )
+								);
+							} )
+						);
+					} else {
+						onSelectionChange(
+							data.filter( ( _item ) => {
+								const itemId = getItemId?.( _item );
+								return (
+									itemId !== id &&
+									selection.includes( itemId )
+								);
+							} )
+						);
+					}
+				}
+			} }
 		>
 			{ hasBulkActions && (
 				<td
@@ -291,9 +342,20 @@ function TableRow( {
 				</td>
 			) ) }
 			{ !! actions?.length && (
-				<td className="dataviews-view-table__actions-column">
+				// Disable reason: we are not making the element interactive,
+				// but preventing any click events from bubbling up to the
+				// table row. This allows us to add a click handler to the row
+				// itself (to toggle row selection) without erroneously
+				// intercepting click events from ItemActions.
+
+				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+				<td
+					className="dataviews-view-table__actions-column"
+					onClick={ ( e ) => e.stopPropagation() }
+				>
 					<ItemActions item={ item } actions={ actions } />
 				</td>
+				/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			) }
 		</tr>
 	);