@wordpress/dataviews 0.5.2 → 0.5.4

package/build-style/style.css

@@ -117,19 +117,12 @@
 .dataviews-filters__view-actions {
   padding: 12px 32px 0;
 }
-.dataviews-filters__view-actions .components-search-control {
-  flex-grow: 1;
-}
 .dataviews-filters__view-actions .components-search-control .components-base-control__field {
   max-width: 240px;
 }
 
 .dataviews-filters__container {
-  padding: 0 32px;
-}
-
-.dataviews-filters__view-actions.components-h-stack {
-  align-items: center;
+  padding-right: 32px;
 }
 
 .dataviews-filters-button {
@@ -148,6 +141,13 @@
   color: #757575;
 }
 
+.dataviews-pagination__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+}
+
 .dataviews-filters-options {
   margin: 32px 0 16px;
 }
@@ -218,10 +218,10 @@
 .dataviews-view-table tr:hover {
   background-color: #f8f8f8;
 }
-.dataviews-view-table tr .components-checkbox-control__input {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
   opacity: 0;
 }
-.dataviews-view-table tr .components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input:focus {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
   opacity: 1;
 }
 .dataviews-view-table tr:focus-within .components-checkbox-control__input, .dataviews-view-table tr:hover .components-checkbox-control__input {
@@ -282,6 +282,9 @@
 .dataviews-view-table .dataviews-view-table__actions-column {
   width: 1%;
 }
+.dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
+  opacity: 1;
+}
 
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
@@ -705,7 +708,7 @@
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-reset {
   padding-inline-end: 28px;
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip[aria-expanded=true] {
   background: #e0e0e0;
   color: #1e1e1e;
 }
@@ -713,8 +716,8 @@
   color: var(--wp-admin-theme-color);
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values[aria-expanded=true] {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
   outline: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.5.2",
+	"version": "0.5.4",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,11 +30,11 @@
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/components": "^26.0.2",
+		"@wordpress/components": "^26.0.3",
 		"@wordpress/compose": "^6.28.1",
 		"@wordpress/element": "^5.28.1",
 		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
+		"@wordpress/icons": "^9.42.2",
 		"@wordpress/keycodes": "^3.51.1",
 		"@wordpress/primitives": "^3.49.1",
 		"@wordpress/private-apis": "^0.33.1",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
+	"gitHead": "864c1c553cb284def3bd5c907998da45f5c143ea"
 }

package/src/bulk-actions.js

@@ -7,7 +7,7 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,6 +21,24 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
+export function useHasAPossibleBulkAction( actions, item ) {
+	return useMemo( () => {
+		return actions.some( ( action ) => {
+			return action.supportsBulk && action.isEligible( item );
+		} );
+	}, [ actions, item ] );
+}
+
+export function useSomeItemHasAPossibleBulkAction( actions, data ) {
+	return useMemo( () => {
+		return data.some( ( item ) => {
+			return actions.some( ( action ) => {
+				return action.supportsBulk && action.isEligible( item );
+			} );
+		} );
+	}, [ actions, data ] );
+}
+
 function ActionWithModal( {
 	action,
 	selectedItems,
@@ -107,15 +125,47 @@ export default function BulkActions( {
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
-	const areAllSelected = selection && selection.length === data.length;
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
 	const [ actionWithModal, setActionWithModal ] = useState();
+	const selectableItems = useMemo( () => {
+		return data.filter( ( item ) => {
+			return bulkActions.some( ( action ) => action.isEligible( item ) );
+		} );
+	}, [ data, bulkActions ] );
+
+	const numberSelectableItems = selectableItems.length;
+	const areAllSelected =
+		selection && selection.length === numberSelectableItems;
+
 	const selectedItems = useMemo( () => {
 		return data.filter( ( item ) =>
 			selection.includes( getItemId( item ) )
 		);
 	}, [ selection, data, getItemId ] );
 
+	const hasNonSelectableItemSelected = useMemo( () => {
+		return selectedItems.some( ( item ) => {
+			return ! selectableItems.includes( item );
+		} );
+	}, [ selectedItems, selectableItems ] );
+	useEffect( () => {
+		if ( hasNonSelectableItemSelected ) {
+			onSelectionChange(
+				selectedItems.filter( ( selectedItem ) => {
+					return selectableItems.some( ( item ) => {
+						return getItemId( selectedItem ) === getItemId( item );
+					} );
+				} )
+			);
+		}
+	}, [
+		hasNonSelectableItemSelected,
+		selectedItems,
+		selectableItems,
+		getItemId,
+		onSelectionChange,
+	] );
+
 	if ( bulkActions.length === 0 ) {
 		return null;
 	}
@@ -157,9 +207,9 @@ export default function BulkActions( {
 						disabled={ areAllSelected }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( data );
+							onSelectionChange( selectableItems );
 						} }
-						suffix={ data.length }
+						suffix={ numberSelectableItems }
 					>
 						{ __( 'Select all' ) }
 					</DropdownMenuItem>

package/src/dataviews.js

@@ -20,6 +20,16 @@ import BulkActions from './bulk-actions';
 const defaultGetItemId = ( item ) => item.id;
 const defaultOnSelectionChange = () => {};
 
+function useSomeItemHasAPossibleBulkAction( actions, data ) {
+	return useMemo( () => {
+		return data.some( ( item ) => {
+			return actions.some( ( action ) => {
+				return action.supportsBulk && action.isEligible( item );
+			} );
+		} );
+	}, [ actions, data ] );
+}
+
 export default function DataViews( {
 	view,
 	onChangeView,
@@ -75,30 +85,49 @@ export default function DataViews( {
 			render: field.render || field.getValue,
 		} ) );
 	}, [ fields ] );
+
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 3 } justify="flex-start">
 				<HStack
-					alignment="flex-start"
+					alignment="top"
 					justify="start"
 					className="dataviews-filters__view-actions"
 				>
-					{ search && (
-						<Search
-							label={ searchLabel }
+					<HStack
+						justify="start"
+						className="dataviews-filters__container"
+						wrap
+					>
+						{ search && (
+							<Search
+								label={ searchLabel }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) }
+						<Filters
+							fields={ _fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							openedFilter={ openedFilter }
+							setOpenedFilter={ setOpenedFilter }
 						/>
-					) }
-					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) && (
-						<BulkActions
-							actions={ actions }
-							data={ data }
-							onSelectionChange={ onSetSelection }
-							selection={ selection }
-							getItemId={ getItemId }
-						/>
-					) }
+					</HStack>
+					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+						hasPossibleBulkAction && (
+							<BulkActions
+								actions={ actions }
+								data={ data }
+								onSelectionChange={ onSetSelection }
+								selection={ selection }
+								getItemId={ getItemId }
+							/>
+						) }
 					<ViewActions
 						fields={ _fields }
 						view={ view }
@@ -106,19 +135,6 @@ export default function DataViews( {
 						supportedLayouts={ supportedLayouts }
 					/>
 				</HStack>
-				<HStack
-					justify="start"
-					className="dataviews-filters__container"
-					wrap
-				>
-					<Filters
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						openedFilter={ openedFilter }
-						setOpenedFilter={ setOpenedFilter }
-					/>
-				</HStack>
 				<ViewComponent
 					fields={ _fields }
 					view={ view }

package/src/filters.js

@@ -11,6 +11,7 @@ import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
 import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 const Filters = memo( function Filters( {
 	fields,
@@ -108,7 +109,11 @@ const Filters = memo( function Filters( {
 		);
 	}
 
-	return filterComponents;
+	return (
+		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+			{ filterComponents }
+		</HStack>
+	);
 } );
 
 export default Filters;

package/src/pagination.js

@@ -27,7 +27,12 @@ const Pagination = memo( function Pagination( {
 				justify="end"
 				className="dataviews-pagination"
 			>
-				<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
+				<HStack
+					justify="flex-start"
+					expanded={ false }
+					spacing={ 2 }
+					className="dataviews-pagination__page-selection"
+				>
 					{ createInterpolateElement(
 						sprintf(
 							// translators: %s: Total number of pages.

package/src/single-selection-checkbox.js

@@ -11,6 +11,7 @@ export default function SingleSelectionCheckbox( {
 	data,
 	getItemId,
 	primaryField,
+	disabled,
 } ) {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
@@ -33,6 +34,7 @@ export default function SingleSelectionCheckbox( {
 			__nextHasNoMarginBottom
 			checked={ isSelected }
 			label={ selectionLabel }
+			disabled={ disabled }
 			onChange={ () => {
 				if ( ! isSelected ) {
 					onSelectionChange(

package/src/style.scss

@@ -13,8 +13,6 @@
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
 	.components-search-control {
-		flex-grow: 1;
-
 		.components-base-control__field {
 			max-width: 240px;
 		}
@@ -22,11 +20,7 @@
 }
 
 .dataviews-filters__container {
-	padding: 0 $grid-unit-40;
-}
-
-.dataviews-filters__view-actions.components-h-stack {
-	align-items: center;
+	padding-right: $grid-unit-40;
 }
 
 .dataviews-filters-button {
@@ -44,6 +38,13 @@
 	color: $gray-700;
 }
 
+.dataviews-pagination__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+}
+
 .dataviews-filters-options {
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
@@ -118,7 +119,7 @@
 			background-color: #f8f8f8;
 		}
 
-		.components-checkbox-control__input {
+		.components-checkbox-control__input.components-checkbox-control__input {
 			opacity: 0;
 
 			&:checked,
@@ -202,6 +203,12 @@
 	.dataviews-view-table__actions-column {
 		width: 1%;
 	}
+
+	&:has(tr.is-selected) {
+		.components-checkbox-control__input {
+			opacity: 1;
+		}
+	}
 }
 
 .dataviews-view-list__primary-field,
@@ -648,7 +655,8 @@
 		}
 
 		&:hover,
-		&:focus-visible {
+		&:focus-visible,
+		&[aria-expanded="true"] {
 			background: $gray-200;
 			color: $gray-900;
 		}
@@ -657,8 +665,9 @@
 			color: var(--wp-admin-theme-color);
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			&:hover,
+			&[aria-expanded="true"] {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 			}
 		}
 

package/src/view-grid.js

@@ -12,6 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	Tooltip,
 } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
@@ -21,6 +22,8 @@ import { useState } from '@wordpress/element';
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
 
+import { useHasAPossibleBulkAction } from './bulk-actions';
+
 function GridItem( {
 	selection,
 	data,
@@ -33,6 +36,7 @@ function GridItem( {
 	visibleFields,
 } ) {
 	const [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );
+	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	return (
@@ -40,11 +44,11 @@ function GridItem( {
 			spacing={ 0 }
 			key={ id }
 			className={ classnames( 'dataviews-view-grid__card', {
-				'is-selected': isSelected,
+				'is-selected': hasBulkAction && isSelected,
 				'has-no-pointer-events': hasNoPointerEvents,
 			} ) }
 			onMouseDown={ ( event ) => {
-				if ( event.ctrlKey || event.metaKey ) {
+				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
 					setHasNoPointerEvents( true );
 					if ( ! isSelected ) {
 						onSelectionChange(
@@ -90,6 +94,7 @@ function GridItem( {
 					getItemId={ getItemId }
 					data={ data }
 					primaryField={ primaryField }
+					disabled={ ! hasBulkAction }
 				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ primaryField?.render( { item } ) }
@@ -128,6 +133,7 @@ export default function ViewGrid( {
 	fields,
 	view,
 	actions,
+	isLoading,
 	getItemId,
 	deferredRendering,
 	selection,
@@ -148,29 +154,45 @@ export default function ViewGrid( {
 	);
 	const shownData = useAsyncList( data, { step: 3 } );
 	const usedData = deferredRendering ? shownData : data;
+	const hasData = !! usedData?.length;
 	return (
-		<Grid
-			gap={ 6 }
-			columns={ 2 }
-			alignment="top"
-			className="dataviews-view-grid"
-		>
-			{ usedData.map( ( item ) => {
-				return (
-					<GridItem
-						key={ getItemId( item ) }
-						selection={ selection }
-						data={ data }
-						onSelectionChange={ onSelectionChange }
-						getItemId={ getItemId }
-						item={ item }
-						actions={ actions }
-						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
-					/>
-				);
-			} ) }
-		</Grid>
+		<>
+			{ hasData && (
+				<Grid
+					gap={ 6 }
+					columns={ 2 }
+					alignment="top"
+					className="dataviews-view-grid"
+					aria-busy={ isLoading }
+				>
+					{ usedData.map( ( item ) => {
+						return (
+							<GridItem
+								key={ getItemId( item ) }
+								selection={ selection }
+								data={ data }
+								onSelectionChange={ onSelectionChange }
+								getItemId={ getItemId }
+								item={ item }
+								actions={ actions }
+								mediaField={ mediaField }
+								primaryField={ primaryField }
+								visibleFields={ visibleFields }
+							/>
+						);
+					} ) }
+				</Grid>
+			) }
+			{ ! hasData && (
+				<div
+					className={ classnames( {
+						'dataviews-loading': isLoading,
+						'dataviews-no-results': ! isLoading,
+					} ) }
+				>
+					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+				</div>
+			) }
+		</>
 	);
 }