@wordpress/dataviews 0.8.0 → 1.0.0

package/src/view-grid.js

@@ -10,11 +10,11 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Tooltip,
 	Spinner,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -34,6 +34,8 @@ function GridItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
+	badgeFields,
+	columnFields,
 } ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -98,29 +100,76 @@ function GridItem( {
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
-			<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
-				{ visibleFields.map( ( field ) => {
-					const renderedValue = field.render( {
-						item,
-					} );
-					if ( ! renderedValue ) {
-						return null;
-					}
-					return (
-						<VStack
-							className="dataviews-view-grid__field"
-							key={ field.id }
-							spacing={ 1 }
-						>
-							<Tooltip text={ field.header } placement="left">
-								<div className="dataviews-view-grid__field-value">
-									{ renderedValue }
-								</div>
-							</Tooltip>
-						</VStack>
-					);
-				} ) }
-			</VStack>
+			{ !! badgeFields?.length && (
+				<HStack
+					className="dataviews-view-grid__badge-fields"
+					spacing={ 2 }
+					wrap
+					align="top"
+					justify="flex-start"
+				>
+					{ badgeFields.map( ( field ) => {
+						const renderedValue = field.render( {
+							item,
+						} );
+						if ( ! renderedValue ) {
+							return null;
+						}
+						return (
+							<FlexItem
+								key={ field.id }
+								className={ 'dataviews-view-grid__field-value' }
+							>
+								{ renderedValue }
+							</FlexItem>
+						);
+					} ) }
+				</HStack>
+			) }
+			{ !! visibleFields?.length && (
+				<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
+					{ visibleFields.map( ( field ) => {
+						const renderedValue = field.render( {
+							item,
+						} );
+						if ( ! renderedValue ) {
+							return null;
+						}
+						return (
+							<Flex
+								className={ classnames(
+									'dataviews-view-grid__field',
+									columnFields?.includes( field.id )
+										? 'is-column'
+										: 'is-row'
+								) }
+								key={ field.id }
+								gap={ 1 }
+								justify="flex-start"
+								expanded
+								style={ { height: 'auto' } }
+								direction={
+									columnFields?.includes( field.id )
+										? 'column'
+										: 'row'
+								}
+							>
+								<>
+									<FlexItem className="dataviews-view-grid__field-name">
+										{ field.header }
+									</FlexItem>
+									<FlexItem
+										className="dataviews-view-grid__field-value"
+										style={ { maxHeight: 'none' } }
+									>
+										{ renderedValue }
+									</FlexItem>
+								</>
+							</Flex>
+						);
+					} ) }
+				</VStack>
+			) }
 		</VStack>
 	);
 }
