@wordpress/dataviews 2.2.0 → 4.0.0

package/src/{view-grid.tsx → layouts/grid/index.tsx}

@@ -19,15 +19,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ItemActions from './item-actions';
-import SingleSelectionCheckbox from './single-selection-checkbox';
-import { useHasAPossibleBulkAction } from './bulk-actions';
-import type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';
+import ItemActions from '../../components/dataviews-item-actions';
+import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
+import type { Action, NormalizedField, ViewGridProps } from '../../types';
+import type { SetSelection } from '../../private-types';
 
-interface GridItemProps< Item extends AnyItem > {
+interface GridItemProps< Item > {
 	selection: string[];
-	data: Item[];
-	onSelectionChange: ( items: Item[] ) => void;
+	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
 	item: Item;
 	actions: Action< Item >[];
@@ -38,10 +38,9 @@ interface GridItemProps< Item extends AnyItem > {
 	columnFields?: string[];
 }
 
-function GridItem< Item extends AnyItem >( {
+function GridItem< Item >( {
 	selection,
-	data,
-	onSelectionChange,
+	onChangeSelection,
 	getItemId,
 	item,
 	actions,
@@ -54,6 +53,12 @@ function GridItem< Item extends AnyItem >( {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : null;
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
 	return (
 		<VStack
 			spacing={ 0 }
@@ -68,32 +73,16 @@ function GridItem< Item extends AnyItem >( {
 					if ( ! hasBulkAction ) {
 						return;
 					}
-					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 )
-								);
-							} )
-						);
-					}
+					onChangeSelection(
+						selection.includes( id )
+							? selection.filter( ( itemId ) => id !== itemId )
+							: [ ...selection, id ]
+					);
 				}
 			} }
 		>
 			<div className="dataviews-view-grid__media">
-				{ mediaField?.render( { item } ) }
+				{ renderedMediaField }
 			</div>
 			<HStack
 				justify="space-between"
@@ -102,14 +91,13 @@ function GridItem< Item extends AnyItem >( {
 				<SingleSelectionCheckbox
 					item={ item }
 					selection={ selection }
-					onSelectionChange={ onSelectionChange }
+					onChangeSelection={ onChangeSelection }
 					getItemId={ getItemId }
-					data={ data }
 					primaryField={ primaryField }
 					disabled={ ! hasBulkAction }
 				/>
 				<HStack className="dataviews-view-grid__primary-field">
-					{ primaryField?.render( { item } ) }
+					{ renderedPrimaryField }
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
@@ -122,32 +110,20 @@ function GridItem< Item extends AnyItem >( {
 					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 }
+								<field.render item={ item } />
 							</FlexItem>
 						);
 					} ) }
 				</HStack>
 			) }
 			{ !! visibleFields?.length && (
-				<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
+				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
 					{ visibleFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<Flex
 								className={ clsx(
@@ -169,13 +145,13 @@ function GridItem< Item extends AnyItem >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
+										{ field.label }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"
 										style={ { maxHeight: 'none' } }
 									>
-										{ renderedValue }
+										<field.render item={ item } />
 									</FlexItem>
 								</>
 							</Flex>
@@ -187,35 +163,38 @@ function GridItem< Item extends AnyItem >( {
 	);
 }
 
-export default function ViewGrid< Item extends AnyItem >( {
+export default function ViewGrid< Item >( {
 	actions,
 	data,
 	fields,
 	getItemId,
 	isLoading,
-	onSelectionChange,
+	onChangeSelection,
 	selection,
 	view,
+	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
-		( field ) => field.id === view.layout.mediaField
+		( field ) => field.id === view.layout?.mediaField
 	);
 	const primaryField = fields.find(
-		( field ) => field.id === view.layout.primaryField
+		( field ) => field.id === view.layout?.primaryField
 	);
+	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	const { visibleFields, badgeFields } = fields.reduce(
 		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
 			if (
-				view.hiddenFields.includes( field.id ) ||
-				[ view.layout.mediaField, view.layout.primaryField ].includes(
-					field.id
-				)
+				! viewFields.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 )
+			const key = view.layout?.badgeFields?.includes( field.id )
 				? 'badgeFields'
 				: 'visibleFields';
 			accumulator[ key ].push( field );
@@ -224,6 +203,9 @@ export default function ViewGrid< Item extends AnyItem >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
+	const gridStyle = density
+		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+		: {};
 	return (
 		<>
 			{ hasData && (
@@ -232,6 +214,7 @@ export default function ViewGrid< Item extends AnyItem >( {
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
+					style={ gridStyle }
 					aria-busy={ isLoading }
 				>
 					{ data.map( ( item ) => {
@@ -239,8 +222,7 @@ export default function ViewGrid< Item extends AnyItem >( {
 							<GridItem
 								key={ getItemId( item ) }
 								selection={ selection }
-								data={ data }
-								onSelectionChange={ onSelectionChange }
+								onChangeSelection={ onChangeSelection }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }
@@ -248,7 +230,7 @@ export default function ViewGrid< Item extends AnyItem >( {
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
 								badgeFields={ badgeFields }
-								columnFields={ view.layout.columnFields }
+								columnFields={ view.layout?.columnFields }
 							/>
 						);
 					} ) }

package/src/layouts/grid/style.scss

@@ -0,0 +1,140 @@
+.dataviews-view-grid {
+	margin-bottom: auto;
+	grid-template-rows: max-content;
+	padding: 0 $grid-unit-60 $grid-unit-30;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+
+	.dataviews-view-grid__card {
+		height: 100%;
+		justify-content: flex-start;
+
+		.dataviews-view-grid__title-actions {
+			padding: $grid-unit-10 0 $grid-unit-05;
+		}
+
+		.dataviews-view-grid__primary-field {
+			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+		}
+
+		&.is-selected {
+			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+		position: relative;
+
+		img {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+			pointer-events: none;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		&:not(:empty) {
+			padding: 0 0 $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field {
+			align-items: flex-start;
+			min-height: $grid-unit-30;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			&.is-column {
+				& + .is-row {
+					margin-top: $grid-unit-05;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
+				color: $gray-700;
+			}
+		}
+	}
+
+	.dataviews-view-grid__badge-fields {
+		&:not(:empty) {
+			padding-bottom: $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field-value {
+			width: fit-content;
+			background: $gray-100;
+			padding: 0 $grid-unit-10;
+			min-height: $grid-unit-30;
+			border-radius: $radius-block-ui;
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+		}
+	}
+}
+
+.dataviews-view-grid.dataviews-view-grid {
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+
+	@include break-xhuge() {
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+}
+
+.dataviews-density-picker__range-control {
+	width: 200px;
+}
+
+.dataviews-view-grid__field-value:empty,
+.dataviews-view-grid__field:empty {
+	display: none;
+}

package/src/layouts/index.ts

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './table';
+import ViewGrid from './grid';
+import ViewList from './list';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
+import type { View } from '../types';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];
+
+export function getMandatoryFields( view: View ): string[] {
+	if ( view.type === 'table' ) {
+		return [ view.layout?.primaryField ]
+			.concat(
+				view.layout?.combinedFields?.flatMap(
+					( field ) => field.children
+				) ?? []
+			)
+			.filter( ( item ): item is string => !! item );
+	}
+
+	if ( view.type === 'grid' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	if ( view.type === 'list' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	return [];
+}

package/src/{view-list.tsx → layouts/list/index.tsx}

@@ -32,12 +32,14 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, AnyItem, NormalizedField, ViewListProps } from './types';
-
-import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
+import { unlock } from '../../lock-unlock';
+import {
+	ActionsDropdownMenuGroup,
+	ActionModal,
+} from '../../components/dataviews-item-actions';
+import type { Action, NormalizedField, ViewListProps } from '../../types';
 
-interface ListViewItemProps< Item extends AnyItem > {
+interface ListViewItemProps< Item > {
 	actions: Action< Item >[];
 	id?: string;
 	isSelected: boolean;
@@ -57,7 +59,7 @@ const {
 	DropdownMenuV2: DropdownMenu,
 } = unlock( componentsPrivateApis );
 
-function ListItem< Item extends AnyItem >( {
+function ListItem< Item >( {
 	actions,
 	id,
 	isSelected,
@@ -113,6 +115,16 @@ function ListItem< Item extends AnyItem >( {
 			? primaryAction.label
 			: primaryAction.label( [ item ] ) );
 
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : (
+		<div className="dataviews-view-list__media-placeholder"></div>
+	);
+
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
+
 	return (
 		<CompositeRow
 			ref={ itemRef }
@@ -148,16 +160,17 @@ function ListItem< Item extends AnyItem >( {
 							alignment="flex-start"
 						>
 							<div className="dataviews-view-list__media-wrapper">
-								{ mediaField?.render( { item } ) || (
-									<div className="dataviews-view-list__media-placeholder"></div>
-								) }
+								{ renderedMediaField }
 							</div>
-							<VStack spacing={ 0 }>
+							<VStack
+								spacing={ 1 }
+								className="dataviews-view-list__field-wrapper"
+							>
 								<span
 									className="dataviews-view-list__primary-field"
 									id={ labelId }
 								>
-									{ primaryField?.render( { item } ) }
+									{ renderedPrimaryField }
 								</span>
 								<div
 									className="dataviews-view-list__fields"
@@ -172,10 +185,10 @@ function ListItem< Item extends AnyItem >( {
 												as="span"
 												className="dataviews-view-list__field-label"
 											>
-												{ field.header }
+												{ field.label }
 											</VisuallyHidden>
 											<span className="dataviews-view-list__field-value">
-												{ field.render( { item } ) }
+												<field.render item={ item } />
 											</span>
 										</div>
 									) ) }
@@ -186,7 +199,7 @@ function ListItem< Item extends AnyItem >( {
 				</div>
 				{ eligibleActions?.length > 0 && (
 					<HStack
-						spacing={ 1 }
+						spacing={ 3 }
 						justify="flex-end"
 						className="dataviews-view-list__item-actions"
 						style={ {
@@ -205,7 +218,7 @@ function ListItem< Item extends AnyItem >( {
 											isDestructive={
 												primaryAction.isDestructive
 											}
-											size="compact"
+											size="small"
 											onClick={ () =>
 												setIsModalOpen( true )
 											}
@@ -236,7 +249,7 @@ function ListItem< Item extends AnyItem >( {
 												isDestructive={
 													primaryAction.isDestructive
 												}
-												size="compact"
+												size="small"
 												onClick={ () => {
 													primaryAction.callback(
 														[ item ],
@@ -255,10 +268,10 @@ function ListItem< Item extends AnyItem >( {
 										store={ store }
 										render={
 											<Button
-												size="compact"
+												size="small"
 												icon={ moreVertical }
 												label={ __( 'Actions' ) }
-												__experimentalIsFocusable
+												accessibleWhenDisabled
 												disabled={ ! actions.length }
 												onKeyDown={ ( event: {
 													key: string;
@@ -303,16 +316,14 @@ function ListItem< Item extends AnyItem >( {
 	);
 }
 
-export default function ViewList< Item extends AnyItem >(
-	props: ViewListProps< Item >
-) {
+export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const {
 		actions,
 		data,
 		fields,
 		getItemId,
 		isLoading,
-		onSelectionChange,
+		onChangeSelection,
 		selection,
 		view,
 	} = props;
@@ -322,23 +333,22 @@ export default function ViewList< Item extends AnyItem >(
 	);
 
 	const mediaField = fields.find(
-		( field ) => field.id === view.layout.mediaField
+		( field ) => field.id === view.layout?.mediaField
 	);
 	const primaryField = fields.find(
-		( field ) => field.id === view.layout.primaryField
+		( field ) => field.id === view.layout?.primaryField
 	);
+	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	const visibleFields = fields.filter(
 		( field ) =>
-			! view.hiddenFields.includes( field.id ) &&
-			! [ view.layout.primaryField, view.layout.mediaField ].includes(
+			viewFields.includes( field.id ) &&
+			! [ view.layout?.primaryField, view.layout?.mediaField ].includes(
 				field.id
 			)
 	);
 
-	const onSelect = useCallback(
-		( item: Item ) => onSelectionChange( [ item ] ),
-		[ onSelectionChange ]
-	);
+	const onSelect = ( item: Item ) =>
+		onChangeSelection( [ getItemId( item ) ] );
 
 	const getItemDomId = useCallback(
 		( item?: Item ) =>