@wordpress/dataviews 0.5.5 → 0.7.0

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';
 
 /**
@@ -92,69 +89,67 @@ export default function DataViews( {
 	);
 	return (
 		<div className="dataviews-wrapper">
-			<VStack spacing={ 3 } justify="flex-start">
+			<HStack
+				alignment="top"
+				justify="start"
+				className="dataviews-filters__view-actions"
+			>
 				<HStack
-					alignment="top"
 					justify="start"
-					className="dataviews-filters__view-actions"
+					className="dataviews-filters__container"
+					wrap
 				>
-					<HStack
-						justify="start"
-						className="dataviews-filters__container"
-						wrap
-					>
-						{ search && (
-							<Search
-								label={ searchLabel }
-								view={ view }
-								onChangeView={ onChangeView }
-							/>
-						) }
-						<Filters
-							fields={ _fields }
+					{ search && (
+						<Search
+							label={ searchLabel }
 							view={ view }
 							onChangeView={ onChangeView }
-							openedFilter={ openedFilter }
-							setOpenedFilter={ setOpenedFilter }
 						/>
-					</HStack>
-					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-						hasPossibleBulkAction && (
-							<BulkActions
-								actions={ actions }
-								data={ data }
-								onSelectionChange={ onSetSelection }
-								selection={ selection }
-								getItemId={ getItemId }
-							/>
-						) }
-					<ViewActions
+					) }
+					<Filters
 						fields={ _fields }
 						view={ view }
 						onChangeView={ onChangeView }
-						supportedLayouts={ supportedLayouts }
+						openedFilter={ openedFilter }
+						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/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>
 	);
 }

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 {
+	VisuallyHidden,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { search } 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,7 +39,112 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-export default function SearchWidget( { filter, view, onChangeView } ) {
+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 selectedFilter = view.filters.find(
+		( _filter ) => _filter.field === filter.field
+	);
+	const selectedValues = selectedFilter?.value;
+	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 currentFilter = view.filters.find(
+									( _filter ) =>
+										_filter.field === filter.field
+								);
+								const newFilters = currentFilter
+									? [
+											...view.filters.map(
+												( _filter ) => {
+													if (
+														_filter.field ===
+														filter.field
+													) {
+														return {
+															..._filter,
+															operator:
+																currentFilter.operator ||
+																filter
+																	.operators[ 0 ],
+															value: element.value,
+														};
+													}
+													return _filter;
+												}
+											),
+									  ]
+									: [
+											...view.filters,
+											{
+												field: filter.field,
+												operator: filter.operators[ 0 ],
+												value: element.value,
+											},
+									  ];
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: newFilters,
+								} );
+							} }
+						/>
+					}
+				>
+					<span className="dataviews-search-widget-listitem-check">
+						{ selectedValues === element.value && (
+							<Icon icon={ radioCheck } />
+						) }
+					</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(
@@ -97,12 +217,12 @@ 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">
+							<span className="dataviews-search-widget-listitem-check">
 								{ selectedValues === element.value && (
 									<Icon icon={ radioCheck } />
 								) }
@@ -113,7 +233,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 +246,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/stories/index.story.js

@@ -6,9 +6,9 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DataViews, LAYOUT_GRID, LAYOUT_TABLE } from '../index';
-
+import { DataViews } from '../index';
 import { DEFAULT_VIEW, actions, data } from './fixtures';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
 
 const meta = {
 	title: 'DataViews (Experimental)/DataViews',
@@ -17,7 +17,9 @@ const meta = {
 export default meta;
 
 const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'image',
 		primaryField: 'title',
@@ -100,23 +102,19 @@ export const Default = ( props ) => {
 		};
 	}, [ view ] );
 	const onChangeView = useCallback(
-		( viewUpdater ) => {
-			let updatedView =
-				typeof viewUpdater === 'function'
-					? viewUpdater( view )
-					: viewUpdater;
-			if ( updatedView.type !== view.type ) {
-				updatedView = {
-					...updatedView,
+		( newView ) => {
+			if ( newView.type !== view.type ) {
+				newView = {
+					...newView,
 					layout: {
-						...defaultConfigPerViewType[ updatedView.type ],
+						...defaultConfigPerViewType[ newView.type ],
 					},
 				};
 			}
 
-			setView( updatedView );
+			setView( newView );
 		},
-		[ view, setView ]
+		[ view.type, setView ]
 	);
 	return (
 		<DataViews
@@ -131,7 +129,5 @@ export const Default = ( props ) => {
 };
 Default.args = {
 	actions,
-	getItemId: ( item ) => item.id,
-	isLoading: false,
 	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
 };

package/src/style.scss

@@ -4,14 +4,15 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
-
-	> div {
-		min-height: 100%;
-	}
 }
 
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
+	margin-bottom: $grid-unit-15;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+
 	.components-search-control {
 		.components-base-control__field {
 			max-width: 240px;
@@ -21,6 +22,17 @@
 
 .dataviews-filters__container {
 	padding-right: $grid-unit-40;
+
+	.dataviews-filters__reset-button[aria-disabled="true"] {
+		&,
+		&:hover {
+			opacity: 0;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+	}
 }
 
 .dataviews-filters-button {
@@ -28,14 +40,14 @@
 }
 
 .dataviews-pagination {
-	margin-top: auto;
 	position: sticky;
 	bottom: 0;
-	background-color: rgba($white, 0.8);
-	backdrop-filter: blur(6px);
+	left: 0;
+	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
+	flex-shrink: 0;
 }
 
 .dataviews-pagination__page-selection {
@@ -49,10 +61,6 @@
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
-.dataviews-view-table-wrapper {
-	overflow-x: auto;
-}
-
 .dataviews-view-table {
 	width: 100%;
 	text-indent: 0;
@@ -68,7 +76,7 @@
 	}
 	th {
 		text-align: left;
-		color: var(--wp-components-color-foreground, $gray-900);
+		color: $gray-900;
 		font-weight: normal;
 		font-size: $default-font-size;
 	}
@@ -146,17 +154,18 @@
 		}
 	}
 	thead {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: z-index(".dataviews-view-table thead");
+
 		tr {
 			border: 0;
 		}
 		th {
-			position: sticky;
-			top: -1px;
 			background-color: $white;
 			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
 			padding-top: $grid-unit-10;
 			padding-bottom: $grid-unit-10;
-			z-index: 1;
 			font-size: 11px;
 			text-transform: uppercase;
 			font-weight: 500;
@@ -473,6 +482,10 @@
 .dataviews-no-results,
 .dataviews-loading {
 	padding: 0 $grid-unit-40;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .dataviews-view-table-selection-checkbox label {
@@ -500,9 +513,6 @@
 	margin-left: $grid-unit-10;
 }
 
-.dataviews-view-grid__card.has-no-pointer-events * {
-	pointer-events: none;
-}
 .dataviews-filter-summary__popover {
 	.components-popover__content {
 		width: 230px;
@@ -517,56 +527,62 @@
 	overflow: auto;
 	border-top: 1px solid $gray-200;
 
-	.dataviews-search-widget-filter-combobox-item {
-		display: flex;
-		align-items: center;
-		gap: $grid-unit-10;
-		border-radius: $radius-block-ui;
-		box-sizing: border-box;
-		padding: $grid-unit-10 $grid-unit-15;
-		cursor: default;
-		margin-block-end: 2px;
-
-		&:last-child {
-			margin-block-end: 0;
+	.dataviews-search-widget-filter-combobox-item-value {
+		[data-user-value] {
+			font-weight: 600;
 		}
+	}
+}
 
-		&:hover,
-		&[data-active-item],
-		&:focus {
-			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-			color: $white;
+.dataviews-search-widget-listbox {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+}
 
-			.dataviews-search-widget-filter-combobox-item-check {
-				fill: $white;
-			}
+.dataviews-search-widget-listitem {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	border-radius: $radius-block-ui;
+	box-sizing: border-box;
+	padding: $grid-unit-10 $grid-unit-15;
+	cursor: default;
+	margin-block-end: 2px;
 
-			.dataviews-search-widget-filter-combobox-item-description {
-				color: $white;
-			}
-		}
+	&:last-child {
+		margin-block-end: 0;
+	}
 
-		.dataviews-search-widget-filter-combobox-item-check {
-			width: 24px;
-			height: 24px;
-			flex-shrink: 0;
-		}
+	&:hover,
+	&[data-active-item],
+	&:focus {
+		background-color: var(--wp-admin-theme-color);
+		color: $white;
 
-		.dataviews-search-widget-filter-combobox-item-value {
-			[data-user-value] {
-				font-weight: 600;
-			}
+		.dataviews-search-widget-listitem-check {
+			fill: $white;
 		}
 
-		.dataviews-search-widget-filter-combobox-item-description {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			font-size: $helptext-font-size;
-			line-height: 16px;
-			color: $gray-700;
+		.dataviews-search-widget-listitem-description {
+			color: $white;
 		}
 	}
+
+	.dataviews-search-widget-listitem-check {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+
+	.dataviews-search-widget-listitem-description {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: $helptext-font-size;
+		line-height: 16px;
+		color: $gray-700;
+	}
 }
 
 .dataviews-search-widget-filter-combobox__wrapper {
@@ -594,7 +610,7 @@
 
 		&:focus {
 			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 
 		&::placeholder {
@@ -622,8 +638,12 @@
 }
 
 .dataviews-filter-summary__operators-container {
-	padding: $grid-unit-10 $grid-unit-10 $grid-unit-05;
-	padding-bottom: 0;
+	padding: $grid-unit-10 $grid-unit-10 0;
+
+	&:has(+ .dataviews-search-widget-listbox) {
+		border-bottom: 1px solid $gray-200;
+		padding-bottom: $grid-unit-10;
+	}
 
 	&:empty {
 		display: none;

package/src/view-actions.js

@@ -56,7 +56,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						value={ availableView.type }
 						name="view-actions-available-view"
 						checked={ availableView.type === view.type }
-						hideOnClick={ true }
+						hideOnClick
 						onChange={ ( e ) => {
 							onChangeView( {
 								...view,

package/src/view-grid.js

@@ -11,10 +11,10 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Tooltip,
+	Spinner,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,7 +35,6 @@ function GridItem( {
 	primaryField,
 	visibleFields,
 } ) {
-	const [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
@@ -45,11 +44,11 @@ function GridItem( {
 			key={ id }
 			className={ classnames( 'dataviews-view-grid__card', {
 				'is-selected': hasBulkAction && isSelected,
-				'has-no-pointer-events': hasNoPointerEvents,
 			} ) }
-			onMouseDown={ ( event ) => {
+			onClickCapture={ ( event ) => {
 				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
-					setHasNoPointerEvents( true );
+					event.stopPropagation();
+					event.preventDefault();
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {
@@ -73,11 +72,6 @@ function GridItem( {
 					}
 				}
 			} }
-			onClick={ () => {
-				if ( hasNoPointerEvents ) {
-					setHasNoPointerEvents( false );
-				}
-			} }
 		>
 			<div className="dataviews-view-grid__media">
 				{ mediaField?.render( { item } ) }
@@ -190,7 +184,7 @@ export default function ViewGrid( {
 						'dataviews-no-results': ! isLoading,
 					} ) }
 				>
-					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				</div>
 			) }
 		</>

package/src/view-list.js

@@ -11,6 +11,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
+	Spinner,
 } from '@wordpress/components';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { info } from '@wordpress/icons';
@@ -60,7 +61,7 @@ export default function ViewList( {
 				} ) }
 			>
 				{ ! hasData && (
-					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				) }
 			</div>
 		);