@wordpress/dataviews 0.6.0 → 0.8.0

package/src/search-widget.js

@@ -8,12 +8,27 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import { VisuallyHidden, Icon } from '@wordpress/components';
-import { search } from '@wordpress/icons';
+import {
+	VisuallyHidden,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { search, check } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
@@ -24,13 +39,157 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-export default function SearchWidget( { filter, view, onChangeView } ) {
+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,
+		focusLoop: true,
+		// When we have no or just one operators, we can set the first item as active.
+		// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
+		// so the first item is not selected, since the focus is on the operators control.
+		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
+	} );
+	const currentFilter = view.filters.find(
+		( f ) => f.field === filter.field
+	);
+	const currentValue = getCurrentValue( filter, currentFilter );
+	return (
+		<Composite
+			store={ compositeStore }
+			role="listbox"
+			className="dataviews-search-widget-listbox"
+			aria-label={ sprintf(
+				/* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
+				__( 'List of: %1$s' ),
+				filter.name
+			) }
+			onFocusVisible={ () => {
+				if ( ! compositeStore.getState().activeId ) {
+					compositeStore.move( compositeStore.first() );
+				}
+			} }
+			render={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }
+		>
+			{ filter.elements.map( ( element ) => (
+				<Ariakit.CompositeHover
+					store={ compositeStore }
+					key={ element.value }
+					render={
+						<CompositeItem
+							render={
+								<div
+									aria-label={ element.label }
+									role="option"
+									className="dataviews-search-widget-listitem"
+								/>
+							}
+							onClick={ () => {
+								const newFilters = currentFilter
+									? [
+											...view.filters.map(
+												( _filter ) => {
+													if (
+														_filter.field ===
+														filter.field
+													) {
+														return {
+															..._filter,
+															operator:
+																currentFilter.operator ||
+																filter
+																	.operators[ 0 ],
+															value: getNewValue(
+																filter,
+																currentFilter,
+																element.value
+															),
+														};
+													}
+													return _filter;
+												}
+											),
+									  ]
+									: [
+											...view.filters,
+											{
+												field: filter.field,
+												operator: filter.operators[ 0 ],
+												value: getNewValue(
+													filter,
+													currentFilter,
+													element.value
+												),
+											},
+									  ];
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: newFilters,
+								} );
+							} }
+						/>
+					}
+				>
+					<span className="dataviews-search-widget-listitem-check">
+						{ filter.singleSelection &&
+							currentValue === element.value && (
+								<Icon icon={ radioCheck } />
+							) }
+						{ ! filter.singleSelection &&
+							currentValue.includes( element.value ) && (
+								<Icon icon={ check } />
+							) }
+					</span>
+					<span>
+						{ element.label }
+						{ !! element.description && (
+							<span className="dataviews-search-widget-listitem-description">
+								{ element.description }
+							</span>
+						) }
+					</span>
+				</Ariakit.CompositeHover>
+			) ) }
+		</Composite>
+	);
+}
+
+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 ) =>
@@ -40,10 +199,8 @@ export default function SearchWidget( { filter, view, 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 ) => {
@@ -97,15 +254,20 @@ export default function SearchWidget( { filter, view, onChangeView } ) {
 						<Ariakit.ComboboxItem
 							key={ element.value }
 							value={ element.value }
-							className="dataviews-search-widget-filter-combobox-item"
+							className="dataviews-search-widget-listitem"
 							hideOnClick={ false }
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-search-widget-filter-combobox-item-check">
-								{ selectedValues === element.value && (
-									<Icon icon={ radioCheck } />
-								) }
+							<span className="dataviews-search-widget-listitem-check">
+								{ filter.singleSelection &&
+									currentValue === element.value && (
+										<Icon icon={ radioCheck } />
+									) }
+								{ ! filter.singleSelection &&
+									currentValue.includes( element.value ) && (
+										<Icon icon={ check } />
+									) }
 							</span>
 							<span>
 								<Ariakit.ComboboxItemValue
@@ -113,7 +275,7 @@ export default function SearchWidget( { filter, view, onChangeView } ) {
 									value={ element.label }
 								/>
 								{ !! element.description && (
-									<span className="dataviews-search-widget-filter-combobox-item-description">
+									<span className="dataviews-search-widget-listitem-description">
 										{ element.description }
 									</span>
 								) }
@@ -126,3 +288,8 @@ export default function SearchWidget( { filter, view, onChangeView } ) {
 		</Ariakit.ComboboxProvider>
 	);
 }
+
+export default function SearchWidget( props ) {
+	const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
+	return <Widget { ...props } />;
+}

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 );
@@ -31,9 +32,14 @@ export default function SingleSelectionCheckbox( {
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
-			checked={ isSelected }
 			label={ selectionLabel }
+			aria-disabled={ disabled }
+			checked={ isSelected }
 			onChange={ () => {
+				if ( disabled ) {
+					return;
+				}
+
 				if ( ! isSelected ) {
 					onSelectionChange(
 						data.filter( ( _item ) => {

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' ];