@wordpress/dataviews 0.6.0 → 0.7.0

package/build-style/style.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -110,26 +111,26 @@
   box-sizing: border-box;
   scroll-padding-bottom: 64px;
 }
-.dataviews-wrapper > div {
-  min-height: 100%;
-}
 
 .dataviews-filters__view-actions {
   padding: 12px 32px 0;
-}
-.dataviews-filters__view-actions .components-search-control {
-  flex-grow: 1;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+  position: sticky;
+  left: 0;
 }
 .dataviews-filters__view-actions .components-search-control .components-base-control__field {
   max-width: 240px;
 }
 
 .dataviews-filters__container {
-  padding: 0 32px;
+  padding-right: 32px;
 }
-
-.dataviews-filters__view-actions.components-h-stack {
-  align-items: center;
+.dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:hover {
+  opacity: 0;
+}
+.dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:focus {
+  opacity: 1;
 }
 
 .dataviews-filters-button {
@@ -137,23 +138,25 @@
 }
 
 .dataviews-pagination {
-  margin-top: auto;
   position: sticky;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  -webkit-backdrop-filter: blur(6px);
-          backdrop-filter: blur(6px);
+  left: 0;
+  background-color: #fff;
   padding: 12px 32px;
   border-top: 1px solid #f0f0f0;
   color: #757575;
+  flex-shrink: 0;
 }
 
-.dataviews-filters-options {
-  margin: 32px 0 16px;
+.dataviews-pagination__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
 }
 
-.dataviews-view-table-wrapper {
-  overflow-x: auto;
+.dataviews-filters-options {
+  margin: 32px 0 16px;
 }
 
 .dataviews-view-table {
@@ -218,10 +221,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 {
@@ -234,17 +237,19 @@
 .dataviews-view-table tr.is-selected:hover {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
+.dataviews-view-table thead {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+}
 .dataviews-view-table thead tr {
   border: 0;
 }
 .dataviews-view-table thead th {
-  position: sticky;
-  top: -1px;
   background-color: #fff;
   box-shadow: inset 0 -1px 0 #f0f0f0;
   padding-top: 8px;
   padding-bottom: 8px;
-  z-index: 1;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
@@ -282,6 +287,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,
@@ -291,7 +299,6 @@
   color: #1e1e1e;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
   display: block;
   width: 100%;
 }
@@ -311,6 +318,13 @@
 .dataviews-view-table__primary-field a:hover {
   color: #1e1e1e;
 }
+.dataviews-view-list__primary-field a:focus,
+.dataviews-view-grid__primary-field a:focus,
+.dataviews-view-table__primary-field a:focus {
+  color: var(--wp-admin-theme-color--rgb);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+  border-radius: 2px;
+}
 .dataviews-view-list__primary-field button.components-button.is-link,
 .dataviews-view-grid__primary-field button.components-button.is-link,
 .dataviews-view-table__primary-field button.components-button.is-link {
@@ -512,6 +526,10 @@
 .dataviews-no-results,
 .dataviews-loading {
   padding: 0 32px;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dataviews-view-table-selection-checkbox label {
@@ -539,10 +557,6 @@
   margin-left: 8px;
 }
 
-.dataviews-view-grid__card.has-no-pointer-events * {
-  pointer-events: none;
-}
-
 .dataviews-filter-summary__popover .components-popover__content {
   width: 230px;
   padding: 0;
@@ -555,7 +569,17 @@
   overflow: auto;
   border-top: 1px solid #e0e0e0;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item {
+.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item-value [data-user-value] {
+  font-weight: 600;
+}
+
+.dataviews-search-widget-listbox {
+  max-height: 184px;
+  padding: 4px;
+  overflow: auto;
+}
+
+.dataviews-search-widget-listitem {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -565,28 +589,25 @@
   cursor: default;
   margin-block-end: 2px;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:last-child {
+.dataviews-search-widget-listitem:last-child {
   margin-block-end: 0;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item], .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus {
+.dataviews-search-widget-listitem:hover, .dataviews-search-widget-listitem[data-active-item], .dataviews-search-widget-listitem:focus {
   background-color: var(--wp-admin-theme-color);
   color: #fff;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item] .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus .dataviews-search-widget-filter-combobox-item-check {
+.dataviews-search-widget-listitem:hover .dataviews-search-widget-listitem-check, .dataviews-search-widget-listitem[data-active-item] .dataviews-search-widget-listitem-check, .dataviews-search-widget-listitem:focus .dataviews-search-widget-listitem-check {
   fill: #fff;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover .dataviews-search-widget-filter-combobox-item-description, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item] .dataviews-search-widget-filter-combobox-item-description, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus .dataviews-search-widget-filter-combobox-item-description {
+.dataviews-search-widget-listitem:hover .dataviews-search-widget-listitem-description, .dataviews-search-widget-listitem[data-active-item] .dataviews-search-widget-listitem-description, .dataviews-search-widget-listitem:focus .dataviews-search-widget-listitem-description {
   color: #fff;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item .dataviews-search-widget-filter-combobox-item-check {
+.dataviews-search-widget-listitem .dataviews-search-widget-listitem-check {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item .dataviews-search-widget-filter-combobox-item-value [data-user-value] {
-  font-weight: 600;
-}
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item .dataviews-search-widget-filter-combobox-item-description {
+.dataviews-search-widget-listitem .dataviews-search-widget-listitem-description {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -676,8 +697,11 @@
 }
 
 .dataviews-filter-summary__operators-container {
-  padding: 8px 8px 4px;
-  padding-bottom: 0;
+  padding: 8px 8px 0;
+}
+.dataviews-filter-summary__operators-container:has(+ .dataviews-search-widget-listbox) {
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 8px;
 }
 .dataviews-filter-summary__operators-container:empty {
   display: none;
@@ -705,7 +729,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 +737,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.6.0",
+	"version": "0.7.0",
 	"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",
@@ -29,15 +29,15 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.52.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/compose": "^6.29.0",
-		"@wordpress/element": "^5.29.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/icons": "^9.43.0",
-		"@wordpress/keycodes": "^3.52.0",
-		"@wordpress/primitives": "^3.50.0",
-		"@wordpress/private-apis": "^0.34.0",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/primitives": "^3.51.0",
+		"@wordpress/private-apis": "^0.35.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/add-filter.js

@@ -5,7 +5,6 @@ import {
 	privateApis as componentsPrivateApis,
 	Button,
 } from '@wordpress/components';
-import { plus } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 
@@ -31,7 +30,6 @@ function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {
 				<Button
 					__experimentalIsFocusable
 					size="compact"
-					icon={ plus }
 					className="dataviews-filters-button"
 					variant="tertiary"
 					disabled={ ! inactiveFilters.length }

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

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
 
 /**
@@ -20,6 +17,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,13 +82,22 @@ 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="top"
+				justify="start"
+				className="dataviews-filters__view-actions"
+			>
 				<HStack
-					alignment="flex-start"
 					justify="start"
-					className="dataviews-filters__view-actions"
+					className="dataviews-filters__container"
+					wrap
 				>
 					{ search && (
 						<Search
@@ -90,27 +106,6 @@ export default function DataViews( {
 							onChangeView={ onChangeView }
 						/>
 					) }
-					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) && (
-						<BulkActions
-							actions={ actions }
-							data={ data }
-							onSelectionChange={ onSetSelection }
-							selection={ selection }
-							getItemId={ getItemId }
-						/>
-					) }
-					<ViewActions
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						supportedLayouts={ supportedLayouts }
-					/>
-				</HStack>
-				<HStack
-					justify="start"
-					className="dataviews-filters__container"
-					wrap
-				>
 					<Filters
 						fields={ _fields }
 						view={ view }
@@ -119,26 +114,42 @@ export default function DataViews( {
 						setOpenedFilter={ setOpenedFilter }
 					/>
 				</HStack>
-				<ViewComponent
+				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+					hasPossibleBulkAction && (
+						<BulkActions
+							actions={ actions }
+							data={ data }
+							onSelectionChange={ onSetSelection }
+							selection={ selection }
+							getItemId={ getItemId }
+						/>
+					) }
+				<ViewActions
 					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
-					actions={ actions }
-					data={ data }
-					getItemId={ getItemId }
-					isLoading={ isLoading }
-					onSelectionChange={ onSetSelection }
-					onDetailsChange={ onDetailsChange }
-					selection={ selection }
-					deferredRendering={ deferredRendering }
-					setOpenedFilter={ setOpenedFilter }
-				/>
-				<Pagination
-					view={ view }
-					onChangeView={ onChangeView }
-					paginationInfo={ paginationInfo }
+					supportedLayouts={ supportedLayouts }
 				/>
-			</VStack>
+			</HStack>
+			<ViewComponent
+				fields={ _fields }
+				view={ view }
+				onChangeView={ onChangeView }
+				actions={ actions }
+				data={ data }
+				getItemId={ getItemId }
+				isLoading={ isLoading }
+				onSelectionChange={ onSetSelection }
+				onDetailsChange={ onDetailsChange }
+				selection={ selection }
+				deferredRendering={ deferredRendering }
+				setOpenedFilter={ setOpenedFilter }
+			/>
+			<Pagination
+				view={ view }
+				onChangeView={ onChangeView }
+				paginationInfo={ paginationInfo }
+			/>
 		</div>
 	);
 }

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/reset-filters.js

@@ -21,6 +21,7 @@ export default function ResetFilter( { filters, view, onChangeView } ) {
 			__experimentalIsFocusable
 			size="compact"
 			variant="tertiary"
+			className="dataviews-filters__reset-button"
 			onClick={ () => {
 				onChangeView( {
 					...view,
@@ -30,7 +31,7 @@ export default function ResetFilter( { filters, view, onChangeView } ) {
 				} );
 			} }
 		>
-			{ __( 'Reset filters' ) }
+			{ __( 'Reset' ) }
 		</Button>
 	);
 }