@wordpress/dataviews 0.7.0 → 0.8.0

package/src/search-widget.js

@@ -15,7 +15,7 @@ import {
 	Icon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { search } from '@wordpress/icons';
+import { search, check } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
 
 /**
@@ -39,6 +39,36 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
+const getCurrentValue = ( filterDefinition, currentFilter ) => {
+	if ( filterDefinition.singleSelection ) {
+		return currentFilter?.value;
+	}
+
+	if ( Array.isArray( currentFilter?.value ) ) {
+		return currentFilter.value;
+	}
+
+	if ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {
+		return [ currentFilter.value ];
+	}
+
+	return [];
+};
+
+const getNewValue = ( filterDefinition, currentFilter, value ) => {
+	if ( filterDefinition.singleSelection ) {
+		return value;
+	}
+
+	if ( Array.isArray( currentFilter?.value ) ) {
+		return currentFilter.value.includes( value )
+			? currentFilter.value.filter( ( v ) => v !== value )
+			: [ ...currentFilter.value, value ];
+	}
+
+	return [ value ];
+};
+
 function ListBox( { view, filter, onChangeView } ) {
 	const compositeStore = useCompositeStore( {
 		virtualFocus: true,
@@ -48,10 +78,10 @@ function ListBox( { view, filter, onChangeView } ) {
 		// so the first item is not selected, since the focus is on the operators control.
 		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
 	} );
-	const selectedFilter = view.filters.find(
-		( _filter ) => _filter.field === filter.field
+	const currentFilter = view.filters.find(
+		( f ) => f.field === filter.field
 	);
-	const selectedValues = selectedFilter?.value;
+	const currentValue = getCurrentValue( filter, currentFilter );
 	return (
 		<Composite
 			store={ compositeStore }
@@ -83,10 +113,6 @@ function ListBox( { view, filter, onChangeView } ) {
 								/>
 							}
 							onClick={ () => {
-								const currentFilter = view.filters.find(
-									( _filter ) =>
-										_filter.field === filter.field
-								);
 								const newFilters = currentFilter
 									? [
 											...view.filters.map(
@@ -101,7 +127,11 @@ function ListBox( { view, filter, onChangeView } ) {
 																currentFilter.operator ||
 																filter
 																	.operators[ 0 ],
-															value: element.value,
+															value: getNewValue(
+																filter,
+																currentFilter,
+																element.value
+															),
 														};
 													}
 													return _filter;
@@ -113,7 +143,11 @@ function ListBox( { view, filter, onChangeView } ) {
 											{
 												field: filter.field,
 												operator: filter.operators[ 0 ],
-												value: element.value,
+												value: getNewValue(
+													filter,
+													currentFilter,
+													element.value
+												),
 											},
 									  ];
 								onChangeView( {
@@ -126,9 +160,14 @@ function ListBox( { view, filter, onChangeView } ) {
 					}
 				>
 					<span className="dataviews-search-widget-listitem-check">
-						{ selectedValues === element.value && (
-							<Icon icon={ radioCheck } />
-						) }
+						{ filter.singleSelection &&
+							currentValue === element.value && (
+								<Icon icon={ radioCheck } />
+							) }
+						{ ! filter.singleSelection &&
+							currentValue.includes( element.value ) && (
+								<Icon icon={ check } />
+							) }
 					</span>
 					<span>
 						{ element.label }
@@ -147,10 +186,10 @@ function ListBox( { view, filter, onChangeView } ) {
 function ComboboxList( { view, filter, onChangeView } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
-	const selectedFilter = view.filters.find(
+	const currentFilter = view.filters.find(
 		( _filter ) => _filter.field === filter.field
 	);
-	const selectedValues = selectedFilter?.value;
+	const currentValue = getCurrentValue( filter, currentFilter );
 	const matches = useMemo( () => {
 		const normalizedSearch = normalizeSearchInput( deferredSearchValue );
 		return filter.elements.filter( ( item ) =>
@@ -160,10 +199,8 @@ function ComboboxList( { view, filter, onChangeView } ) {
 	return (
 		<Ariakit.ComboboxProvider
 			value={ searchValue }
+			selectedValue={ currentValue }
 			setSelectedValue={ ( value ) => {
-				const currentFilter = view.filters.find(
-					( _filter ) => _filter.field === filter.field
-				);
 				const newFilters = currentFilter
 					? [
 							...view.filters.map( ( _filter ) => {
@@ -223,9 +260,14 @@ function ComboboxList( { view, filter, onChangeView } ) {
 							focusOnHover
 						>
 							<span className="dataviews-search-widget-listitem-check">
-								{ selectedValues === element.value && (
-									<Icon icon={ radioCheck } />
-								) }
+								{ filter.singleSelection &&
+									currentValue === element.value && (
+										<Icon icon={ radioCheck } />
+									) }
+								{ ! filter.singleSelection &&
+									currentValue.includes( element.value ) && (
+										<Icon icon={ check } />
+									) }
 							</span>
 							<span>
 								<Ariakit.ComboboxItemValue

package/src/stories/fixtures.js

@@ -20,66 +20,77 @@ export const data = [
 		title: 'Apollo',
 		description: 'Apollo description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Not a planet',
 	},
 	{
 		id: 2,
 		title: 'Space',
 		description: 'Space description',
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
+		type: 'Not a planet',
 	},
 	{
 		id: 3,
 		title: 'NASA',
 		description: 'NASA photo',
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
+		type: 'Not a planet',
 	},
 	{
 		id: 4,
 		title: 'Neptune',
 		description: 'Neptune description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
 	},
 	{
 		id: 5,
 		title: 'Mercury',
 		description: 'Mercury description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 6,
 		title: 'Venus',
 		description: 'Venus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 7,
 		title: 'Earth',
 		description: 'Earth description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 8,
 		title: 'Mars',
 		description: 'Mars description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 9,
 		title: 'Jupiter',
 		description: 'Jupiter description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
 	},
 	{
 		id: 10,
 		title: 'Saturn',
 		description: 'Saturn description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
 	},
 	{
 		id: 11,
 		title: 'Uranus',
 		description: 'Uranus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
 	},
 ];
 
@@ -88,7 +99,7 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	hiddenFields: [ 'image' ],
+	hiddenFields: [ 'image', 'type' ],
 	layout: {},
 	filters: [],
 };

package/src/stories/index.story.js

@@ -8,10 +8,15 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
  */
 import { DataViews } from '../index';
 import { DEFAULT_VIEW, actions, data } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
+import {
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ANY,
+} from '../constants';
 
 const meta = {
-	title: 'DataViews (Experimental)/DataViews',
+	title: 'DataViews/DataViews',
 	component: DataViews,
 };
 export default meta;
@@ -45,14 +50,25 @@ const fields = [
 	{
 		header: 'Title',
 		id: 'title',
-		getValue: ( { item } ) => item.title,
 		maxWidth: 400,
 		enableHiding: false,
 	},
+	{
+		header: 'Type',
+		id: 'type',
+		maxWidth: 400,
+		enableHiding: false,
+		type: 'enumeration',
+		elements: [
+			{ value: 'Not a planet', label: 'Not a planet' },
+			{ value: 'Ice giant', label: 'Ice giant' },
+			{ value: 'Terrestrial', label: 'Terrestrial' },
+			{ value: 'Gas giant', label: 'Gas giant' },
+		],
+	},
 	{
 		header: 'Description',
 		id: 'description',
-		getValue: ( { item } ) => item.description,
 		maxWidth: 200,
 		enableSorting: false,
 	},
@@ -72,6 +88,29 @@ export const Default = ( props ) => {
 				].some( ( field ) => field.includes( normalizedSearch ) );
 			} );
 		}
