@wordpress/dataviews 0.9.0 → 1.1.0

package/src/style.scss

@@ -92,10 +92,6 @@
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 		}
-
-		.components-checkbox-control__input-container {
-			margin: $grid-unit-05;
-		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
@@ -150,6 +146,14 @@
 			}
 		}
 
+		@media (hover: none) {
+			// Show checkboxes and quick-actions on devices that do not support hover.
+			.components-checkbox-control__input.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
 		&.is-selected {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-700;
@@ -237,7 +241,7 @@
 .dataviews-view-table__primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
-	color: $gray-900;
+	color: $gray-700;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	display: block;
@@ -245,12 +249,12 @@
 
 	a {
 		text-decoration: none;
-		color: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
+		color: $gray-900;
 
 		&:hover {
 			color: var(--wp-admin-theme-color);
@@ -260,13 +264,16 @@
 
 	button.components-button.is-link {
 		text-decoration: none;
-		color: inherit;
 		font-weight: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }
 
@@ -285,25 +292,26 @@
 	}
 
 	.dataviews-view-grid__card {
-		border-radius: $radius-block-ui * 2;
-		border: 1px solid $gray-200;
 		height: 100%;
 		justify-content: flex-start;
 
 		.dataviews-view-grid__title-actions {
-			padding: $grid-unit-05 $grid-unit $grid-unit-05 $grid-unit-05;
+			padding: $grid-unit-10 0 $grid-unit-05;
 		}
 
 		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-50;
+			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
 		}
-		&.is-selected {
-			border-color: var(--wp-admin-theme-color);
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
+		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.page-pages-preview-field__button::after {
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			}
 		}
 	}
 
@@ -311,15 +319,27 @@
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		border-bottom: 1px solid $gray-200;
 		background-color: $gray-100;
-		border-radius: 3px 3px 0 0;
+		border-radius: $grid-unit-05;
+		overflow: hidden;
+		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;
+		}
 	}
 
 	.dataviews-view-grid__fields {
@@ -328,7 +348,7 @@
 		line-height: 16px;
 
 		&:not(:empty) {
-			padding: $grid-unit-15;
+			padding: $grid-unit-15 0;
 			padding-top: 0;
 		}
 
@@ -355,6 +375,23 @@
 			}
 		}
 	}
+
+	.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-list {
@@ -386,6 +423,9 @@
 		}
 
 		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
@@ -492,26 +532,6 @@
 		justify-content: space-between;
 	}
 
-	.dataviews-view-list__details-button {
-		align-self: center;
-		opacity: 0;
-	}
-
-	li.is-selected,
-	li:hover,
-	li:focus-within {
-		.dataviews-view-list__details-button {
-			opacity: 1;
-		}
-	}
-
-	li.is-selected {
-		.dataviews-view-list__details-button {
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
-			}
-		}
-	}
 }
 
 .dataviews-action-modal {
@@ -527,16 +547,14 @@
 	justify-content: center;
 }
 
-.dataviews-view-table-selection-checkbox label {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
+.dataviews-view-table-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {
@@ -548,10 +566,6 @@
 	flex-shrink: 0;
 }
 
-.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
-	margin-left: $grid-unit-10;
-}
-
 .dataviews-filter-summary__popover {
 	.components-popover__content {
 		width: 230px;

package/src/types.ts

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+type Item = Record< string, any >;
+
+interface Option {
+	value: any;
+	label: string;
+}
+
+interface filterByConfig {
+	operators?: Operator[];
+	isPrimary?: boolean;
+}
+
+type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll';
+
+export interface Field {
+	/**
+	 * The unique identifier of the field.
+	 */
+	id: string;
+
+	/**
+	 * The label of the field. Defaults to the id.
+	 */
+	header?: string;
+
+	/**
+	 * Callback used to retrieve the value of the field from the item.
+	 * Defaults to `item[ field.id ]`.
+	 */
+	getValue?: ( { item }: { item: Item } ) => any;
+
+	/**
+	 * Callback used to render the field. Defaults to `field.getValue`.
+	 */
+	render?: ( { item }: { item: Item } ) => ReactNode;
+
+	/**
+	 * The width of the field column.
+	 */
+	width: string | number | undefined;
+
+	/**
+	 * The minimum width of the field column.
+	 */
+	maxWidth: string | number | undefined;
+
+	/**
+	 * The maximum width of the field column.
+	 */
+	minWidth: string | number | undefined;
+
+	/**
+	 * Whether the field is sortable.
+	 */
+	enableSorting: boolean | undefined;
+
+	/**
+	 * Whether the field is searchable.
+	 */
+	enableGlobalSearch: boolean | undefined;
+
+	/**
+	 * Whether the field is filterable.
+	 */
+	enableHiding: boolean | undefined;
+
+	/**
+	 * The list of options to pick from when using the field as a filter.
+	 */
+	elements: Option[] | undefined;
+
+	/**
+	 * Filter config for the field.
+	 */
+	filterBy: filterByConfig | undefined;
+}
+
+export type NormalizedField = Required< Field >;
+
+export type Data = Item[];
+
+export interface Filter {
+	/**
+	 * The field to filter by.
+	 */
+	field: string;
+
+	/**
+	 * The operator to use.
+	 */
+	operator: Operator;
+
+	/**
+	 * The value to filter by.
+	 */
+	value: any;
+}
+
+export interface View {
+	/**
+	 * The layout of the view.
+	 */
+	type: string;
+
+	/**
+	 * The global search term.
+	 */
+	search?: string;
+
+	/**
+	 * The filters to apply.
+	 */
+	filters: Filter[];
+
+	/**
+	 * The sorting configuration.
+	 */
+	sort?: {
+		/**
+		 * The field to sort by.
+		 */
+		field: string;
+
+		/**
+		 * The direction to sort by.
+		 */
+		direction: string;
+	};
+
+	/**
+	 * The active page
+	 */
+	page?: number;
+
+	/**
+	 * The number of items per page
+	 */
+	perPage?: number;
+}

package/src/view-actions.js

@@ -13,7 +13,8 @@ import { settings } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { VIEW_LAYOUTS, SORTING_DIRECTIONS } from './constants';
+import { SORTING_DIRECTIONS } from './constants';
+import { VIEW_LAYOUTS } from './layouts';
 
 const {
 	DropdownMenuV2: DropdownMenu,

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 }