@wordpress/dataviews 3.0.0 → 4.1.0

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

@@ -0,0 +1,169 @@
+.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;
+		position: relative;
+
+		.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::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.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-value:not(:empty) {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			padding-top: math.div($grid-unit-05, 2);
+		}
+
+		.dataviews-view-grid__field {
+			align-items: flex-start;
+			min-height: $grid-unit-30;
+
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
+			}
+
+			&: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;
+}
+
+.dataviews-view-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+}
+
+.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}

package/src/dataviews-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 → dataviews-layouts/list/index.tsx}

@@ -32,10 +32,12 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, 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 > {
 	actions: Action< Item >[];
@@ -113,6 +115,16 @@ function ListItem< Item >( {
 			? 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 >( {
 							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 >( {
 												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 >( {
 				</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 >( {
 											isDestructive={
 												primaryAction.isDestructive
 											}
-											size="compact"
+											size="small"
 											onClick={ () =>
 												setIsModalOpen( true )
 											}
@@ -236,7 +249,7 @@ function ListItem< Item >( {
 												isDestructive={
 													primaryAction.isDestructive
 												}
-												size="compact"
+												size="small"
 												onClick={ () => {
 													primaryAction.callback(
 														[ item ],
@@ -255,7 +268,7 @@ function ListItem< Item >( {
 										store={ store }
 										render={
 											<Button
-												size="compact"
+												size="small"
 												icon={ moreVertical }
 												label={ __( 'Actions' ) }
 												accessibleWhenDisabled
@@ -310,7 +323,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		fields,
 		getItemId,
 		isLoading,
-		onSelectionChange,
+		onChangeSelection,
 		selection,
 		view,
 	} = props;
@@ -335,7 +348,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	);
 
 	const onSelect = ( item: Item ) =>
-		onSelectionChange( [ getItemId( item ) ] );
+		onChangeSelection( [ getItemId( item ) ] );
 
 	const getItemDomId = useCallback(
 		( item?: Item ) =>

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

@@ -0,0 +1,192 @@
+.dataviews-view-list {
+	margin: 0 0 auto;
+
+	li {
+		margin: 0;
+		cursor: pointer;
+		border-top: 1px solid $gray-100;
+
+		.dataviews-view-list__item-wrapper {
+			position: relative;
+			border-radius: $grid-unit-05;
+
+			> * {
+				width: 100%;
+			}
+		}
+
+		.dataviews-view-list__item-actions {
+			position: absolute;
+			top: $grid-unit-20;
+			right: 0;
+
+
+			> div {
+				height: $button-size-small;
+			}
+
+			.components-button {
+				opacity: 0;
+			}
+		}
+
+		&:has(.dataviews-view-list__fields:empty) {
+			.dataviews-view-list__item-actions {
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions {
+				background: #f8f8f8;
+				padding-left: $grid-unit-10;
+				margin-right: $grid-unit-30;
+				box-shadow: -12px 0 8px 0 #f8f8f8;
+
+				.components-button {
+					opacity: 1;
+					position: static;
+				}
+			}
+		}
+
+		&.is-selected {
+			.dataviews-view-list__item-actions {
+				background-color: rgb(247 248 255);
+				box-shadow: -12px 0 8px 0 rgb(247 248 255);
+			}
+		}
+
+		&.is-selected.is-selected {
+			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+
+			& + li {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
+			&:hover,
+			&:focus-within {
+				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+	}
+
+	li.is-selected,
+	li.is-selected:focus-within {
+		.dataviews-view-list__item-wrapper {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
+
+			.dataviews-view-list__primary-field,
+			.dataviews-view-list__fields {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.dataviews-view-list__item {
+		padding: $grid-unit-20 $grid-unit-30;
+		width: 100%;
+		scroll-margin: $grid-unit-10 0;
+
+		&:focus-visible {
+			&::before {
+				position: absolute;
+				content: "";
+				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				right: var(--wp-admin-border-width-focus);
+				bottom: var(--wp-admin-border-width-focus);
+				left: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui;
+			}
+		}
+		.dataviews-view-list__primary-field {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-30;
+			overflow: hidden;
+		}
+	}
+
+	.dataviews-view-list__media-wrapper {
+		width: $grid-unit-05 * 13;
+		height: $grid-unit-05 * 13;
+		overflow: hidden;
+		position: relative;
+		flex-shrink: 0;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&::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;
+		}
+	}
+
+	.dataviews-view-list__media-placeholder {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+		background-color: $gray-200;
+	}
+
+	.dataviews-view-list__field-wrapper {
+		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+	}
+
+	.dataviews-view-list__fields {
+		color: $gray-700;
+		display: flex;
+		gap: $grid-unit-15;
+		row-gap: $grid-unit-05;
+		flex-wrap: wrap;
+		font-size: 12px;
+
+		&:empty {
+			display: none;
+		}
+
+		.dataviews-view-list__field {
+			&:has(.dataviews-view-list__field-value:empty) {
+				display: none;
+			}
+		}
+
+		.dataviews-view-list__field-value {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	& + .dataviews-pagination {
+		justify-content: space-between;
+	}
+}