+
+		if ( view.filters.length > 0 ) {
+			view.filters.forEach( ( filter ) => {
+				if (
+					filter.field === 'type' &&
+					filter.operator === OPERATOR_IS_ANY &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value.includes( item.type );
+					} );
+				} else if (
+					filter.field === 'type' &&
+					filter.operator === OPERATOR_IS_NONE &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return ! filter.value.includes( item.type );
+					} );
+				}
+			} );
+		}
+
 		// Handle sorting.
 		if ( view.sort ) {
 			const stringSortingFields = [ 'title' ];

package/src/style.scss

@@ -1,5 +1,4 @@
 .dataviews-wrapper {
-	width: 100%;
 	height: 100%;
 	overflow: auto;
 	box-sizing: border-box;
@@ -7,6 +6,7 @@
 }
 
 .dataviews-filters__view-actions {
+	box-sizing: border-box;
 	padding: $grid-unit-15 $grid-unit-40 0;
 	margin-bottom: $grid-unit-15;
 	flex-shrink: 0;
@@ -123,7 +123,7 @@
 			border-bottom: 0;
 		}
 
-		&:hover {
+		&.is-hovered {
 			background-color: #f8f8f8;
 		}
 
@@ -137,9 +137,15 @@
 			}
 		}
 
+		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+			opacity: 0;
+		}
+
 		&:focus-within,