@@ -132,7 +181,6 @@ export default function ViewGrid( {
 	actions,
 	isLoading,
 	getItemId,
-	deferredRendering,
 	selection,
 	onSelectionChange,
 } ) {
@@ -142,16 +190,27 @@ export default function ViewGrid( {
 	const primaryField = fields.find(
 		( field ) => field.id === view.layout.primaryField
 	);
-	const visibleFields = fields.filter(
-		( field ) =>
-			! view.hiddenFields.includes( field.id ) &&
-			! [ view.layout.mediaField, view.layout.primaryField ].includes(
-				field.id
-			)
+	const { visibleFields, badgeFields } = fields.reduce(
+		( accumulator, field ) => {
+			if (
+				view.hiddenFields.includes( field.id ) ||
+				[ view.layout.mediaField, view.layout.primaryField ].includes(
+					field.id
+				)
+			) {
+				return accumulator;
+			}
+			// If the field is a badge field, add it to the badgeFields array
+			// otherwise add it to the rest visibleFields array.
+			const key = view.layout.badgeFields?.includes( field.id )
+				? 'badgeFields'
+				: 'visibleFields';
+			accumulator[ key ].push( field );
+			return accumulator;
+		},
+		{ visibleFields: [], badgeFields: [] }
 	);
-	const shownData = useAsyncList( data, { step: 3 } );
-	const usedData = deferredRendering ? shownData : data;
-	const hasData = !! usedData?.length;
+	const hasData = !! data?.length;
 	return (
 		<>
 			{ hasData && (
@@ -162,7 +221,7 @@ export default function ViewGrid( {
 					className="dataviews-view-grid"
 					aria-busy={ isLoading }
 				>
-					{ usedData.map( ( item ) => {
+					{ data.map( ( item ) => {
 						return (
 							<GridItem
 								key={ getItemId( item ) }
@@ -175,6 +234,8 @@ export default function ViewGrid( {
 								mediaField={ mediaField }
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
+								badgeFields={ badgeFields }
+								columnFields={ view.layout.columnFields }
 							/>
 						);
 					} ) }

package/src/view-list.js

@@ -6,17 +6,120 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useAsyncList } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Button,
+	privateApis as componentsPrivateApis,
 	Spinner,
+	VisuallyHidden,
 } from '@wordpress/components';
-import { ENTER, SPACE } from '@wordpress/keycodes';
-import { info } from '@wordpress/icons';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 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,
+	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>
+			</HStack>
+		</CompositeRow>
+	);
+}
+
 export default function ViewList( {
 	view,
 	fields,
@@ -24,12 +127,14 @@ export default function ViewList( {
 	isLoading,
 	getItemId,
 	onSelectionChange,
-	onDetailsChange,
 	selection,
-	deferredRendering,
+	id: preferredId,
 } ) {
-	const shownData = useAsyncList( data, { step: 3 } );
-	const usedData = deferredRendering ? shownData : data;
+	const baseId = useInstanceId( ViewList, 'view-list', preferredId );
+	const selectedItem = data?.findLast( ( item ) =>
+		selection.includes( item.id )
+	);
+
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -44,14 +149,21 @@ 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 hasData = usedData?.length;
+	const getItemDomId = useCallback(
+		( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),
+		[ baseId, getItemId ]
+	);
+
+	const store = useCompositeStore( {
+		defaultActiveId: getItemDomId( selectedItem ),
+	} );
+
+	const hasData = data?.length;
 	if ( ! hasData ) {
 		return (
 			<div
@@ -68,70 +180,28 @@ export default function ViewList( {
 	}
 
 	return (
-		<ul className="dataviews-view-list">
-			{ usedData.map( ( item ) => {
+		<Composite
+			id={ baseId }
+			render={ <ul /> }
+			className="dataviews-view-list"
+			role="grid"
+			store={ store }
+		>
+			{ data.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 }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						visibleFields={ visibleFields }
+					/>
 				);
 			} ) }
-		</ul>
+		</Composite>
 	);
 }

package/src/view-table.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
 import { unseen, funnel } from '@wordpress/icons';
 import {
 	Button,
@@ -34,7 +33,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,
@@ -76,7 +75,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 ) {
@@ -219,7 +218,9 @@ function BulkSelectionCheckbox( {
 					onSelectionChange( selectableItems );
 				}
 			} }
-			label={ areAllSelected ? __( 'Deselect all' ) : __( 'Select all' ) }
+			aria-label={
+				areAllSelected ? __( 'Deselect all' ) : __( 'Select all' )
+			}
 		/>
 	);
 }
@@ -237,7 +238,6 @@ function TableRow( {
 	data,
 } ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
-
 	const isSelected = selection.includes( id );
 
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -250,22 +250,28 @@ function TableRow( {
 		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 }
-			onClickCapture={ ( event ) => {
-				if ( event.ctrlKey || event.metaKey ) {
-					event.stopPropagation();
-					event.preventDefault();
-					if ( ! hasPossibleBulkAction ) {
-						return;
-					}
+			onTouchStart={ () => {
+				isTouchDevice.current = true;
+			} }
+			onClick={ () => {
+				if (
+					! isTouchDevice.current &&
+					document.getSelection().type !== 'Range'
+				) {
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {
@@ -294,8 +300,7 @@ function TableRow( {
 				<td
 					className="dataviews-view-table__checkbox-column"
 					style={ {
-						width: 20,
-						minWidth: 20,
+						width: '1%',
 					} }
 				>
 					<div className="dataviews-view-table__cell-content-wrapper">
@@ -337,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>
 	);
@@ -353,7 +369,6 @@ function ViewTable( {
 	data,
 	getItemId,
 	isLoading = false,
-	deferredRendering,
 	selection,
 	onSelectionChange,
 	setOpenedFilter,
@@ -370,7 +385,6 @@ function ViewTable( {
 		}
 	} );
 
-	const asyncData = useAsyncList( data );
 	const tableNoticeId = useId();
 
 	if ( nextHeaderMenuToFocus ) {
@@ -393,8 +407,7 @@ function ViewTable( {
 			! view.hiddenFields.includes( field.id ) &&
 			! [ view.layout.mediaField ].includes( field.id )
 	);
-	const usedData = deferredRendering ? asyncData : data;
-	const hasData = !! usedData?.length;
+	const hasData = !! data?.length;
 	const sortValues = { asc: 'ascending', desc: 'descending' };
 
 	const primaryField = fields.find(
@@ -414,8 +427,7 @@ function ViewTable( {
 							<th
 								className="dataviews-view-table__checkbox-column"
 								style={ {
-									width: 20,
-									minWidth: 20,
+									width: '1%',
 								} }
 								data-field-id="selection"
 								scope="col"
@@ -486,7 +498,7 @@ function ViewTable( {
 				</thead>
 				<tbody>
 					{ hasData &&
-						usedData.map( ( item, index ) => (
+						data.map( ( item, index ) => (
 							<TableRow
 								key={ getItemId( item ) }
 								item={ item }