@wordpress/dataviews 0.7.0 → 0.9.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,88 @@ export const data = [
 		title: 'Apollo',
 		description: 'Apollo description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Not a planet',
+		categories: [ 'Space', 'NASA' ],
 	},
 	{
 		id: 2,
 		title: 'Space',
 		description: 'Space description',
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
+		type: 'Not a planet',
+		categories: [ 'Space' ],
 	},
 	{
 		id: 3,
 		title: 'NASA',
 		description: 'NASA photo',
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
+		type: 'Not a planet',
+		categories: [ 'NASA' ],
 	},
 	{
 		id: 4,
 		title: 'Neptune',
 		description: 'Neptune description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 5,
 		title: 'Mercury',
 		description: 'Mercury description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 6,
 		title: 'Venus',
-		description: 'Venus description',
+		description: 'La planète Vénus',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 7,
 		title: 'Earth',
 		description: 'Earth description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 8,
 		title: 'Mars',
 		description: 'Mars description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 9,
 		title: 'Jupiter',
 		description: 'Jupiter description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 10,
 		title: 'Saturn',
 		description: 'Saturn description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
 	},
 	{
 		id: 11,
 		title: 'Uranus',
 		description: 'Uranus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
+		categories: [ 'Space', 'Ice giant', 'Solar system' ],
 	},
 ];
 
@@ -88,7 +110,7 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	hiddenFields: [ 'image' ],
+	hiddenFields: [ 'image', 'type' ],
 	layout: {},
 	filters: [],
 };
@@ -124,3 +146,66 @@ export const actions = [
 		callback() {},
 	},
 ];
+
+export const fields = [
+	{
+		header: 'Image',
+		id: 'image',
+		render: ( { item } ) => {
+			return (
+				<img src={ item.image } alt="" style={ { width: '100%' } } />
+			);
+		},
+		width: 50,
+		enableSorting: false,
+	},
+	{
+		header: 'Title',
+		id: 'title',
+		maxWidth: 400,
+		enableHiding: false,
+		enableGlobalSearch: true,
+	},
+	{
+		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',
+		maxWidth: 200,
+		enableSorting: false,
+		enableGlobalSearch: true,
+	},
+	{
+		header: 'Categories',
+		id: 'categories',
+		type: 'enumeration',
+		elements: [
+			{ value: 'Space', label: 'Space' },
+			{ value: 'NASA', label: 'NASA' },
+			{ value: 'Planet', label: 'Planet' },
+			{ value: 'Solar system', label: 'Solar system' },
+			{ value: 'Ice giant', label: 'Ice giant' },
+		],
+		filterBy: {
+			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
+		},
+		getValue: ( { item } ) => {
+			return item.categories;
+		},
+		render: ( { item } ) => {
+			return item.categories.join( ',' );
+		},
+		enableSorting: false,
+	},
+];

package/src/stories/index.story.js

@@ -7,11 +7,12 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { DataViews } from '../index';
-import { DEFAULT_VIEW, actions, data } from './fixtures';
+import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
 import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
+import { filterSortAndPaginate } from '../filter-and-sort-data-view';
 
 const meta = {
-	title: 'DataViews (Experimental)/DataViews',
+	title: 'DataViews/DataViews',
 	component: DataViews,
 };
 export default meta;
@@ -26,80 +27,10 @@ const defaultConfigPerViewType = {
 	},
 };
 
-function normalizeSearchInput( input = '' ) {
-	return input.trim().toLowerCase();
-}
-
-const fields = [
-	{
-		header: 'Image',
-		id: 'image',
-		render: ( { item } ) => {
-			return (
-				<img src={ item.image } alt="" style={ { width: '100%' } } />
-			);
-		},
-		width: 50,
-		enableSorting: false,
-	},
-	{
-		header: 'Title',
-		id: 'title',
-		getValue: ( { item } ) => item.title,
-		maxWidth: 400,
-		enableHiding: false,
-	},
-	{
-		header: 'Description',
-		id: 'description',
-		getValue: ( { item } ) => item.description,
-		maxWidth: 200,
-		enableSorting: false,
-	},
-];
-
 export const Default = ( props ) => {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { shownData, paginationInfo } = useMemo( () => {
-		let filteredData = [ ...data ];
-		// Handle global search.
-		if ( view.search ) {
-			const normalizedSearch = normalizeSearchInput( view.search );
-			filteredData = filteredData.filter( ( item ) => {
-				return [
-					normalizeSearchInput( item.title ),
-					normalizeSearchInput( item.description ),
-				].some( ( field ) => field.includes( normalizedSearch ) );
-			} );
-		}
-		// Handle sorting.
-		if ( view.sort ) {
-			const stringSortingFields = [ 'title' ];
-			const fieldId = view.sort.field;
-			if ( stringSortingFields.includes( fieldId ) ) {
-				const fieldToSort = fields.find( ( field ) => {
-					return field.id === fieldId;
-				} );
-				filteredData.sort( ( a, b ) => {
-					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-					return view.sort.direction === 'asc'
-						? valueA.localeCompare( valueB )
-						: valueB.localeCompare( valueA );
-				} );
-			}
-		}
-		// Handle pagination.
-		const start = ( view.page - 1 ) * view.perPage;
-		const totalItems = filteredData?.length || 0;
-		filteredData = filteredData?.slice( start, start + view.perPage );
-		return {
-			shownData: filteredData,
-			paginationInfo: {
-				totalItems,
-				totalPages: Math.ceil( totalItems / view.perPage ),
-			},
-		};
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
 	const onChangeView = useCallback(
 		( newView ) => {

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;
 			}
 		}
@@ -184,6 +190,12 @@
 			> * {
 				flex-grow: 1;
 			}
+
+			&.dataviews-view-table__primary-field {
+				a {
+					flex-grow: 0;
+				}
+			}
 		}
 	}
 	.dataviews-view-table-header-button {
@@ -238,10 +250,10 @@
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
-		width: 100%;
+		flex-grow: 0;
 
 		&:hover {
-			color: $gray-900;
+			color: var(--wp-admin-theme-color);
 		}
 		@include link-reset();
 	}
@@ -321,7 +333,24 @@
 		}
 
 		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-value {
+			align-items: flex-start;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
 				color: $gray-700;
 			}
 		}
@@ -334,6 +363,7 @@
 
 	li {
 		margin: 0;
+		cursor: pointer;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
@@ -349,14 +379,21 @@
 				background: $gray-100;
 				height: 1px;
 			}
-		}
 
-		&:not(.is-selected):hover {
-			color: var(--wp-admin-theme-color);
+			> * {
+				width: 100%;
+			}
+		}
 
-			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields {
+		&:not(.is-selected) {
+			&:hover,
+			&:focus-within {
 				color: var(--wp-admin-theme-color);
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}
@@ -382,8 +419,9 @@
 	.dataviews-view-list__item {
 		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
 		width: 100%;
-		cursor: pointer;
-		&:focus {
+		scroll-margin: $grid-unit-10 0;
+
+		&:focus-visible {
 			&::before {
 				position: absolute;
 				content: "";
@@ -398,6 +436,7 @@
 		}
 		.dataviews-view-list__primary-field {
 			min-height: $grid-unit-05 * 5;
+			overflow: hidden;
 		}
 	}
 
@@ -443,7 +482,7 @@
 		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			&:empty {
+			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}
 		}