+		&.is-hovered,
 		&:hover {
-			.components-checkbox-control__input {
+			.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
 				opacity: 1;
 			}
 		}

package/src/utils.js

@@ -1,7 +1,13 @@
 /**
  * Internal dependencies
  */
-import { OPERATORS } from './constants';
+import {
+	ALL_OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+} from './constants';
 
 /**
  * Helper util to sort data by text fields, when sorting is done client side.
@@ -57,10 +63,38 @@ export function getPaginationResults( { data, view } ) {
 
 export const sanitizeOperators = ( field ) => {
 	let operators = field.filterBy?.operators;
+
+	// Assign default values.
 	if ( ! operators || ! Array.isArray( operators ) ) {
-		operators = Object.keys( OPERATORS );
+		operators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];
+	}
+
+	// Transform legacy in, notIn operators to is, isNot.
+	// To be removed in the future.
+	if ( operators.includes( 'in' ) ) {
+		operators = operators.filter( ( operator ) => operator !== 'is' );
+		operators.push( 'is' );
+	}
+	if ( operators.includes( 'notIn' ) ) {
+		operators = operators.filter( ( operator ) => operator !== 'notIn' );
+		operators.push( 'isNot' );
 	}
-	return operators.filter( ( operator ) =>
-		Object.keys( OPERATORS ).includes( operator )
+
+	// Make sure only valid operators are used.
+	operators = operators.filter( ( operator ) =>
+		ALL_OPERATORS.includes( operator )
 	);
+
+	// Do not allow mixing single & multiselection operators.
+	// Remove multiselection operators if any of the single selection ones is present.
+	if (
+		operators.includes( OPERATOR_IS ) ||
+		operators.includes( OPERATOR_IS_NOT )
+	) {
+		operators = operators.filter( ( operator ) =>
+			[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )
+		);
+	}
+
+	return operators;
 };

package/src/view-grid.js

@@ -46,9 +46,12 @@ function GridItem( {
 				'is-selected': hasBulkAction && isSelected,
 			} ) }
 			onClickCapture={ ( event ) => {
-				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
+				if ( event.ctrlKey || event.metaKey ) {
 					event.stopPropagation();
 					event.preventDefault();
+					if ( ! hasBulkAction ) {
+						return;
+					}
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {

package/src/view-table.js

@@ -22,9 +22,9 @@ import {
 	useId,
 	useRef,
 	useState,
+	useMemo,
 	Children,
 	Fragment,
-	useMemo,
 } from '@wordpress/element';
 
 /**
@@ -49,7 +49,7 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-function WithSeparators( { children } ) {
+function WithDropDownMenuSeparators( { children } ) {
 	return Children.toArray( children )
 		.filter( Boolean )
 		.map( ( child, i ) => (
@@ -102,7 +102,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 			}
 			style={ { minWidth: '240px' } }
 		>
-			<WithSeparators>
+			<WithDropDownMenuSeparators>
 				{ isSortable && (
 					<DropdownMenuGroup>
 						{ Object.entries( SORTING_DIRECTIONS ).map(
@@ -187,7 +187,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 						</DropdownMenuItemLabel>
 					</DropdownMenuItem>
 				) }
-			</WithSeparators>
+			</WithDropDownMenuSeparators>
 		</DropdownMenu>
 	);
 } );
@@ -237,12 +237,58 @@ function TableRow( {
 	data,
 } ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
+
+	const isSelected = selection.includes( id );
+
+	const [ isHovered, setIsHovered ] = useState( false );
+
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
 	return (
 		<tr
 			className={ classnames( 'dataviews-view-table__row', {
 				'is-selected':
 					hasPossibleBulkAction && selection.includes( id ),
+				'is-hovered': isHovered,
 			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+			onClickCapture={ ( event ) => {
+				if ( event.ctrlKey || event.metaKey ) {
+					event.stopPropagation();
+					event.preventDefault();
+					if ( ! hasPossibleBulkAction ) {
+						return;
+					}
+					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 )
+								);
+							} )
+						);
+					}
+				}
+			} }
 		>
 			{ hasBulkActions && (
 				<td