@wordpress/dataviews 0.3.0 → 0.4.0

package/src/style.scss

@@ -18,6 +18,10 @@
 	}
 }
 
+.dataviews-filters__view-actions.components-h-stack {
+	align-items: center;
+}
+
 .dataviews-filters-button {
 	position: relative;
 }
@@ -55,6 +59,10 @@
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
+.dataviews-view-table-wrapper {
+	overflow-x: auto;
+}
+
 .dataviews-view-table {
 	width: 100%;
 	text-indent: 0;
@@ -77,10 +85,23 @@
 	td,
 	th {
 		padding: $grid-unit-15;
-		min-width: 160px;
+		white-space: nowrap;
+
+		@include break-huge() {
+			min-width: 200px;
+		}
+
 		&[data-field-id="actions"] {
 			text-align: right;
 		}
+
+		&.dataviews-view-table__checkbox-column {
+			padding-right: 0;
+		}
+
+		.components-checkbox-control__input-container {
+			margin: $grid-unit-05;
+		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
@@ -109,8 +130,32 @@
 		}
 
 		&:hover {
-			td {
-				background-color: #f8f8f8;
+			background-color: #f8f8f8;
+		}
+
+		.components-checkbox-control__input {
+			opacity: 0;
+
+			&:checked,
+			&:indeterminate,
+			&:focus {
+				opacity: 1;
+			}
+		}
+
+		&:focus-within,
+		&:hover {
+			.components-checkbox-control__input {
+				opacity: 1;
+			}
+		}
+
+		&.is-selected {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-700;
+
+			&:hover {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 			}
 		}
 	}
@@ -132,7 +177,16 @@
 			padding-left: $grid-unit-05;
 		}
 	}
