@wordpress/dataviews 0.6.0 → 0.8.0

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/constants.js

@@ -20,17 +20,46 @@ import ViewList from './view-list';
 export const ENUMERATION_TYPE = 'enumeration';
 
 // Filter operators.
-export const OPERATOR_IN = 'in';
-export const OPERATOR_NOT_IN = 'notIn';
+export const OPERATOR_IS = 'is';
+export const OPERATOR_IS_NOT = 'isNot';
+export const OPERATOR_IS_ANY = 'isAny';
+export const OPERATOR_IS_NONE = 'isNone';
+export const OPERATOR_IS_ALL = 'isAll';
+export const OPERATOR_IS_NOT_ALL = 'isNotAll';
+
+export const ALL_OPERATORS = [
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+];
 export const OPERATORS = {
-	[ OPERATOR_IN ]: {
-		key: 'in-filter',
+	[ OPERATOR_IS ]: {
+		key: 'is-filter',
 		label: __( 'Is' ),
 	},
-	[ OPERATOR_NOT_IN ]: {
-		key: 'not-in-filter',
+	[ OPERATOR_IS_NOT ]: {
+		key: 'is-not-filter',
 		label: __( 'Is not' ),
 	},
+	[ OPERATOR_IS_ANY ]: {
+		key: 'is-any-filter',
+		label: __( 'Is any' ),
+	},
+	[ OPERATOR_IS_NONE ]: {
+		key: 'is-none-filter',
+		label: __( 'Is none' ),
+	},
+	[ OPERATOR_IS_ALL ]: {
+		key: 'is-all-filter',
+		label: __( 'Is all' ),
+	},
+	[ OPERATOR_IS_NOT_ALL ]: {
+		key: 'is-not-all-filter',
+		label: __( 'Is not all' ),
+	},
 };
 
 // Sorting

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,13 +17,23 @@ 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,
 	fields,
 	search = true,
 	searchLabel = undefined,
-	actions,
+	actions = [],
 	data,
 	getItemId = defaultGetItemId,
 	isLoading = false,
@@ -70,18 +77,33 @@ export default function DataViews( {
 		( v ) => v.type === view.type
 	).component;
 	const _fields = useMemo( () => {
-		return fields.map( ( field ) => ( {
-			...field,
-			render: field.render || field.getValue,
-		} ) );
+		return fields.map( ( field ) => {
+			const getValue =
+				field.getValue || ( ( { item } ) => item[ field.id ] );
+
+			return {
+				...field,
+				getValue,
+				render: field.render || 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 +112,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 +120,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/filter-summary.js

@@ -24,43 +24,93 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import SearchWidget from './search-widget';
-import { OPERATOR_IN, OPERATOR_NOT_IN, OPERATORS } from './constants';
+import {
+	OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+} from './constants';
 
-const FilterText = ( { activeElement, filterInView, filter } ) => {
-	if ( activeElement === undefined ) {
+const FilterText = ( { activeElements, filterInView, filter } ) => {
+	if ( activeElements === undefined || activeElements.length === 0 ) {
 		return filter.name;
 	}
 
 	const filterTextWrappers = {
-		Span1: <span className="dataviews-filter-summary__filter-text-name" />,
-		Span2: <span className="dataviews-filter-summary__filter-text-value" />,
+		Name: <span className="dataviews-filter-summary__filter-text-name" />,
+		Value: <span className="dataviews-filter-summary__filter-text-value" />,
 	};
 
-	if (
-		activeElement !== undefined &&
-		filterInView?.operator === OPERATOR_IN
-	) {
+	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is any: Admin, Editor". */
+				__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NONE ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is none: Admin, Editor". */
+				__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_ALL ) {
 		return createInterpolateElement(
 			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is Admin". */
-				__( '<Span1>%1$s </Span1><Span2>is %2$s</Span2>' ),
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is all: Admin, Editor". */
+				__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),
 				filter.name,
-				activeElement.label
+				activeElements.map( ( element ) => element.label ).join( ', ' )
 			),
 			filterTextWrappers
 		);
 	}
 
-	if (
-		activeElement !== undefined &&
-		filterInView?.operator === OPERATOR_NOT_IN
-	) {
+	if ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {
 		return createInterpolateElement(
 			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not Admin". */
-				__( '<Span1>%1$s </Span1><Span2>is not %2$s</Span2>' ),
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not all: Admin, Editor". */
+				__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),
 				filter.name,
-				activeElement.label
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is: Admin". */
+				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NOT ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not: Admin". */
+				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
 			),
 			filterTextWrappers
 		);
@@ -140,9 +190,12 @@ export default function FilterSummary( {
 	const toggleRef = useRef();
 	const { filter, view, onChangeView } = commonProps;
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
-	const activeElement = filter.elements.find(
-		( element ) => element.value === filterInView?.value
-	);
+	const activeElements = filter.elements.filter( ( element ) => {
+		if ( filter.singleSelection ) {
+			return element.value === filterInView?.value;
+		}
+		return filterInView?.value?.includes( element.value );
+	} );
 	const isPrimary = filter.isPrimary;
 	const hasValues = filterInView?.value !== undefined;
 	const canResetOrRemove = ! isPrimary || hasValues;
@@ -188,7 +241,7 @@ export default function FilterSummary( {
 							ref={ toggleRef }
 						>
 							<FilterText
-								activeElement={ activeElement }
+								activeElements={ activeElements }
 								filterInView={ filterInView }
 								filter={ filter }
 							/>

package/src/filters.js

@@ -10,7 +10,13 @@ import FilterSummary from './filter-summary';
 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 {
+	ENUMERATION_TYPE,
+	ALL_OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+} from './constants';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 const Filters = memo( function Filters( {
 	fields,
@@ -42,15 +48,16 @@ const Filters = memo( function Filters( {
 					field: field.id,
 					name: field.header,
 					elements: field.elements,
+					singleSelection: operators.some( ( op ) =>
+						[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
+					),
 					operators,
 					isVisible:
 						isPrimary ||
 						view.filters.some(
 							( f ) =>
 								f.field === field.id &&
-								[ OPERATOR_IN, OPERATOR_NOT_IN ].includes(
-									f.operator
-								)
+								ALL_OPERATORS.includes( f.operator )
 						),
 					isPrimary,
 				} );
@@ -108,7 +115,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/item-actions.js

@@ -105,37 +105,28 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 }
 
 export default function ItemActions( { item, actions, isCompact } ) {
-	const { primaryActions, secondaryActions } = useMemo( () => {
-		return actions.reduce(
-			( accumulator, action ) => {
-				// If an action is eligible for all items, doesn't need
-				// to provide the `isEligible` function.
-				if ( action.isEligible && ! action.isEligible( item ) ) {
-					return accumulator;
-				}
-				if ( action.isPrimary && !! action.icon ) {
-					accumulator.primaryActions.push( action );
-				} else {
-					accumulator.secondaryActions.push( action );
-				}
-				return accumulator;
-			},
-			{ primaryActions: [], secondaryActions: [] }
+	const { primaryActions, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
 		);
+		return {
+			primaryActions: _primaryActions,
+			eligibleActions: _eligibleActions,
+		};
 	}, [ actions, item ] );
 	if ( isCompact ) {
-		return (
-			<CompactItemActions
-				item={ item }
-				primaryActions={ primaryActions }
-				secondaryActions={ secondaryActions }
-			/>
-		);
+		return <CompactItemActions item={ item } actions={ eligibleActions } />;
 	}
 	return (
 		<HStack
 			spacing={ 1 }
 			justify="flex-end"
+			className="dataviews-item-actions"
 			style={ {
 				flexShrink: '0',
 				width: 'auto',
@@ -161,27 +152,12 @@ export default function ItemActions( { item, actions, isCompact } ) {
 						/>
 					);
 				} ) }
-			<DropdownMenu
-				trigger={
-					<Button
-						size="compact"
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						disabled={ ! secondaryActions.length }
-					/>
-				}
-				placement="bottom-end"
-			>
-				<ActionsDropdownMenuGroup
-					actions={ secondaryActions }
-					item={ item }
-				/>
-			</DropdownMenu>
+			<CompactItemActions item={ item } actions={ eligibleActions } />
 		</HStack>
 	);
 }
 
-function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+function CompactItemActions( { item, actions } ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -189,25 +165,13 @@ function CompactItemActions( { item, primaryActions, secondaryActions } ) {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
-					disabled={
-						! primaryActions.length && ! secondaryActions.length
-					}
+					disabled={ ! actions.length }
+					className="dataviews-all-actions-button"
 				/>
 			}
 			placement="bottom-end"
 		>
-			{ !! primaryActions.length && (
-				<ActionsDropdownMenuGroup
-					actions={ primaryActions }
-					item={ item }
-				/>
-			) }
-			{ !! secondaryActions.length && (
-				<ActionsDropdownMenuGroup
-					actions={ secondaryActions }
-					item={ item }
-				/>
-			) }
+			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
 		</DropdownMenu>
 	);
 }

package/src/pagination.js

@@ -27,15 +27,20 @@ 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.
-							_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
+							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
 							totalPages
 						),
 						{
-							CurrenPageControl: (
+							CurrentPageControl: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
 									value={ view.page }

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>
 	);
 }