@wordpress/dataviews 0.9.0 → 1.0.0

package/src/view-grid.js

@@ -15,7 +15,6 @@ import {
 	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -35,7 +34,8 @@ function GridItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
-	displayAsColumnFields,
+	badgeFields,
+	columnFields,
 } ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -100,46 +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 (
-						<Flex
-							className={ classnames(
-								'dataviews-view-grid__field',
-								displayAsColumnFields?.includes( field.id )
-									? 'is-column'
-									: 'is-row'
-							) }
-							key={ field.id }
-							gap={ 1 }
-							justify="flex-start"
-							expanded
-							style={ { height: 'auto' } }
-							direction={
-								displayAsColumnFields?.includes( field.id )
-									? 'column'
-									: 'row'
-							}
-						>
-							<FlexItem className="dataviews-view-grid__field-name">
-								{ field.header }
-							</FlexItem>
+			{ !! 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
-								className="dataviews-view-grid__field-value"
-								style={ { maxHeight: 'none' } }
+								key={ field.id }
+								className={ 'dataviews-view-grid__field-value' }
 							>
 								{ renderedValue }
 							</FlexItem>
-						</Flex>
-					);
-				} ) }
-			</VStack>
+						);
+					} ) }
+				</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>
 	);
 }
@@ -151,7 +181,6 @@ export default function ViewGrid( {
 	actions,
 	isLoading,
 	getItemId,
-	deferredRendering,
 	selection,
 	onSelectionChange,
 } ) {
@@ -161,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 && (
@@ -181,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 ) }
@@ -194,9 +234,8 @@ export default function ViewGrid( {
 								mediaField={ mediaField }
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
-								displayAsColumnFields={
-									view.layout.displayAsColumnFields
-								}
+								badgeFields={ badgeFields }
+								columnFields={ view.layout.columnFields }
 							/>
 						);
 					} ) }

package/src/view-list.js

@@ -6,17 +6,15 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useAsyncList, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
-	Button,
 	Spinner,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useCallback, useEffect, useRef } from '@wordpress/element';
-import { info } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -36,7 +34,6 @@ function ListItem( {
 	item,
 	isSelected,
 	onSelect,
-	onDetailsChange,
 	mediaField,
 	primaryField,
 	visibleFields,
@@ -118,18 +115,6 @@ function ListItem( {
 						</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>
 	);
@@ -142,15 +127,11 @@ export default function ViewList( {
 	isLoading,
 	getItemId,
 	onSelectionChange,
-	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 ) =>
+	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( item.id )
 	);
 
@@ -182,7 +163,7 @@ export default function ViewList( {
 		defaultActiveId: getItemDomId( selectedItem ),
 	} );
 
-	const hasData = usedData?.length;
+	const hasData = data?.length;
 	if ( ! hasData ) {
 		return (
 			<div
@@ -206,7 +187,7 @@ export default function ViewList( {
 			role="grid"
 			store={ store }
 		>
-			{ usedData.map( ( item ) => {
+			{ data.map( ( item ) => {
 				const id = getItemDomId( item );
 				return (
 					<ListItem
@@ -215,7 +196,6 @@ export default function ViewList( {
 						item={ item }
 						isSelected={ item === selectedItem }
 						onSelect={ onSelect }
-						onDetailsChange={ onDetailsChange }
 						mediaField={ mediaField }
 						primaryField={ primaryField }
 						visibleFields={ visibleFields }

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,
@@ -219,7 +218,9 @@ function BulkSelectionCheckbox( {
 					onSelectionChange( selectableItems );
 				}
 			} }
-			label={ areAllSelected ? __( 'Deselect all' ) : __( 'Select all' ) }
+			aria-label={
+				areAllSelected ? __( 'Deselect all' ) : __( 'Select all' )
+			}
 		/>
 	);
 }
@@ -299,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">
@@ -369,7 +369,6 @@ function ViewTable( {
 	data,
 	getItemId,
 	isLoading = false,
-	deferredRendering,
 	selection,
 	onSelectionChange,
 	setOpenedFilter,
@@ -386,7 +385,6 @@ function ViewTable( {
 		}
 	} );
 
-	const asyncData = useAsyncList( data );
 	const tableNoticeId = useId();
 
 	if ( nextHeaderMenuToFocus ) {
@@ -409,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(
@@ -430,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"
@@ -502,7 +498,7 @@ function ViewTable( {
 				</thead>
 				<tbody>
 					{ hasData &&
-						usedData.map( ( item, index ) => (
+						data.map( ( item, index ) => (
 							<TableRow
 								key={ getItemId( item ) }
 								item={ item }