-
+	tbody {
+		td {
+			vertical-align: top;
+		}
+		.dataviews-view-table__cell-content-wrapper {
+			min-height: $grid-unit-40;
+			display: flex;
+			align-items: center;
+		}
+	}
 	.dataviews-view-table-header-button {
 		padding: $grid-unit-05 $grid-unit-10;
 		font-size: 11px;
@@ -155,6 +209,48 @@
 	.dataviews-view-table-header {
 		padding-left: $grid-unit-05;
 	}
+
+	.dataviews-view-table__actions-column {
+		width: 1%;
+	}
+}
+
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-900;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	display: block;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		color: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+
+		&:hover {
+			color: $gray-900;
+		}
+	}
+
+	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%;
+	}
 }
 
 .dataviews-view-grid {
@@ -171,22 +267,17 @@
 	}
 
 	.dataviews-view-grid__card {
-		.dataviews-view-grid__primary-field {
-			.dataviews-view-grid__title-field {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: block;
-				font-size: $default-font-size;
-				width: 100%;
-			}
+		border-radius: $radius-block-ui * 2;
+		border: 1px solid $gray-200;
+		height: 100%;
+		justify-content: flex-start;
 
-			.dataviews-view-grid__title-field a,
-			button.dataviews-view-grid__title-field {
-				font-weight: 500;
-				color: $gray-900;
-				text-decoration: none;
-			}
+		.dataviews-view-grid__title-actions {
+			padding: 0 $grid-unit-05;
+		}
+
+		.dataviews-view-grid__primary-field {
+			min-height: $grid-unit-50;
 		}
 	}
 
@@ -194,11 +285,11 @@
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-		border-radius: $radius-block-ui * 2;
-		overflow: hidden;
+		border-bottom: 1px solid $gray-200;
+		background-color: $gray-100;
+		border-radius: 3px 3px 0 0;
 
-		> * {
+		img {
 			object-fit: cover;
 			width: 100%;
 			height: 100%;
@@ -206,7 +297,7 @@
 	}
 
 	.dataviews-view-grid__primary-field {
-		min-height: $grid-unit-30;
+		padding: $grid-unit-10;
 	}
 
 	.dataviews-view-grid__fields {
@@ -214,12 +305,14 @@
 		font-size: 12px;
 		line-height: 16px;
 
+		&:not(:empty) {
+			padding: $grid-unit-15;
+			padding-top: 0;
+		}
+
 		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-header {
-				color: $gray-700;
-			}
 			.dataviews-view-grid__field-value {
-				color: $gray-900;
+				color: $gray-700;
 			}
 		}
 	}
@@ -251,6 +344,7 @@
 		&:not(.is-selected):hover {
 			color: var(--wp-admin-theme-color);
 
+			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
@@ -263,6 +357,7 @@
 			background-color: var(--wp-admin-theme-color);
 			color: $white;
 
+			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields,
 			.components-button {
 				color: $white;
@@ -299,11 +394,19 @@
 	}
 
 	.dataviews-view-list__media-wrapper {
-		min-width: $grid-unit-40;
+		width: $grid-unit-40;
 		height: $grid-unit-40;
 		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
+		flex-shrink: 0;
+		background-color: $gray-100;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
 
 		&::after {
 			content: "";
@@ -335,6 +438,10 @@
 			&:last-child {
 				margin-right: 0;
 			}
+
+			&:empty {
+				display: none;
+			}
 		}
 	}
 
@@ -373,7 +480,23 @@
 	padding: 0 $grid-unit-40;
 }
 
+.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-filters__custom-menu-radio-item-prefix {
 	display: block;
 	width: 24px;
 }
+
+.dataviews-bulk-edit-button.components-button {
+	flex-shrink: 0;
+}

package/src/view-actions.js

@@ -7,12 +7,13 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { memo } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants';
+import { VIEW_LAYOUTS, SORTING_DIRECTIONS } from './constants';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -260,24 +261,17 @@ const ViewActions = memo( function ViewActions( {
 			trigger={
 				<Button
 					size="compact"
-					icon={
-						VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
-							?.icon ||
-						VIEW_LAYOUTS.find( ( v ) => v.type === LAYOUT_TABLE )
-							.icon
-					}
+					icon={ settings }
 					label={ __( 'View options' ) }
 				/>
 			}
 		>
 			<DropdownMenuGroup>
-				{ window?.__experimentalAdminViews && (
-					<ViewTypeMenu
-						view={ view }
-						onChangeView={ onChangeView }
-						supportedLayouts={ supportedLayouts }
-					/>
-				) }
+				<ViewTypeMenu
+					view={ view }
+					onChangeView={ onChangeView }
+					supportedLayouts={ supportedLayouts }
+				/>
 				<SortMenu
 					fields={ fields }
 					view={ view }

package/src/view-grid.js

@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import {
-	FlexBlock,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	Tooltip,
 } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -39,14 +39,14 @@ export default function ViewGrid( {
 	const usedData = deferredRendering ? shownData : data;
 	return (
 		<Grid
-			gap={ 8 }
+			gap={ 6 }
 			columns={ 2 }
 			alignment="top"
 			className="dataviews-view-grid"
 		>
 			{ usedData.map( ( item ) => (
 				<VStack
-					spacing={ 3 }
+					spacing={ 0 }
 					key={ getItemId( item ) }
 					className="dataviews-view-grid__card"
 				>
@@ -54,12 +54,12 @@ export default function ViewGrid( {
 						{ mediaField?.render( { item } ) }
 					</div>
 					<HStack
-						className="dataviews-view-grid__primary-field"
 						justify="space-between"
+						className="dataviews-view-grid__title-actions"
 					>
-						<FlexBlock>
+						<HStack className="dataviews-view-grid__primary-field">
 							{ primaryField?.render( { item } ) }
-						</FlexBlock>
+						</HStack>
 						<ItemActions
 							item={ item }
 							actions={ actions }
@@ -83,12 +83,14 @@ export default function ViewGrid( {
 									key={ field.id }
 									spacing={ 1 }
 								>
-									<div className="dataviews-view-grid__field-header">
-										{ field.header }
-									</div>
-									<div className="dataviews-view-grid__field-value">
-										{ renderedValue }
-									</div>
+									<Tooltip
+										text={ field.header }
+										placement="left"
+									>
+										<div className="dataviews-view-grid__field-value">
+											{ renderedValue }
+										</div>
+									</Tooltip>
 								</VStack>
 							);
 						} ) }

package/src/view-list.js

@@ -20,6 +20,7 @@ export default function ViewList( {
 	view,
 	fields,
 	data,
+	isLoading,
 	getItemId,
 	onSelectionChange,
 	onDetailsChange,
@@ -49,6 +50,22 @@ export default function ViewList( {
 		}
 	};
 
+	const hasData = usedData?.length;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ classNames( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! hasData && ! isLoading,
+				} ) }
+			>
+				{ ! hasData && (
+					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+				) }
+			</div>
+		);
+	}
+
 	return (
 		<ul className="dataviews-view-list">
 			{ usedData.map( ( item ) => {
@@ -75,7 +92,9 @@ export default function ViewList( {
 										) }
 									</div>
 									<VStack spacing={ 1 }>
-										{ primaryField?.render( { item } ) }
+										<span className="dataviews-view-list__primary-field">
+											{ primaryField?.render( { item } ) }
+										</span>
 										<div className="dataviews-view-list__fields">
 											{ visibleFields.map( ( field ) => {
 												return (

package/src/view-table.js

@@ -1,18 +1,19 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { unseen, funnel } from '@wordpress/icons';
 import {
 	Button,
 	Icon,
 	privateApis as componentsPrivateApis,
+	CheckboxControl,
 } from '@wordpress/components';
 import {
 	Children,
@@ -306,6 +307,80 @@ function WithSeparators( { children } ) {
 		) );
 }
 
+function BulkSelectionCheckbox( { selection, onSelectionChange, data } ) {
+	const areAllSelected = selection.length === data.length;
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ areAllSelected }
+			indeterminate={ ! areAllSelected && selection.length }
+			onChange={ () => {
+				if ( areAllSelected ) {
+					onSelectionChange( [] );
+				} else {
+					onSelectionChange( data );
+				}
+			} }
+			label={ areAllSelected ? __( 'Deselect all' ) : __( 'Select all' ) }
+		/>
+	);
+}
+
+function SingleSelectionCheckbox( {
+	selection,
+	onSelectionChange,
+	item,
+	data,
+	getItemId,
+	primaryField,
+} ) {
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	let selectionLabel;
+	if ( primaryField?.getValue && item ) {
+		// eslint-disable-next-line @wordpress/valid-sprintf
+		selectionLabel = sprintf(
+			/* translators: %s: item title. */
+			isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			primaryField.getValue( { item } )
+		);
+	} else {
+		selectionLabel = isSelected
+			? __( 'Select a new item' )
+			: __( 'Deselect item' );
+	}
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ isSelected }
+			label={ selectionLabel }
+			onChange={ () => {
+				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 )
+							);
+						} )
+					);
+				}
+			} }
+		/>
+	);
+}
+
 function ViewTable( {
 	view,
 	onChangeView,
@@ -315,7 +390,10 @@ function ViewTable( {
 	getItemId,
 	isLoading = false,
 	deferredRendering,
+	selection,
+	onSelectionChange,
 } ) {
+	const hasBulkActions = actions?.some( ( action ) => action.supportsBulk );
 	const headerMenuRefs = useRef( new Map() );
 	const headerMenuToFocusRef = useRef();
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState();
@@ -348,23 +426,42 @@ function ViewTable( {
 	const visibleFields = fields.filter(
 		( field ) =>
 			! view.hiddenFields.includes( field.id ) &&
-			! [ view.layout.mediaField, view.layout.primaryField ].includes(
-				field.id
-			)
+			! [ view.layout.mediaField ].includes( field.id )
 	);
 	const usedData = deferredRendering ? asyncData : data;
 	const hasData = !! usedData?.length;
 	const sortValues = { asc: 'ascending', desc: 'descending' };
 
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
+
 	return (
-		<div>
+		<div className="dataviews-view-table-wrapper">
 			<table
 				className="dataviews-view-table"
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
 			>
 				<thead>
-					<tr>
+					<tr className="dataviews-view-table__row">
+						{ hasBulkActions && (
+							<th
+								className="dataviews-view-table__checkbox-column"
+								style={ {
+									width: 20,
+									minWidth: 20,
+								} }
+								data-field-id="selection"
+								scope="col"
+							>
+								<BulkSelectionCheckbox
+									selection={ selection }
+									onSelectionChange={ onSelectionChange }
+									data={ data }
+								/>
+							</th>
+						) }
 						{ visibleFields.map( ( field, index ) => (
 							<th
 								key={ field.id }
@@ -409,7 +506,10 @@ function ViewTable( {
 							</th>
 						) ) }
 						{ !! actions?.length && (
-							<th data-field-id="actions">
+							<th
+								data-field-id="actions"
+								className="dataviews-view-table__actions-column"
+							>
 								<span className="dataviews-view-table-header">
 									{ __( 'Actions' ) }
 								</span>
@@ -419,8 +519,43 @@ function ViewTable( {
 				</thead>
 				<tbody>
 					{ hasData &&
-						usedData.map( ( item ) => (
-							<tr key={ getItemId( item ) }>
+						usedData.map( ( item, index ) => (
+							<tr
+								key={ getItemId( item ) }
+								className={ classnames(
+									'dataviews-view-table__row',
+									{
+										'is-selected': selection.includes(
+											getItemId( item ) || index
+										),
+									}
+								) }
+							>
+								{ hasBulkActions && (
+									<td
+										className="dataviews-view-table__checkbox-column"
+										style={ {
+											width: 20,
+											minWidth: 20,
+										} }
+									>
+										<span className="dataviews-view-table__cell-content-wrapper">
+											<SingleSelectionCheckbox
+												id={
+													getItemId( item ) || index
+												}
+												item={ item }
+												selection={ selection }
+												onSelectionChange={
+													onSelectionChange
+												}
+												getItemId={ getItemId }
+												data={ data }
+												primaryField={ primaryField }
+											/>
+										</span>
+									</td>
+								) }
 								{ visibleFields.map( ( field ) => (
 									<td
 										key={ field.id }
@@ -432,13 +567,24 @@ function ViewTable( {
 												field.maxWidth || undefined,
 										} }
 									>
-										{ field.render( {
-											item,
-										} ) }
+										<span
+											className={ classnames(
+												'dataviews-view-table__cell-content-wrapper',
+												{
+													'dataviews-view-table__primary-field':
+														primaryField?.id ===
+														field.id,
+												}
+											) }
+										>
+											{ field.render( {
+												item,
+											} ) }
+										</span>
 									</td>
 								) ) }
 								{ !! actions?.length && (
-									<td>
+									<td className="dataviews-view-table__actions-column">
 										<ItemActions
 											item={ item }
 											actions={ actions }
@@ -450,7 +596,7 @@ function ViewTable( {
 				</tbody>
 			</table>
 			<div
-				className={ classNames( {
+				className={ classnames( {
 					'dataviews-loading': isLoading,
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }